Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Boutons Partie 1 | Concepts de Base
Essentiels de Bootstrap pour les Sites Web Modernes
course content

Contenu du cours

Essentiels de Bootstrap pour les Sites Web Modernes

Essentiels de Bootstrap pour les Sites Web Modernes

1. Comprendre Bootstrap
2. Configuration de l'Environnement
3. Concepts de Base
4. Concepts Avancés
5. Créer un Site Web de Portfolio avec Bootstrap

book
Boutons Partie 1

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.
html

index.html

copy

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.
html

index.html

copy

É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.

html

index.html

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 4
We're sorry to hear that something went wrong. What happened?
some-alt