Typographie bootstrap
Bootstrap utilise Helvetica Neue, Helvetica, Arial et sans-serif comme pile de polices par défaut.
À l'aide des fonctionnalités de typographie de Bootstrap, vous pouvez créer des titres, des paragraphes, des listes et d'autres éléments en ligne.
Titre
Bootstrap définit les styles de tous les titres HTML (h1 à h6). Veuillez consulter l'exemple suivant :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标题</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3>我是标题3 h3</h3> <h4>我是标题4 h4</h4> <h5>我是标题5 h5</h5> <h6>我是标题6 h6</h6> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Sous-titre en ligne
Si vous devez ajouter un sous-titre en ligne à n'importe quel titre, ajoutez simplement <small> autour de l'élément, ou ajoutez . 🎜>, afin que vous puissiez obtenir une taille de police plus petite et un texte plus clair, comme le montre l'exemple suivant :
<!DOCTYPE html>
Instance<html> ;
< head>
<title>Exemple de Bootstrap - Sous-titre en ligne</title>
<link href="/bootstrap/css/bootstrap.min.css" rel=" stylesheet">
< script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"> ;</script>
</head>
<body>
<h1>Je suis titre 1 h1 <small>Je suis sous-titre 1 h1</small> ;h2>Je suis le titre 2 h2 <small>Je suis le sous-titre 2 h2</small></h2>
<h3>Je suis le titre 3 h3 <small>Je suis le sous-titre 3 h3< /small></h3>
<h4>Je suis le sous-titre 4 h4 <small>Je suis le sous-titre 4 h4</small></h4>
<h5>Je suis le titre 5. h5 <small>Je suis le sous-titre 5 h5</small></h5>
<h6>Je suis le titre 6 h6>Je suis le sous-titre 6 h6</small></h6>. ;
</body>
</html>
< head>
<title>Exemple de Bootstrap - Sous-titre en ligne</title>
<link href="/bootstrap/css/bootstrap.min.css" rel=" stylesheet">
< script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"> ;</script>
</head>
<body>
<h1>Je suis titre 1 h1 <small>Je suis sous-titre 1 h1</small> ;h2>Je suis le titre 2 h2 <small>Je suis le sous-titre 2 h2</small></h2>
<h3>Je suis le titre 3 h3 <small>Je suis le sous-titre 3 h3< /small></h3>
<h4>Je suis le sous-titre 4 h4 <small>Je suis le sous-titre 4 h4</small></h4>
<h5>Je suis le titre 5. h5 <small>Je suis le sous-titre 5 h5</small></h5>
<h6>Je suis le titre 6 h6>Je suis le sous-titre 6 h6</small></h6>. ;
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 内联子标题</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
</body>
</html>
Exécuter Instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour mettre du texte d'accentuation à un paragraphe, vous pouvez ajouter class="lead", ce qui entraînera un texte plus grand et plus gras avec une hauteur de ligne plus élevée, comme le montre l'exemple suivant :
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 引导主体副本</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <hr> <h2>引导主体副本</h2> <p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p> </body> </html>
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 引导主体副本</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>
</body>
</html>
< small> (définit le texte à 85 % de la taille du texte parent), <strong> (définit le texte en italique). Bootstrap fournit des classes pour mettre en valeur le texte, comme le montre l'exemple suivant :
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 强调</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p> </body> </html>Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 强调</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <small>本行内容是在标签内</small><br> <strong>本行内容是在标签内</strong><br> <em>本行内容是在 <em> 标签内，并呈现为斜体</em><br> <p class="text-left">向左对齐文本</p> <p class="text-center">居中对齐文本</p> <p class="text-right">向右对齐文本</p> <p class="text-muted">本行内容是减弱的</p> <p class="text-primary">本行内容带有一个 primary class</p> <p class="text-success">本行内容带有一个 success class</p> <p class="text-info">本行内容带有一个 info class</p> <p class="text-warning">本行内容带有一个 warning class</p> <p class="text-danger">本行内容带有一个 danger class</p> </body> </html>
Exécuter l'exemple »
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
AbréviationL'élément HTML
fournit un balisage pour l'abréviation, tel que WWW ou HTTP. Bootstrap définit le style de l'élément <abbr> comme une bordure en pointillés qui apparaît au bas du texte, le texte intégral apparaissant lorsque la souris passe dessus (à condition que vous ajoutiez du texte pour le titre <abbr> attribut). Pour obtenir une taille de police plus petite pour le texte, ajoutez .initialism à <abbr>.
fournit un balisage pour l'abréviation, tel que WWW ou HTTP. Bootstrap définit le style de l'élément <abbr> comme une bordure en pointillés qui apparaît au bas du texte, le texte intégral apparaissant lorsque la souris passe dessus (à condition que vous ajoutiez du texte pour le titre <abbr> attribut). Pour obtenir une taille de police plus petite pour le texte, ajoutez .initialism à <abbr>.
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/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>
Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Adresse À l'aide de la balise <adresse>, vous pouvez afficher les informations de contact sur une page Web. Puisque <address> affiche par défaut:block;, vous devez utiliser la balise
pour ajouter des sauts de ligne au texte de l'adresse ci-joint.
pour ajouter des sauts de ligne au texte de l'adresse ci-joint.
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 地址</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address> </body> </html>
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 地址</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <address> <strong>Some Company, Inc.</strong><br> 007 street<br> Some City, State XXXXX<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">mailto@somedomain.com</a> </address> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Blockquote
Vous pouvez utiliser le <blockquote> par défaut à côté de n'importe quel texte HTML. D'autres options incluent l'ajout d'une balise <small> pour identifier la source de la citation et l'utilisation de la classe .pull-right pour aligner la citation à droite. L'exemple suivant illustre ces fonctionnalités :
<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Quote< ;
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js" < /script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote><p>
Il s'agit d'une instance de devis par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. </p></blockquote>
<blockquote> Ceci est une citation avec un titre source. <small>Quelqu'un de célèbre dans <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">Ce est une référence alignée à droite. <small>Quelqu'un de célèbre dans <cite title="Source Title">Source Title</cite></small></blockquote>
</body>
< /html>
<html>
<head>
<title>Exemple de bootstrap - Quote< ;
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js" < /script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<blockquote><p>
Il s'agit d'une instance de devis par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. Il s'agit d'une instance de référence par défaut. </p></blockquote>
<blockquote> Ceci est une citation avec un titre source. <small>Quelqu'un de célèbre dans <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">Ce est une référence alignée à droite. <small>Quelqu'un de célèbre dans <cite title="Source Title">Source Title</cite></small></blockquote>
</body>
< /html>
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 引用</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <blockquote><p> 这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote> <blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote> <blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote> </body> </html>
Exécuter l'instance»
Cliquez sur « Exécuter Bouton "Exemple" pour visualiser des exemples en ligne
Liste
Bootstrap prend en charge les listes ordonnées, les listes non ordonnées et les listes définies.
Liste ordonnée : Une liste ordonnée est une liste qui commence par un nombre ou un autre caractère ordonné.
Liste non ordonnée : Une liste non ordonnée fait référence à une liste sans ordre spécifique et est une liste commençant par une emphase traditionnelle. Si vous ne souhaitez pas que ces marques d'accentuation soient affichées, vous pouvez utiliser la classe .list-unstyled pour supprimer les styles. Vous pouvez également placer tous les éléments de la liste sur la même ligne en utilisant la classe .list-inline.
Définir une liste : Dans ce type de liste, chaque élément de liste peut contenir des éléments <dt> <dt> signifie pour définir le terme , comme un dictionnaire, auquel (ou expression) il est défini. Ensuite, <dd> est la description de <dt>. Vous pouvez utiliser la classe dl-horizontal pour afficher l'attribut et la description côte à côte dans la ligne <dl>
L'exemple suivant illustre ces types de listes :
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 列表</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>无序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定义样式列表</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>内联列表</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定义列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> </body> </html>
Exemple
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 列表</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>无序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定义样式列表</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>内联列表</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定义列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> </body> </html>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Plus de classes de typographie
Le tableau suivant fournit des exemples de plus de classes de typographie Bootstrap :
| 类 | 描述 | 实例 |
|---|---|---|
| .lead | 使段落突出显示 | 尝试一下 |
| .small | 设定小文本 (设置为父文本的 85% 大小) | 尝试一下 |
| .text-left | 设定文本左对齐 | 尝试一下 |
| .text-center | 设定文本居中对齐 | 尝试一下 |
| .text-right | 设定文本右对齐 | 尝试一下 |
| .text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 | 尝试一下 |
| .text-nowrap | 段落中超出屏幕部分不换行 | 尝试一下 |
| .text-lowercase | 设定文本小写 | 尝试一下 |
| .text-uppercase | 设定文本大写 | 尝试一下 |
| .text-capitalize | 设定单词首字母大写 | 尝试一下 |
| .initialism | 显示在 <abbr> 元素中的文本以小号字体展示 | 尝试一下 |
| .blockquote-reverse | 设定引用右对齐 | 尝试一下 |
| .list-unstyled | 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式) | 尝试一下 |
| .list-inline | 将所有列表项放置同一行 | 尝试一下 |
| .dl-horizontal | 该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例 | 尝试一下 |
| .pre-scrollable | 使 <pre> 元素可滚动 scrollable | 尝试一下 |
