Botón JS (button.js)
Utilizar este plugin si desea tener más control sobre sus botones.
Para ver un tutorial sobre los botones, leer nuestros Bootstrap Botones Tutorial .
Las clases Button Plugin
Las clases siguientes se pueden utilizar para cualquier estilo de <a>, <button> o <input> elemento:
| Clase | Descripción | Ejemplo |
|---|---|---|
| .btn | Añade un estilo básico para cualquier botón | Intentalo |
| .btn-default | Indica un botón predeterminado / estándar | Intentalo |
| .btn-primary | Proporciona peso visual adicional e identifica la acción principal de un conjunto de botones | Intentalo |
| .btn-success | Indica una acción exitosa o positivo | Intentalo |
| .btn-info | botón contextual de los mensajes de alerta informativos | Intentalo |
| .btn-warning | Indica que se debe tener cuidado con esta acción | Intentalo |
| .btn-danger | Indica una acción peligrosa o potencialmente negativo | Intentalo |
| .btn-link | Hace un botón parezca un enlace (todavía tendrá el comportamiento del botón) | Intentalo |
| .btn-lg | Hace un botón grande | Intentalo |
| .btn-sm | Hace un pequeño botón | Intentalo |
| .btn-xs | Hace un botón extra pequeña | Intentalo |
| .btn-block | Hace un botón a nivel de bloque (se extiende por todo el ancho del elemento padre) | Intentalo |
| .active | Hace que el botón aparecerá presionado | Intentalo |
| .disabled | Hace que la tecla bloqueada | Intentalo |
a través de JavaScript
Habilitar manualmente con:
$('.btn').button();
Opciones del botón
| None |
Métodos de botón
En la siguiente tabla se enumeran los métodos disponibles todos los botones.
Nota: Para este plugin, los métodos también se pueden pasar a través de los atributos de datos; anexar el nombre del método de de datos, como en la técnica de conmutación de datos o de carga.
| Método | Descripción | Intentalo |
|---|---|---|
| .button("toggle") | Hace que el botón presionado | Intentalo |
| .button("loading") | Desactiva el botón y cambia el texto del botón de "cargando ..." | Intentalo |
| .button("reset") | Cambia el texto del botón al texto original (si ha cambiado) | Intentalo |
| .button("string") | Especifica un nuevo texto del botón | Intentalo |
Ejemplos
El uso de CSS para personalizar los botones
Cómo eliminar los bordes redondeados:
Cómo añadir un color específico:
Ejemplo
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Inténtalo tú mismo " Cómo añadir sombras: