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>