Bootstrap 4 JS Button
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>