twitter-bootstrap
Botones
Buscar..
Sintaxis
- Clases: .btn-default | .btn-primario | .btn-éxito | .btn-info | .btn-advertencia | .btn-danger | .btn-link;
- Tamaños: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Estado: activo | incapacitado
Clases de botones
Bootstrap proporciona varias clases para diseñar botones y hacer que se destaquen.
Los botones de arranque pueden crearse agregando la clase .btn a un elemento.
| Clase bootstrap | Rol (color) |
|---|---|
.btn-default | Botón estándar (blanco) |
.btn-primary | Proporciona peso visual adicional e identifica la acción primaria (azul) |
.btn-success | Se utiliza para indicar una acción exitosa (verde) |
.btn-info | Botón contextual para proporcionar información (azul claro) |
.btn-warning | Indica precaución que debe ser aplicada por el usuario (amarillo) |
.btn-danger | Indica una acción peligrosa o negativa (rojo) |
.btn-link | Haz que tu botón parezca una etiqueta de ancla. |
Tamaños de botones
También puede crear diferentes tamaños de botones con las clases de .btn-size
| Clase bootstrap | Resultado |
|---|---|
.btn-lg | Crea un botón de mayor tamaño. |
.btn-sm | Crea un botón de tamaño más pequeño. |
.btn-xs | Crea un botón extra-pequeño. |
.btn-block | Los botones se convierten en elementos a nivel de bloque y abarcan todo el ancho de su padre |
Hacer el botón activo
La clase active hará que un botón aparezca presionado.
<button type="button" class="btn btn-primary active">Active Primary</button>
Deshabilitar un botón
Agregar la clase disabled a un botón hará que el botón no se pueda hacer clic y mostrará un cursor prohibido al pasar sobre él.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Renderizar botones horizontalmente juntos
Se pueden representar varios botones horizontalmente con la clase .btn-group . Simplemente envuelva sus botones dentro de un elemento contenedor y asigne a ese elemento la clase btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Renderizar botones verticalmente
Aplicar la .btn-group-vertical al elemento contenedor
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Hacer que el grupo de botones ocupe todo el ancho
Los botones envueltos dentro de un elemento .btn-group solo ocupan el ancho necesario. Para hacer que el grupo abarque todo el ancho de la pantalla, use .btn-group-justified lugar.
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>