Bootstrap's los ajustes por defecto
Controles de formulario individuales reciben automáticamente algo más de estilo global con Bootstrap .
Todos los textos de <input>, <textarea> y <select> elementos con class="form-control" se ponen a width: 100%; por defecto.
Disposiciones de referencia para Bootstrap formas:
- Añadir role="form" a la <form> elemento (ayuda a mejorar la accesibilidad para las personas que utilizan lectores de pantalla)
- Envolver las etiquetas y los controles de formulario en un <div> elemento con class="form-group" (necesaria para la separación óptima)
- Añadir class="form-control" a todos textual <input>, <textarea> y <select> elementos
En el siguiente ejemplo se crea una forma sencilla rutina de carga con dos campos de entrada, una casilla de verificación, y un botón de envío:
Forma Ejemplo Bootstrap
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input
type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox">
Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form> Inténtalo tú mismo " <form> Clases
| Clase | Descripción | Ejemplo |
|---|---|---|
| .form-inline | Hace un <form> alineado a la izquierda con los controles inline-block (Esto sólo se aplica a las formas dentro de viewports que son al menos 768px de ancho) | Intentalo |
| .form-horizontal | Alinea las etiquetas y los grupos de controles de formulario en una disposición horizontal | Intentalo |