Bootstrap Botones
Este capítulo explicará cómo usar los botones de Bootstrap mediante ejemplos. Cualquier elemento con class.btnheredará la apariencia predeterminada de un botón gris redondeado. Sin embargo, Bootstrap ofrece varias opciones para definir el estilo de los botones, como se muestra en la siguiente tabla:
Los siguientes estilos se pueden usar en elementos <a>, <button> o <input>:
| Clase |
Descripción |
Ejemplo |
| .btn |
Agregar estilo básico al botón |
Pruébalo |
| .btn-default |
Botón predeterminado/estándar |
Pruébalo |
| .btn-primary |
Estilo de botón primario (sin interacción) |
Pruébalo |
| .btn-success |
Indica una acción exitosa |
Pruébalo |
| .btn-info |
Este estilo se puede usar para botones que muestran información emergente |
Pruébalo |
| .btn-warning |
Indica un botón que requiere precaución |
Pruébalo |
| .btn-danger |
Representa una acción de botón peligrosa |
Pruébalo |
| .btn-link |
Hace que el botón parezca un enlace (aunque conserva el comportamiento de botón) |
Pruébalo |
| .btn-lg |
Crea un botón grande |
Pruébalo |
| .btn-sm |
Crea un botón pequeño |
Pruébalo |
| .btn-xs |
Crea un botón extra pequeño |
Pruébalo |
| .btn-block |
Botón de bloque (se estira hasta el 100% del ancho del elemento padre) |
Pruébalo |
| .active |
Botón pulsado |
Pruébalo |
| .disabled |
Botón deshabilitado |
Pruébalo |
El siguiente ejemplo demuestra todas las clases de botón anteriores:
Ejemplo
<button type="button" class="btn btn-default">Botón predeterminado</button>
<button type="button" class="btn btn-primary">Botón primario</button>
<button type="button" class="btn btn-success">Botón de éxito</button>
<button type="button" class="btn btn-info">Botón de información</button>
<button type="button" class="btn btn-warning">Botón de advertencia</button>
<button type="button" class="btn btn-danger">Botón de peligro</button>
<button type="button" class="btn btn-link">Botón de enlace</button>
Pruébalo »
El resultado se muestra a continuación:
La siguiente tabla enumera las clases para obtener botones de varios tamaños:
| Class | Descripción |
|---|
| .btn-lg | Esto hará que el botón se vea más grande. |
| .btn-sm | Esto hará que el botón se vea más pequeño. |
| .btn-xs | Esto hará que el botón se vea especialmente pequeño. |
| .btn-block | Esto creará un botón a nivel de bloque que abarcará todo el ancho del elemento padre. |
El siguiente ejemplo muestra todas las clases de botón anteriores:
Ejemplo
<p>
<button type="button" class="btn btn-primary btn-lg">Botón primario grande</button>
<button type="button" class="btn btn-default btn-lg">Botón grande</button>
</p>
<p>
<button type="button" class="btn btn-primary">Botón primario de tamaño predeterminado</button>
<button type="button" class="btn btn-default">Botón de tamaño predeterminado</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Botón primario pequeño</button>
<button type="button" class="btn btn-default btn-sm">Botón pequeño</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Botón primario extra pequeño</button>
<button type="button" class="btn btn-default btn-xs">Botón extra pequeño</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Botón primario de bloque</button>
<button type="button" class="btn btn-default btn-lg btn-block">Botón de bloque</button>
</p>
Pruébalo »
El resultado se muestra a continuación:
Bootstrap proporciona clases para estados de botones como activado y deshabilitado, que se explicarán en detalle a continuación.
Estado activo
Cuando un botón está activo, presentará una apariencia de estar presionado (fondo más oscuro, borde más oscuro y sombra).
La siguiente tabla enumera las clases que ponen el elemento de botón y el elemento de ancla en estado activo:
| Elemento | Class |
|---|
| Elemento de botón | Agregar.activeclass para mostrar que está activo. |
| Elemento de ancla | Agregar .activeclass al botón <a> para mostrar que está activo. |
El siguiente ejemplo demuestra esto:
Ejemplo
<p>
<button type="button" class="btn btn-default btn-lg ">Botón predeterminado</button>
<button type="button" class="btn btn-default btn-lg active">Botón activo</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Botón primario</button>
<button type="button" class="btn btn-primary btn-lg active">Botón primario activo</button>
</p>
Pruébalo »
El resultado se muestra a continuación:
Estado deshabilitado
Cuando deshabilita un botón, su color se atenúa un 50% y pierde el degradado.
La siguiente tabla enumera las clases que ponen el elemento de botón y el elemento de ancla en estado deshabilitado:
| Elemento | Class |
|---|
| Elemento de botón | Agregardisabled atributoal botón <button>. |
| Elemento de ancla | Agregardisabled classal botón <a>. |
El siguiente ejemplo demuestra esto:
Ejemplo
<p>
<button type="button" class="btn btn-default btn-lg">Botón predeterminado</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Botón deshabilitado</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Botón primario</button>
<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Botón primario deshabilitado</button>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">Enlace</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Enlace deshabilitado</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">Enlace primario</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Enlace primario deshabilitado</a>
</p>
Pruébalo »
El resultado se muestra a continuación:
Puede usar las clases de botón en elementos <a>, <button> o <input>. Sin embargo, se recomienda usar las clases de botón en el elemento <button> para evitar problemas de incompatibilidad entre navegadores.
El siguiente ejemplo demuestra esto:
Ejemplo
<a class="btn btn-default" href="#" role="button">Enlace</a>
<button class="btn btn-default" type="submit">Botón</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Enviar">
Pruébalo »
El resultado se muestra a continuación:
Grupo de botones
Al usar .btn-group directamente en un div se puede crear un grupo de botones:
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Pruébalo »
Use .btn-group-lg|sm|xs para controlar el tamaño del grupo de botones:
Ejemplo
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Pruébalo »
Para configurar botones en orientación vertical, use la clase .btn-group-vertical:
Ejemplo
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Pruébalo »
Grupo de botones de tamaño adaptable
Puede configurar un grupo de botones de tamaño adaptable con la clase .btn-group-justified.
El siguiente ejemplo utiliza la etiqueta <a> para mostrarlo:
Ejemplo
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Pruébalo »
Nota:Si se trata de<button>un elemento, debe usar en la capa externa.btn-groupla clase para envolver:
Ejemplo
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Pruébalo »
Grupo de botones con menú desplegable integrado
Los botones integrados en un grupo de botones pueden tener un menú desplegable, como en el siguiente ejemplo:
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Pruébalo »
Botón dividido
Ejemplo
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
Pruébalo »
Otras extensiones
