Bootstrap offre une variété de styles et de tailles de boutons qui peuvent être utilisés pour différents besoins de conception et situations.

Classes de Boutons Communes

Bouton de base

La classe btn sert de classe de base pour le style des boutons. Elle fournit un style de bouton essentiel, tel que le remplissage, la bordure et les effets de survol.

Styles de bouton

Bootstrap offre une variété de styles de boutons prédéfinis qui peuvent être appliqués à l'aide de classes spécifiques. Ces styles incluent :

• btn-primary: Applique une couleur primaire au bouton, généralement utilisée pour les actions principales ;
• btn-secondary: Applique une couleur secondaire au bouton, souvent utilisée pour les actions secondaires ;
• btn-success: Donne au bouton une couleur indicative de succès, souvent utilisée pour les actions positives ;
• btn-danger: Fournit une couleur signalant un danger ou des actions critiques ;
• btn-warning: Applique une couleur représentant un avertissement ou une prudence ;
• btn-info: Donne au bouton une couleur pour transmettre des messages d'information ;
• btn-light: Applique un schéma de couleurs claires au bouton, adapté aux arrière-plans plus clairs ;
• btn-dark: Applique un schéma de couleurs sombres au bouton, adapté aux arrière-plans plus sombres ;
• btn-link: Rend le bouton comme un simple lien sans aucun style supplémentaire, souvent utilisé pour les actions en ligne.

Tailles de bouton

Nous pouvons ajuster la taille des boutons en utilisant des classes spécifiques.

• btn-lg: Cette classe augmente la taille du bouton, le rendant plus grand que la taille par défaut. Elle est généralement utilisée pour les boutons principaux ou proéminents qui nécessitent plus d'attention ;
• btn-sm: À l'inverse, cette classe diminue la taille du bouton, le rendant plus petit que la taille par défaut. Elle est souvent utilisée pour les boutons secondaires ou auxiliaires qui nécessitent moins d'emphase.

État désactivé

Ajouter l'attribut booléen disabled à tout élément <button> le rend inactif. Les boutons désactivés ont pointer-events: none appliqué, empêchant les états de survol et d'activation de se déclencher.