estilos de botón
Bootstrap ofrece siete estilos de botones:
Para lograr los estilos de botones de arriba, Bootstrap tiene las siguientes clases:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
El siguiente ejemplo muestra el código para los diferentes estilos de botones:
Ejemplo
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Inténtalo tú mismo " Las clases botón se puede utilizar en una <a> , <button> o <input> elemento:
Ejemplo
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> Inténtalo tú mismo " ¿Por qué ponemos un # en el href atributo del enlace?
Dado que no tienen página de vincularlo a, y no queremos conseguir un "404" mensaje, poner # que el enlace. En la vida real se debe por supuesto sido un verdadero URL para la página de "Búsqueda".
Tamaños de botón
Bootstrap ofrece cuatro tamaños de botón:
Las clases que definen los diferentes tamaños son:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
El siguiente ejemplo muestra el código para diferentes tamaños de botón:
Ejemplo
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Inténtalo tú mismo " Bloquear Nivel Botones
Un botón de nivel de bloque se extiende por todo el ancho del elemento padre.
Añadir clase .btn-block para crear un botón de nivel de bloque:
Ejemplo
<button type="button" class="btn btn-primary btn-block">Button 1</button> Inténtalo tú mismo " Activo / Botones de movilidad
Un botón puede estar configurado para un activo (aparecerá presionado) o un estado inhabilitado (unclickable):
La clase .active hace un botón aparecerá presionado, y la clase .disabled hace un botón unclickable:
Ejemplo
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
Referencia completa del botón Bootstrap
Para una referencia completa de todas las clases de botones, ir a nuestra completa Bootstrap Botón de referencia .