Boutons d'amorçage
Styles de boutons
Bootstrap propose différents styles de boutons :
Pour obtenir les styles de bouton ci-dessus, Bootstrap a les classes suivantes :
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
L'exemple suivant montre le code des différents styles de bouton :
Exemple
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Les classes de boutons peuvent être utilisées sur un élément <a>, <button>ou
:<input>
Exemple
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Pourquoi met-on un # dans l'attribut href du lien ?
Puisque nous n'avons pas de page vers laquelle le lier, et que nous ne voulons pas recevoir de message "404", nous mettons # comme lien dans nos exemples. Il doit s'agir d'une véritable URL vers une page spécifique.
Tailles des boutons
Bootstrap fournit quatre tailles de bouton :
Les classes qui définissent les différentes tailles sont :
.btn-lg.btn-sm.btn-xs
L'exemple suivant montre le code pour différentes tailles de bouton :
Exemple
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Bloquer les boutons de niveau
Un bouton de niveau bloc s'étend sur toute la largeur de l'élément parent.
Ajoutez une classe .btn-blockpour créer un bouton au niveau du bloc :
Exemple
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Boutons actifs/désactivés
Un bouton peut être défini sur un état actif (apparaître enfoncé) ou désactivé (non cliquable) :
La classe .activefait apparaître un bouton enfoncé, et la classe
.disabled
rend un bouton non cliquable :
Exemple
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Référence complète du bouton Bootstrap
Pour une référence complète de toutes les classes de boutons, consultez notre référence complète sur les boutons Bootstrap .