Las siguientes clases se pueden usar para dar estilo a cualquier elemento <a>, <button> o <input>.
Clase |
Descripción |
.btn |
Añade estilo básico a un botón |
.btn-block |
Crea un botón de nivel de bloque (abarca todo el ancho del elemento primario) |
.btn-danger |
Indica una acción peligrosa o potencialmente negativa. |
.btn-dark |
Botón gris oscuro |
.btn-default |
Indica un botón estándar |
.btn-info |
Botón contextual para mensajes informativos de alerta |
.btn-lg |
Botón grande |
.btn-light |
Botón gris claro |
.btn-link |
Hace que un botón parezca un enlace (seguirá teniendo el comportamiento del botón) |
.btn-outline-* |
Crea un botón contorneado / bordeado. Utiliza cualquiera de las clases contextuales como * (btn-outline-primary, btn-outline-success, etc.) |
.btn-primary |
Proporciona un peso visual adicional e identifica la acción principal en un conjunto de botones. |
.btn-sm |
Hace un pequeño botón |
.btn-success |
Indica una acción satisfactoria o positiva |
.btn-secondary |
Indica una acción menos importante |
.btn-toolbar |
Combina conjuntos de grupos de botones en barras de herramientas de botones para componentes más complejos |
.btn-warning |
Indica precaución con esta acción. |
.active |
Hace que el botón aparezca presionado |
.disabled |
Desabilita el botón |
Vía Javascript
Habilitar manualmente con:
$('.btn').button();
Opciones de botón
Métodos de botón
La siguiente tabla enumera todos los métodos de botón disponibles.
Nota: Los métodos también se pueden pasar a través de atributos de datos, agrega el nombre del método a data-, como en data-toggle o data-dispose.
Método |
Descripción |
.button(«toggle»); |
Hace que el botón se vea presionado |
.button(«dispose»); |
Destruye el botón de un elemento |
Ejm con button(«toggle»);
<!DOCTYPE html>
<html lang="es">
<head>
<title>Button toggle</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Boton toggle</h2>
<p>El método toggle hace que el botón parezca presionado. Haga clic en ambos
botones, pero también haga clic fuera del botón para ver la diferencia.</p>
<button type="button" class="btn btn-primary">Button (toggle)</button>
<button type="button" class="btn btn-primary">Button (no toggle)</button>
</div>
<script>
$(document).ready(function(){
$(".btn-primary:first").click(function(){
$(this).button('toggle');
})
})
</script>
</body>
</html>