English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base Bootstrap

Plugins Bootstrap

Typographie Bootstrap

Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif comme pile de polices par défaut.

Avec les caractéristiques de mise en page de Bootstrap, vous pouvez créer des titres, des paragraphes, des listes et d'autres éléments en ligne.

titres

Bootstrap définit tous les titres HTML (h1 à h6) avec le style. Regardez l'exemple suivant :

Les résultats sont affichés comme suit :

sous-titre en ligne

Si vous avez besoin d'ajouter un sous-titre en ligne à tout titre, il suffit de simplement ajouter <small> à chaque côté de l'élément, ou d'ajouter .small class, vous pouvez obtenir un texte de taille plus petite et de couleur plus pâle, comme dans les exemples suivants :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Exemple Bootstrap　-　Sous-titre en ligne</title>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>Je suis un titre1　h1.　<small>Je suis un sous-titre1　h1</small></h1>　
	<h2>Je suis un titre2　h2.　<small>Je suis un sous-titre2　h2</small></h2>
	<h2>Je suis un titre3　h2.　<small>Je suis un sous-titre3　h2</small></h2>
	<h4>Je suis un titre4　h4.　<small>Je suis un sous-titre4　h4</small></h4>
	<h5>Je suis un titre5　h5.　<small>Je suis un sous-titre5　h5</small></h5>
	<h6>Je suis un titre6　h6.　<small>Je suis un sous-titre6　h6</small></h6>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Copie principale de l'orientation

Pour ajouter un texte en gras et en haut de la ligne à un paragraphe, vous pouvez ajouter, ce qui donnera un texte plus grand et plus épais avec une hauteur de ligne plus élevée, comme dans les exemples suivants :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Copie principale de l'orientation</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Copie principale de l'orientation</h2>
<p　class="lead">Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation. Voici un exemple de démonstration de l'utilisation de la copie principale de l'orientation.</p>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Soulignement

Les balises d'accentuation HTML par défaut <small>（rendre le texte de la taille du texte parent). 85%）、<strong>（rendre le texte plus épais）、<em>（rendre le texte en italique）.

Bootstrap fournit des classes pour souligner le texte, comme dans les exemples suivants :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Soulignement/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>Le contenu de cette ligne est à l'intérieur de l'étiquette</small><br>
<strong>Le contenu de cette ligne est à l'intérieur de l'étiquette</strong><br>
<em>Le contenu de cette ligne est à l'intérieur de l'étiquette et affiché en italique</em><br>
<p　class="text-left">Alignement du texte à gauche</p>
<p　class="text-center">Alignement du texte au centre</p>
<p　class="text-right">Alignement du texte à droite</p>
<p　class="text-muted">Le contenu de cette ligne est affiché en faiblesse</p>
<p　class="text-primary">Le contenu de cette ligne contient une classe　primary</p>
<p　class="text-success">Le contenu de cette ligne contient une classe　success</p>
<p　class="text-info">Le contenu de cette ligne contient une classe　info</p>
<p　class="text-warning">Le contenu de cette ligne contient une classe　warning</p>
<p　class="text-danger">Le contenu de cette ligne contient une classe　danger</p>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

缩写

L'élément HTML fournit des balises de raccourci, telles que WWW ou HTTP. Bootstrap définit le style de l'élément <abbr> pour afficher une bordure de tiret décalé en bas du texte, qui s'affiche complète au survol de la souris (à condition que vous ayez ajouté du texte à l'attribut title de <abbr>). Pour obtenir un texte de taille plus petite, ajoutez .initialism à <abbr>.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
　　　<title>Exemple Bootstrap　-　缩写</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Adresse (Address)

Vous pouvez afficher des informations de contact sur une page web en utilisant la balise <address>. Comme <address> a par défaut display:block; vous devez utiliser la balise <br> pour ajouter des retours chariots aux textes d'adresse fermés.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Adresse</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<address>
	<strong>Some Company, Inc.</strong><br>
	007　rue<br>
	Some City, State XXXXX<br>
	<abbr title="Téléphone">P:</abbr> (123)　456-7890
</address>
<address>
	<strong>Nom complet</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Citation (Blockquote)

