![Tutorial Bootstrap 3: Sistema Grid](https://cdn-pre.openwebinars.net/media/featured_images/Tutorial-bootstrap.jpg)
Tutorial Bootstrap 3: Sistema Grid
Para estructurar nuestra web con el Framework de Bootstrap utilizaremos un sistema Grid de 12 columnas, olvídate de las tablas. Esto quiere...
![](https://cdn-pre.openwebinars.net/media/avatars/angel_manuel2/angel_robledano.jpg)
Seguimos con la serie de artículos del tutorial de Bootstrap 3, y en esta ocasión nos centramos en la creación de formularios con este framework.
Tabla de contenidos
Posiblemente uno de los elementos más importantes de nuestra Webs, los formularios. Con ellos, los usuario introducen datos que le pedimos y son enviados a nuestro servidor para ser procesados por nosotros.
Con la aparición de HTML5, aparecieron más inputs para formularios .
Existen también otros elementos, pero no se tratan con la etiqueta de input, que son textarea y select. Con textarea tendremos un campo de texto de varias líneas, destinado normalmente a párrafos y select, para elegir una opción de una lista desplegable.
Recuerda que para definir qué tipo de input es el que vamos a mostrar al usuario, hay que utilizar type.
Para un input tipo texto en una sola línea, utilizaremos text. Si le añadimos la clase .form-control el input se adaptará al 100% de la página.
Cuando queramos tener un campo para escribir párrafos largos , utilizaremos textarea. Recordad que este campo no es un input. añadimos rows= para ver cuantas líneas queremos que sea de alto.
Para elegir entre varias opciones, tenemos dos soluciones. Los checkboxes donde podremos elegir varias opciones a la vez y los radio buttons donde podemos elegir una única opción .
Si queremos diseñar nuestro formulario en una línea , añadimos la clase .checkbox-inline, tanto para los checkbox como los radio buttons.
Además de los checkbox y radio buttons, tenemos listas despegables . Se suelen utilizar cuando tenemos muchas opciones a elegir. Estas listas desplegables se utilizan mucho para los campos de fecha.
También podemos tener listas desplegadas, además en ellas podemos elegir múltiples opciones. Para ello, le añadimos múltiple.
Para modificar la anchura de de los campos de nuestro formulario utilizamos de nuevo el sistema de grid . Sabiendo ya como funciona, os resultará muy fácil.
Si queremos modificar la altura de nuestros input, es más fácil. Tenemos dos opciones la clase input-lg para un tamaño grande o input-sm, para tamaño mediano. Si no le añadimos ninguna clase, aparecerá con el tamaño por defecto.
Una vez que nuestro usuario rellena el formulario, es necesario un botón de enviar para que nos llegue la información que el usuario nos ha facilitado. Con Bootstrap tenemos muchos tipos de botones para ello.
Y para el tamaño de los botones tenemos 3 opciones, .btn-lg, .btn-sm, o .btn-xs.
Y para el tamaño de los botones tenemos 4 opciones, .btn-lg, .btn-sm, .btn-xs o por defecto.
Os dejo con un ejemplo de un formulario completo para el registro de un usuario en una web:
Como siempre, en la documentación tenéis ejemplos de todas las opciones para formularios.
También te puede interesar
Para estructurar nuestra web con el Framework de Bootstrap utilizaremos un sistema Grid de 12 columnas, olvídate de las tablas. Esto quiere...
Continuamos el tutorial de Bootstrap 3 detallando los elementos más interesantes que incluye el framework.
Aprende a maquetar sitios web responsive usando el framework Bootstrap 4.