Bouton Bootstrap JS
Bouton JS (bouton.js)
Utilisez ce plugin si vous souhaitez avoir plus de contrôle sur vos boutons.
Pour un tutoriel sur les boutons, lisez notre tutoriel sur les boutons Bootstrap .
Les classes de plugins de boutons
Les classes ci-dessous peuvent être utilisées pour styliser n'importe quel élément <a>, <button> ou <input> :
| Class | Description | Example |
|---|---|---|
| .btn | Adds basic styling to any button | |
| .btn-default | Indicates a default/standard button | |
| .btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | |
| .btn-success | Indicates a successful or positive action | |
| .btn-info | Contextual button for informational alert messages | |
| .btn-warning | Indicates caution should be taken with this action | |
| .btn-danger | Indicates a dangerous or potentially negative action | |
| .btn-link | Makes a button look like a link (will still have button behavior) | |
| .btn-lg | Makes a large button | |
| .btn-sm | Makes a small button | |
| .btn-xs | Makes an extra small button | |
| .btn-block | Makes a block-level button (spans the full width of the parent element) | |
| .active | Makes the button appear pressed | |
| .disabled | Makes the button disabled |
Via Javascript
Activer manuellement avec :
$('.btn').button();
Options des boutons
| None |
Méthodes de bouton
Le tableau suivant répertorie toutes les méthodes de bouton disponibles.
Remarque : Pour ce plug-in, les méthodes peuvent également être transmises via des attributs de données ; ajoutez le nom de la méthode à data-, comme dans data-toggle ou data-loading.
| Method | Description | Try it |
|---|---|---|
| .button("toggle") | Makes the button look pressed | |
| .button("loading") | Disables the button and changes the button text to "loading..." | |
| .button("reset") | Changes the button text to original text (if changed) | |
| .button("string") | Specifies a new button text |
Plus d'exemples
Utiliser CSS pour personnaliser les boutons
Comment supprimer les bordures arrondies :
Exemple
.btn-default {
border-radius: 0;
}
Comment ajouter une couleur spécifique :
Exemple
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
Comment ajouter des ombres :
Exemple
.btn-default {
box-shadow: 1px 2px 5px #000000;
}