Botones de arranque
Estilos de botones
Bootstrap proporciona diferentes estilos de botones:
Para lograr los estilos de botón anteriores, Bootstrap tiene las siguientes clases:
.btn.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 botón:
Ejemplo
<button type="button" class="btn">Basic</button>
<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>
Las clases de botones se pueden usar en un elemento <a>, <button>o
<input>:
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">
¿Por qué ponemos un # en el atributo href del enlace?
Como no tenemos ninguna página a la que enlazarlo y no queremos recibir un mensaje "404", ponemos # como enlace en nuestros ejemplos. Debe ser una URL real a una página específica.
Tamaños de botones
Bootstrap proporciona cuatro tamaños de botones:
Las clases que definen los diferentes tamaños son:
.btn-lg.btn-sm.btn-xs
El siguiente ejemplo muestra el código para diferentes tamaños de botones:
Ejemplo
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Botones de nivel de bloque
Un botón de nivel de bloque abarca todo el ancho del elemento principal.
Agregue clase .btn-blockpara crear un botón de nivel de bloque:
Ejemplo
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Botones activos/deshabilitados
Un botón se puede establecer en un estado activo (aparece presionado) o deshabilitado (no se puede hacer clic):
La clase .activehace que un botón parezca presionado, y la clase
.disabled
hace que no se pueda hacer clic en un botón:
Ejemplo
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Referencia completa del botón Bootstrap
Para obtener una referencia completa de todas las clases de botones, vaya a nuestra Referencia completa de botones de Bootstrap .