[#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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *