Texte et typographie de 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.

Tutoriel Bootstrap 3

Utilisation des titres par Bootstrap

Bootstrap définit les titres h1 à h6 comme suit :

rubrique h1. Bootstrap 36 px

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
Sélectionner 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.

Sélectionner 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.

Sélectionner le code

 <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

Sélectionner le code

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

Sélectionner le code

       <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