OUJOOD.COM
Utilisation des titres par Bootstrap
Bootstrap définit les titres h2 à h6 comme suit :
rubrique h2. Bootstrap 30 px
rubrique h3. Bootstrap 24 px
rubrique h4. Bootstrap 18 px
rubrique h5. Bootstrap 12 px
rubrique h6. Bootstrap 6 px
Exemple : 📋 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <title> Exemple de page web avec Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1> rubrique h1. Bootstrap 36 px</h1> <h2> rubrique h2. Bootstrap 30 px</h2> <h3> rubrique h3. Bootstrap 24 px</h3> <h4> rubrique h4. Bootstrap 18 px</h4> <h5> rubrique h5. Bootstrap 12 px</h5> <h6> rubrique h6. Bootstrap 6 px</h6> </div> </body> </html>
Vous pouvez définir toutes les rubriques HTML de la même façon que vous les définissez dans un document HTML simple.
Vous pouvez également utiliser les classes .h1 à .h6 sur d'autres éléments, au cas où vous voulez appliquer le même style sur le texte d'autre élément.
Exemple : 📋 Copier le code
<h1> rubrique h1. Bootstrap <small> texte Secondaire </ small> </ h1> <h2> rubrique h2. Bootstrap <small> texte Secondaire </ small> </ h2> <h3> rubrique h3. Bootstrap <small> texte Secondaire </ small> </ h3> <h4> rubrique h4. Bootstrap <small> texte Secondaire </ small> </ h4> <h5> rubrique h5. Bootstrap <small> texte Secondaire </ small> </ h5> <h6> rubrique h6. Bootstrap <small> texte Secondaire </ small> </ h6>
En Bootstrap l'élément <small> HTML est utilisé pour créer un texte secondaire, plus léger :
En outre, vous pouvez aussi utiliser la balise <span> avec la classe .small pour afficher le texte secondaire de la même façon que <small>
Utilisation des paragraphes
La valeur par défaut de font-size est 14px en Bootstrap, avec un line-height de 1.428. Ceci est appliqué à la balise <body> et tous les paragraphes.
En plus de cela une marge inférieure égale à la moitié de leur line-height (10px par défaut) est appliqué sur tous les paragraphes (<p>).
Vous pouvez également faire un paragraphe démarqué en ajoutant simplement la classe .lead.
<p> Ceci est la façon dont un paragraphe normal ressemble à Bootstrap. </ p> <p class="lead"> Ceci est la façon dont un paragraphe qui se démarque dans Bootstrap. </ p>
Vous pouvez facilement aligner le texte dans un paragraphe et autres éléments à l'aide des classes d'alignement du texte.
Comme le montre l'exemple du code qui suit
<p class = "text-left»> texte aligné à Gauche. </ p> <p class = "text-center"> texte aligné au Centre. </ p> <p class = "text- right"> texte aligné à droite. </ p> <p class = "text-justify"> texte justifié. </ p>
Bootstrap formatage de texte
Vous êtes libre d'utiliser les balises de formatage de texte comme <strong>, <i>, <small> pour faire votre texte en gras, italique, petites et ainsi de suite, de la même manière que vous avez l'habitude de le faire en HTML.
<p> <b> Ce texte est en gras </ b> </ p>
<p> <big> Ceci est un grand texte </ big> </ p>
<p> <code> Ceci est un code informatique </ code> </ p>
<p> <em> Ceci est un texte souligné </ em> </ p>
<p> <i> Ce texte est en italique </ i> </ p>
<p> <marque> ce texte est souligné </ marque> </ p>
<p> <small> Ceci est un petit texte </ small> </ p>
<p> <strong> Ce texte est fortement souligné </ strong> </ p>
<p> Ceci est un <sub> indice </ sub> et cela est un <sup> exposant </ sup> </ p>
<p> <ins> Ce texte est inséré dans le document </ ins> </ p>
<p> <del> Ce texte est supprimé du document </ del> </ p>
couleurs contextuelles et arrière-plan
Les couleurs sont une méthode puissante de transmettre des informations importantes dans la conception de site Web.
Bootstrap a quelques classes contextuelles qui peuvent être utilisés pour passer un message par le biais de couleurs.
Les classes de couleurs de texte sont :.text-muted, .text-primary, .text-success, .text-info, .text-warning et.text-danger .
Bootstrap a aussi des classes de couleurs d'arrière-plan sont :.bg-primary, .bg-success, bg-info, bg-warning et .bg-danger.
Testez ces classes pour voir leurs effets.
Plusieurs Classes de typographie
Les classes « bootstrap » ci-dessous peuvent être ajoutés à des éléments de style HTML supplémentaires :
| Classe | Description |
|---|---|
| .lead | Fait un paragraphe démarquer |
| .small | Indique un petit texte (mis à 85% de la taille du parent) |
| .text-left | Indique un texte aligné à gauche |
| .text-center | Indique le texte aligné au centre |
| .text-right | Indique le texte aligné à droite |
| .text-justify | Indique un texte justifié |
| .text-nowrap | Indique texte nowrap |
| .text-lowercase | Indique que le texte est en minuscules |
| .text-uppercase | Indique que le texte est en majuscule |
| .text-capitalize | Indique texte capitalisés |
| .initialism | Affiche le texte à l'intérieur d'un élément <abbr> dans une taille de police légèrement plus petite |
| .list-unstyled | Supprime le style de liste par défaut et la marge de gauche sur les éléments de liste (fonctionne aussi bien sur <ul> et <ol>). Cette classe est appliquée uniquement aux éléments de la liste |
| .list-inline | Place tous les éléments de la liste sur une seule ligne |
| .dl-horizontal | Aligne les termes (<dt>) et descriptions (<dd>) dans <dl> côte-à-côte. |
| .pre-scrollable | Applique le défilement sur un élément <pre> |
chapitre précédent chapitre suivant
Par carabde 25 decembre 2015