Controles de formulario compatibles
Bootstrap es compatible con los controles de formulario:
- input
- textarea
- checkbox
- radio
- select
Bootstrap entrada
Bootstrap es compatible con todos los tipos de HTML5 de entrada: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel , y color .
Nota: Las entradas no será totalmente decoradas si el tipo no se declara correctamente!
El siguiente ejemplo contiene dos elementos de entrada; uno de tipo texto y uno de contraseña:
Ejemplo
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input
type="password" class="form-control" id="pwd">
</div> Inténtalo tú mismo " Bootstrap Textarea
El siguiente ejemplo contiene un textarea :
Ejemplo
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div> Inténtalo tú mismo " Bootstrap Las casillas de verificación
Las casillas de verificación se utilizan si desea que el usuario seleccionar cualquier número de opciones de una lista de opciones predefinidas.
El siguiente ejemplo contiene tres casillas de verificación. La última opción está desactivada:
Ejemplo
<div class="checkbox">
<label><input type="checkbox"
value="">Option 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">Option 2</label>
</div>
<div
class="checkbox disabled">
<label><input type="checkbox" value=""
disabled>Option 3</label>
</div> Inténtalo tú mismo " Utilice la .checkbox-inline clase si desea que las casillas de verificación para que aparezca en la misma línea:
Ejemplo
<label class="checkbox-inline"><input type="checkbox"
value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label
class="checkbox-inline"><input type="checkbox" value="">Option 3</label> Inténtalo tú mismo " Bootstrap Radio Botones
Radio botones se usan si desea limitar al usuario sólo una selección de una lista de opciones predefinidas.
El siguiente ejemplo contiene tres botones de radio. La última opción está desactivada:
Ejemplo
<div class="radio">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<div class="radio">
<label><input
type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div> Inténtalo tú mismo " Utilice la .radio-inline clase si desea que los botones de selección para aparecer en la misma línea:
Ejemplo
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Inténtalo tú mismo " Bootstrap Seleccionar lista
Listas de selección se utilizan si desea permitir al usuario elegir entre varias opciones.
El ejemplo siguiente contiene una lista desplegable (lista de selección):
Ejemplo
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div> Inténtalo tú mismo "