Groupes du contenu de bas de page dans un tableau
Bootstrap définit des styles et le formatage de contenu de text bootstrap par default. Nous allons examiner certains des éléments HTML défini par défaut par Bootstrap
Bootstrap définit des styles et le formatage de contenu de texte par default comme les titres, paragraphes, blocs de citation, etc. ...
Dans ce chapitre, nous allons examiner certains des éléments HTML défini par défaut par Bootstrap un peu différemment que par les navigateurs.
Bootstrap définit les titres h2 à h6 comme suit :
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>
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>
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>
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.
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