Bouton Styles
Bootstrap fournit sept styles de boutons:
Pour atteindre les styles de bouton ci - dessus, Bootstrap a les classes suivantes:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
L'exemple suivant montre le code pour les différents styles de boutons:
Exemple
<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> Essayez - le vous - même » Les classes de boutons peuvent être utilisés sur un <a> , <button> ou <input> élément:
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"> Essayez - le vous - même » Pourquoi avons-nous mis un # dans le href attribut du lien?
Étant donné que nous ne disposons pas de la page pour le lier à, et nous ne voulons pas obtenir un "404" message, nous mettre # que le lien. Dans la vie réelle, il faut bien sûr été une véritable URL de la page "Recherche".
Tailles des boutons
Bootstrap fournit quatre tailles de boutons:
Les classes qui définissent les différentes tailles sont:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
L'exemple suivant montre le code pour les différentes tailles de boutons:
Exemple
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Essayez - le vous - même » Bloquer niveau Boutons
Un bouton de niveau bloc couvre toute la largeur de l'élément parent.
Ajouter classe .btn-block pour créer un bouton de niveau bloc:
Exemple
<button type="button" class="btn btn-primary btn-block">Button 1</button> Essayez - le vous - même » Boutons actifs / mobilité
Un bouton peut être réglé sur un actif (apparaît pressé) ou un (unclickable) état désactivé:
La classe .active fait un bouton apparaît enfoncé, et la classe .disabled fait un bouton unclickable:
Exemple
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»
Complete Bootstrap Bouton Référence
Pour une référence complète de toutes les classes de bouton, aller à notre complète Bootstrap Bouton de référence .