在本教程中，我们将学习Bootstrap中的排版。

Body

Bootstrap的全局默认字体大小为14px，行高为1.428。

这适用于" body"和所有段落。
此外，段落的底边距为计算出的行高的一半，即默认为10px。

在下面的示例中，我们有一个示例段落。

<p>The quick brown fox jumps over the lazy dog</p>

标题

要创建标题，我们可以使用从" h1"到" h6"的所有标题标签。

在以下示例中，我们具有不同的标题标签。

<h1>Heading h1 - semibold 36px</h1>
<h2>Heading h2 - semibold 30px</h2>
<h3>Heading h3 - semibold 24px</h3>
<h4>Heading h4 - semibold 18px</h4>
<h5>Heading h5 - semibold 14px</h5>
<h6>Heading h6 - semibold 12px</h6>

副标题较浅的标题

为了在Bootstrap中创建较浅的辅助文本，我们使用small标签。

在下面的示例中，我们有标题和辅助文本。

<h1>Heading h1 - <small>secondary text</small></h1>
<h2>Heading h2 - <small>secondary text</small></h2>
<h3>Heading h3 - <small>secondary text</small></h3>
<h4>Heading h4 - <small>secondary text</small></h4>
<h5>Heading h5 - <small>secondary text</small></h5>
<h6>Heading h6 - <small>secondary text</small></h6>

领导班

为了使段落突出，我们使用lead类。

<p class="lead">The quick brown fox jumps over the lazy dog</p>

内联文字元素

标记文字

我们使用"标记"标记来突出显示文本。

<p>The quick brown <mark>fox</mark> jumps over the lazy dog</p>

删除文字

我们使用del标签突出显示一段已删除的文本。

<p>The quick brown <del>fox</del> jumps over the lazy dog</p>

删除线文字

我们使用s标签来突出显示不再相关的文本。

<p>The quick brown <s>fox</s> jumps over the lazy dog</p>

其他一些标签

<p>The quick brown <ins>fox</ins> jumps over the lazy dog</p>

<p>The quick brown <u>fox</u> jumps over the lazy dog</p>

<p>The quick brown <small>fox</small> jumps over the lazy dog</p>

<p>The quick brown <strong>fox</strong> jumps over the lazy dog</p>

<p>The quick brown <em>fox</em> jumps over the lazy dog</p>

对准

为了使文本居中对齐，我们使用.text-center类。

为了使文本在左侧对齐，我们使用.text-left类。

为了使文本在右侧对齐，我们使用.text-right类。

为了证明文本合理，我们使用了.text-justify类。

如果我们不想包装文本，则使用.text-nowrap类。

<p class="text-center">The quick brown fox jumps over the lazy dog</p>
<p class="text-left">The quick brown fox jumps over the lazy dog</p>
<p class="text-right">The quick brown fox jumps over the lazy dog</p>
<p class="text-justify">The quick brown fox jumps over the lazy dog</p>
<p class="text-nowrap">The quick brown fox jumps over the lazy dog</p>

转变

要将文本转换为小写，我们使用.text-lowercase类。

要将文本转换为大写，我们使用.text-uppercase类。

要将文本转换为大写，我们使用.text-capitalize类。

<p class="text-lowercase">The quick brown fox jumps over the lazy dog</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog</p>

无序列表

我们使用ul标签创建无序列表，并使用li标签添加列表项。

<ul>
  <li>Apple</il>
  <li>Mango</il>
  <li>Orange</il>
</ul>

有序列表

我们使用ol标签创建有序列表。

<ol>
  <li>Apple</il>
  <li>Mango</il>
  <li>Orange</il>
</ol>

代码

为了突出显示代码片段，我们使用code标签。

<code>var name = "Yusuf Shakeel";</code>

键盘输入

为了突出显示键盘输入，我们使用kbd标签。

<kbd>Ctrl + A</kbd>

变量

为了突出显示变量，我们使用var标签。

<var>y</var> = <var>x</var> + 10