Vous pouvez utiliser le <blockquote> par défaut à côté de tout texte HTML. D'autres options incluent l'ajout d'une balise <small> pour identifier la source de la citation, l'utilisation de la classe .pull-right Citation alignée à droite. Les exemples suivants montrent ces caractéristiques :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Citation</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote>
	<p>
		Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut. Voici un exemple de citation par défaut.
	</p>
</blockquote>
<blockquote>
	C'est une citation avec un titre de source.
	<small>Une personne célèbre dans <cite title="Titre de la Source">Titre de la Source</cite></small>
</blockquote>
<blockquote class="pull-right">
	C'est une citation alignée à droite.
	<small>Une personne célèbre dans <cite title="Titre de la Source">Titre de la Source</cite></small>
</blockquote>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Liste

Bootstrap prend en charge les listes ordonnées, non ordonnées et les listes de définition.

  • Liste ordonnée：La liste ordonnée est une liste commençant par un nombre ou un caractère ordonné.

  • Liste non ordonnée：La liste non ordonnée est une liste sans ordre spécifique, commencant par un point d'exclamation en style traditionnel. Si vous ne souhaitez pas afficher ces points d'exclamation, vous pouvez utiliser la classe .list-unstyled pour supprimer les styles. Vous pouvez également utiliser la classe .list-inline Placer tous les éléments de liste sur une même ligne.

  • Liste de définition：Dans ce type de liste, chaque élément de liste peut contenir des éléments <dt> et <dd>。<dt> représente Définir le termecomme un dictionnaire. Ensuite, <dd> est la description de <dt>. .dl-horizontal peut faire en sorte que les phrases et les descriptions à l'intérieur de <dl> soient alignées en une ligne. Au début, elles sont empilées comme le style par défaut de <dl>, puis elles sont alignées en une ligne en s'étendant progressivement vers la barre de navigation.

Les exemples suivants montrent ces types de listes :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　Liste</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Liste ordonnée</h4>
<ol>
	<li>Élément　1</li>
	<li>Élément　2</li>
	<li>Élément　3</li>
	<li>Élément　4</li>
</ol>
<h4>Liste non ordonnée</h4>
<ul>
	<li>Élément　1</li>
	<li>Élément　2</li>
	<li>Élément　3</li>
	<li>Élément　4</li>
</ul>
<h4>Liste de style non défini</h4>
<ul　class="list-unstyled">
	<li>Élément　1</li>
	<li>Élément　2</li>
	<li>Élément　3</li>
	<li>Élément　4</li>
</ul>
<h4>Liste en ligne</h4>
<ul　class="list-inline">
	<li>Élément　1</li>
	<li>Élément　2</li>
	<li>Élément　3</li>
	<li>Élément　4</li>
</ul>
<h4>Liste de définition</h4>
<dl>
	<dt>Description　1</dt>
	<dd>Élément　1</dd>
	<dt>Description　2</dt>
	<dd>Élément　2</dd>
</dl>
<h4>Liste horizontale</h4>
<dl　class="dl-horizontal">
	　<dt>Description　1</dt>
	　<dd>Élément　1</dd>
	　<dt>Description　2</dt>
	　<dd>Élément　2</dd>
</dl>
</body>
</html>
Vérifiez le test ‹/›

Les résultats sont affichés comme suit :

Plus de classes de mise en page

Le tableau suivant fournit des exemples de plus de classes de mise en page Bootstrap :

ClasseDescriptionExemple
.leadMettre en surbrillance le paragrapheEssayer
.text-leftAligner le texte à gaucheEssayer
.text-rightAligner le texte à droiteEssayer
.text-nowrapLe texte en dehors de l'écran dans le paragraphe ne saute pas de ligneEssayer
.text-uppercaseDéfinir le texte en majusculesEssayer
.initialismLe texte affiché dans l'élément <abbr> est affiché en petite police et peut convertir les lettres minuscules en majusculesEssayer
.list-unstyledSupprimez les styles de liste par défaut, alignement à gauche des éléments de liste (dans <ul> et <ol>). Cette classe ne s'applique qu'aux éléments de liste fils directs 　 　(Si vous devez supprimer les éléments de liste imbriqués, vous devez utiliser ce style dans les listes imbriquées)Essayer
.dl-horizontalCette classe définit le flot et le décalage, appliquée aux éléments <dl> et <dt>, la mise en œuvre spécifique peut être consultée dans l'exempleEssayer
Code BootstrapSystème de grille Bootstrap