OUJOOD.COM
Paramètres par défaut de Bootstrap 5
Bootstrap 5 utilise une taille de police par défaut de 1rem (16px par défaut), et sa hauteur de ligne est de 1,5.
En outre, tous les éléments <p> ont margin-top : 0 et margin-bottom : 1rem (16px par défaut).
Bootstrap 5 donne un style aux titres HTML (<h1> à <h6>) avec un poids de police plus fort et une taille de police réactive.
Code
<!DOCTYPE html> <html lang="fr"> <head> <title>Bootstrap 5 Exemple </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <p>La taille de la police de chaque rubrique Bootstrap dépend de la taille de l'écran. Essayez de redimensionner la fenêtre du navigateur pour voir l'effet.</p> <h1>h1 En-tête Bootstrap</h1> <h2>h2 En-tête Bootstrap</h2> <h3>h3 En-tête Bootstrap</h3> <h4>h4 En-tête Bootstrap</h4> <h5>h5 En-tête Bootstrap</h5> <h6>h6 En-tête Bootstrap</h6> </div> </body> </html>
Vous pouvez aussi utiliser les classes .h1 à .h6 sur d'autres éléments pour qu'ils aient la même apparence que les titres :
Code
<p class="h1">h1 En-tête Bootstrap</p> <p class="h2">h2 En-tête Bootstrap</p> <p class="h3">h3 En-tête Bootstrap</p> <p class="h4">h4 En-tête Bootstrap</p> <p class="h5">h5 En-tête Bootstrap</p> <p class="h6">h6 En-tête de Bootstrap</p>
Titres d'affichage display
Les titres d'affichage display sont utilisés pour se démarquer davantage des titres normaux ,taille de police plus grande et poids de police plus léger. Vous avez le choix entre six classes : .display-1 à .display-6 :
Code
<h1 class="display-1" > Display 1 </h1> <h1 class="display-2" > Display 2 </h1> <h1 class="display-3" > Display 3 </h1> <h1 class="display-4" > Display 4 </h1> <h1 class="display-5" > Display 5 </h1> <h1 class="display-6" > Display 6 </h1>
Plus de classes de typographie
Les classes Bootstrap 5 ci-dessous peuvent être ajoutées pour donner un style supplémentaire aux éléments HTML :
| Classe | Description |
|---|---|
| .lead | fait ressortir un paragraphe |
| .text-start | Indique que le texte doit être aligné à gauche |
| .text-break | Pour éviter que les textes longs ne cassent la mise en page |
| .text-center | Indique que le texte doit être aligné au centre |
| .text-decoration-none | Supprime le soulignement d'un lien |
| .text-end | Indique que le texte doit être aligné à droite |
| .text-nowrap | Indique que le texte n'est pas enveloppé |
| .text-lowercase | Indique le texte en minuscules |
| .text-uppercase | Indique le texte en majuscules |
| .text-capitalize | indique le texte en majuscules |
| .initialism | Affiche le texte à l'intérieur d'un élément <abbr> dans une taille de police légèrement inférieure. |
| .list-unstyled | Supprime le style de liste et la marge gauche par défaut des éléments de liste (fonctionne à la fois sur <ul> et <ol>). Cette classe ne s'applique qu'aux enfants immédiats des éléments de liste (pour supprimer le style de liste par défaut de toute liste imbriquée, appliquez également cette classe à toute liste imbriquée). |
| .list-inline | Positionne tous les éléments de liste sur une seule ligne (utilisée conjointement avec .list-inline-item sur chaque élément <li>). |
Les couleurs en bootstrap 5
Couleurs de texte
Bootstrap 5 dispose de certaines classes contextuelles qui peuvent être utilisées pour fournir un "sens par les couleurs".
Les classes pour les couleurs de texte sont : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (couleur du bosy par défaut/souvent noir) et .text-light .
Code
<!DOCTYPE html> <html lang="fr"> <head> <title>Bootstrap Exemple</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Couleurs contextuelles</h2> <p>Utilisez les classes contextuelles pour fournir du " sens par les couleurs " :</p> <p class="texte-muted">Ce texte est muet.</p> </p> <p class="text-primary">Ce texte est important.</p> </p> <p class="text-success">Ce texte indique un succès.</p> </p> <p class="text-info">Ce texte représente une information.</p> </p> <p class="text-warning">Ce texte représente un avertissement.</p> </p> <p class="text-danger">Ce texte représente un danger.</p> </p> <p class="text-secondary">Texte secondaire.</p> </p> <p class="text-dark">Ce texte est gris foncé.</p> </p> <p class="text-body">Couleur par défaut du corps (souvent noir).</p> <p class="text-light">Ce texte est gris clair (sur fond blanc).</p> </p> <p class="text-white">Ce texte est blanc (sur fond blanc).</p> </div> </body> </html>
Vous pouvez également ajouter une opacité de 50 % pour le texte noir ou blanc avec les classes .text-black-50 ou .text-white-50 :
Couleurs d'arrière-plan
Les classes de couleurs d'arrière-plan sont les suivantes : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark et .bg-light.
Notez que les couleurs d'arrière-plan ne définissent pas la couleur du texte. Dans certains cas, il est donc préférable de les utiliser avec une classe de couleur .text-*.
Code
<!DOCTYPE html> <html lang="fr"> <head> <title>Bootstrap Exemple</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Fonds contextuels</h2> <p>Utilisez les classes d'arrière-plan contextuel pour fournir du "sens à travers les couleurs".</p> <p>Notez que vous pouvez également ajouter une classe .text-* si vous souhaitez une couleur de texte différente :</p> <p class="bg-primary text-white">Ce texte est important.</p> <p class="bg-success text-white">Ce texte indique un succès.</p> <p class="bg-info text-white" >Ce texte représente des informations.</p> <p class="bg-warning text-white" >Ce texte représente un avertissement.</p> <p class="bg-danger text-white" >Ce texte représente un danger.</p> <p class="bg-secondary text-white" >Couleur de fond secondaire.</p> <p class="bg-dark text-white">Dark grey couleur de fond.</p> <p class="bg-light text-dark">Couleur de fond gris clair.</p> </div> </body> </html>