Django - 4.2 Boutons Bootstrap : couleurs, tailles et états

Bootstrap est une bibliothèque CSS qui fournit des styles prêts à l'emploi. Elle permet de créer rapidement des boutons cohérents, sans écrire toute la mise en forme à la main. Cette leçon montre comment l'ajouter au projet, puis comment choisir la couleur, la taille et l'état des boutons.

Ajouter Bootstrap au projet

Pour utiliser Bootstrap, on copie le lien vers sa feuille de style CSS dans le projet. Le fichier JavaScript de Bootstrap se place ensuite en bas de la balise body.

Une fois ces deux éléments ajoutés, les classes Bootstrap sont disponibles sur les boutons et les autres éléments de la page.

Choisir la couleur des boutons

Bootstrap fonctionne avec des classes. La classe btn donne la forme de base du bouton. Une classe de couleur complète le style : btn-success pour le vert, btn-danger pour le rouge et btn-primary pour le bleu.

Certains boutons ont un texte coloré. Au survol de la souris, le bouton change de couleur, ce qui indique qu'il est cliquable.

Bootstrap prend en charge plusieurs tailles et plusieurs états. Il n'est donc pas nécessaire d'écrire un style spécifique pour chaque bouton.

<button class="btn btn-success">Vert</button>
<button class="btn btn-danger">Rouge</button>
<button class="btn btn-primary">Bleu</button>

Tailles, liens et boutons désactivés

Bootstrap permet de créer des boutons plus grands ou plus petits, selon le besoin. Des boutons peuvent aussi prendre toute la largeur de l'écran.

Un lien peut prendre l'apparence d'un bouton. Un bouton désactivé reste affiché, mais ne répond plus aux clics.

Ces boutons peuvent aussi être utilisés dans les formulaires et dans les boîtes de dialogue, avec le même principe de classes.

• Boutons de différentes tailles selon le besoin.
• Boutons qui occupent toute la largeur de l'écran.
• Liens stylisés comme des boutons.
• Boutons désactivés, visibles mais non cliquables.

En résumé

Bootstrap fournit des classes prêtes à l'emploi. La classe btn donne la base du bouton, une classe de couleur choisit son apparence, et d'autres classes règlent la taille, les liens et l'état désactivé.

Points clés

• Le CSS et le JavaScript de Bootstrap s'ajoutent au projet.
• La classe btn donne la forme de base d'un bouton.
• Les classes btn-success, btn-danger et btn-primary changent la couleur.
• Les boutons peuvent être plus grands, plus petits, ou pleine largeur.
• Un bouton désactivé reste affiché mais ne répond pas aux clics.

Questions fréquentes

Pourquoi ajouter le JavaScript de Bootstrap ?

Le JavaScript sert à certains composants interactifs, comme les boîtes de dialogue. La vidéo le place en bas de la balise body.

Faut-il écrire le CSS des boutons soi-même ?

Non. Les classes Bootstrap fournissent les styles de base, il suffit de les ajouter à l'élément.

Qu'est-ce qu'un bouton désactivé ?

C'est un bouton visible qui ne peut pas être cliqué. Il sert à montrer une action momentanément indisponible.