JS Bouton (button.js)
Utilisez ce plugin si vous voulez avoir plus de contrôle sur vos boutons.
Pour un tutoriel sur Boutons, lire nos Bootstrap Boutons Tutorial .
Les classes de Plugin Button
Les classes ci - dessous peuvent être utilisés pour le style de toute <a>, <button> ou <input> élément:
| Classe | La description | Exemple |
|---|---|---|
| .btn | Ajoute le style de base à tout bouton | Essayez - le |
| .btn-default | Indique un bouton par défaut / standard | Essayez - le |
| .btn-primary | Fournit poids visuel supplémentaire et identifie l'action principale dans un ensemble de boutons | Essayez - le |
| .btn-success | Indique une action réussie ou positive | Essayez - le |
| .btn-info | bouton contextuel pour les messages d'alerte d'information | Essayez - le |
| .btn-warning | Indique la prudence doit être pris avec cette action | Essayez - le |
| .btn-danger | Indique une action dangereuse ou potentiellement négative | Essayez - le |
| .btn-link | Fait un bouton ressembler à un lien (aura encore le comportement du bouton) | Essayez - le |
| .btn-lg | Fait un grand bouton | Essayez - le |
| .btn-sm | Fait un petit bouton | Essayez - le |
| .btn-xs | Fait un petit bouton supplémentaire | Essayez - le |
| .btn-block | Fait un bouton de niveau bloc (couvre toute la largeur de l'élément parent) | Essayez - le |
| .active | Rend le bouton apparaisse activé | Essayez - le |
| .disabled | Rend le bouton désactivé | Essayez - le |
Via JavaScript
Activer manuellement:
$('.btn').button();
Bouton Options
| None |
Méthodes Button
Le tableau suivant répertorie toutes les méthodes disponibles de bouton.
Remarque: Pour ce plugin, les méthodes peuvent également être transmises par l' intermédiaire d' attributs de données; ajouter le nom de la méthode à de données, comme dans les données-bascule ou de chargement de données.
| méthode | La description | Essayez-le |
|---|---|---|
| .button("toggle") | Rend le regard de bouton enfoncé | Essayez - le |
| .button("loading") | Désactive le bouton et modifie le texte du bouton à "Chargement en cours ..." | Essayez - le |
| .button("reset") | Modifie le texte du bouton au texte original (si modifié) | Essayez - le |
| .button("string") | Indique un nouveau texte du bouton | Essayez - le |
Exemples
L'utilisation de CSS pour personnaliser les boutons
Comment faire pour supprimer les frontières arrondies:
Comment ajouter une couleur spécifique:
Exemple
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Essayez - le vous - même » Comment ajouter des ombres: