[#BOOTSTRAP] HowTo: utilizar forms con Bootstrap 3 (bueno tampoco esperes mucho …)

Hola!

durante estos días he visto a mucha gente que se pone Jappy Jappy con Bootstrap, además parece que si lo usas con AngularJs pues es mejor que unas fresas bañadas con chocolate !!!

Hoy tocó trabajar un poco con forms y las lecciones aprendidas son las siguientes:

– existe una serie de clases para organizar los contenidos de un form, por ejemplo form-horizontal y form-inline

– existen una serie de clases para definir los labels de los controles y los estilos específicos de los controles

Veamos un ejemplo mal hecho:

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="controls">

  15:                     <label>Field 1</label>

  16:                     <input type="text" placeholder="1 type something ..." />

  17:                 </div>

  18:                 <div class="controls">

  19:                     <label>Fieldazo 2</label>

  20:                     <input type="text" placeholder="2 type something ..." />

  21:                 </div>

  22:             </fieldset>

  23:         </form>

  24:     </div>

  25:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  26: </body>

  27: </html>

El resultado que tenemos es el siguiente (mucho más feo que pegarle a tu madre)

image

Ahora bien, agrupando los controles en un DIV con la clase control-list, definiendo la clase control-label para el label de cada uno, y con poco mas … ya tenemos un form más agradable.

   1:  

   2: <!DOCTYPE html>

   3: <html xmlns="http://www.w3.org/1999/xhtml">

   4: <head>

   5:     <title>Form 1</title>

   6:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   7:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   8: </head>

   9: <body>

  10:     <div class="container">

  11:         <form class="form-horizontal">            

  12:             <fieldset>

  13:                 <legend>Form 1</legend>

  14:                 <div class="control-list">

  15:                     <label class="control-label">Field 1</label>

  16:                     <div class="controls">

  17:                         <input type="text" placeholder="1 type something ..." />

  18:                     </div>

  19:                 </div>

  20:                 <div class="control-list">

  21:                     <label class="control-label">Fieldazo 2</label>

  22:                     <div class="controls">

  23:                         <input type="text" placeholder="2 type something ..." />

  24:                     </div>

  25:                 </div>

  26:             </fieldset>

  27:         </form>

  28:     </div>

  29:     <script src="scripts/jquery-1.9.1.js"></script>
   1:  

   2:     <script src="scripts/bootstrap.js">

</script>

  30: </body>

  31: </html>

El ejemplo anterior de código guente nos permite conseguir un form que no haga vomitar a los habitantes del averno

image

Antes de seguir a ejemplos más avanzados (tampoco es que la cabeza me de para más), lo mejor es leer la ayuda oficial de CSS en la sección FORMS de Bootstrap >> http://getbootstrap.com/css/#forms

Por ejemplo el uso de la clase form-group con form-horizontal para agrupar contenidos horizontalmente, modelos de validación, etc.

 

Referencia: http://getbootstrap.com/css/#forms

Saludos @ La Finca

El Bruno

image image image Google
Advertisements

One thought on “[#BOOTSTRAP] HowTo: utilizar forms con Bootstrap 3 (bueno tampoco esperes mucho …)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s