Bootstrap - 排版

欢迎，未来的网页开发者们！今天，我们将深入了解Bootstrap排版的奇妙世界。作为你友好邻里的计算机老师，我将在这一旅程中用大量的示例、解释，或许还有一两个父亲的笑话来引导你。那么，让我们开始吧！

Bootstrap - Typography

Bootstrap 默认/全局设置

Bootstrap带有一些默认的排版设置，可以让你的文本在开箱即用时就看起来很棒。这就像是为你的网站配备了一个私人造型师！

以下是一个Bootstrap如何设置文本的基本示例：

<p>这是一个由Bootstrap排版的段落。</p>

你可能会想：“这看起来和普通文本没什么区别！”你说得对！但是Bootstrap做了一些微妙的改进。它设置了一个默认的字体家族（通常是无需衬线的字体）、一个舒适的字体大小和一个宜人的行高。正是这些小细节让Bootstrap变得如此强大。

Bootstrap中的标题就像你最喜欢咖啡馆里不同大小的咖啡——它们有六种风味，从h1到h6。

<h1>这是一个标题1</h1>
<h2>这是一个标题2</h2>
<h3>这是一个标题3</h3>
<h4>这是一个标题4</h4>
<h5>这是一个标题5</h5>
<h6>这是一个标题6</h6>

每个标题都有它自己的大小和重量，为你的内容创建了一个清晰的层次结构。这就像整理你的衣橱——每样东西都有它的位置！

但是，如果你想要使用标题样式而不实际使用标题标签呢？Bootstrap为你提供了.h1到.h6的类。

<p class="h1">这个段落看起来像标题1</p>
<span class="h3">这个跨度看起来像标题3</span>

当你在没有语义意义的情况下想要标题的外观时，这非常好。这就好比穿着燕尾服T恤——正式，但不是太正式。

当常规标题不够用时，Bootstrap提供了“显示”标题。这些就像是标题的超级模特——大、粗、吸引眼球。

<h1 class="display-1">显示1</h1>
<h1 class="display-2">显示2</h1>
<h1 class="display-3">显示3</h1>
<h1 class="display-4">显示4</h1>

这些显示标题非常适合你需要发表重大声明的时候。但要明智地使用它们——太多可能会导致你的页面开始大喊大叫！

.lead类是Bootstrap让段落突出的方式。这就好比给你的文本一个扩音器。

<p class="lead">这是一个引导段落。它从普通段落中脱颖而出。</p>

使用这个来介绍文本或你想突出的重要信息。

Bootstrap为缩写和首字母缩略词设置了带有虚线的下划线。这就好比给你的读者一个秘密解码器！

<p>世界卫生组织（<abbr title="World Health Organization">WHO</abbr>）成立于1948年。</p>

将鼠标悬停在缩写上，你将看到完整的术语出现。

Bootstrap中的引用设置为从其余文本中突出出来。它们就像是段落世界中的酷孩子们。

<blockquote class="blockquote">
<p>有两种东西是无限的：宇宙和人类的愚蠢；而对于宇宙，我不确定。</p>
</blockquote>

你可以使用带有blockquote-footer类的<footer>标签为你的引用添加一个来源。

<blockquote class="blockquote">
<p>有两种东西是无限的：宇宙和人类的愚蠢；而对于宇宙，我不确定。</p>
<footer class="blockquote-footer">阿尔伯特·爱因斯坦</footer>
</blockquote>

这就像是在给予应得的荣誉，但带有风格！

Bootstrap允许你轻松地对齐文本。这就好比教你的文本跳舞——左、中、右！

<p class="text-left">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-right">右对齐文本。</p>

Bootstrap为各种内联文本元素提供了样式。这就像是一个瑞士军刀对你的文本！

以下是一个常用内联文本元素的表格：

示例：


<p>你可以使用这些元素来<mark>高亮</mark>、<del>删除</del>、<s>删除线</s>

Credits: Image by storyset