学习 Bootstrap 5 之 排版

• 排版 (Typography)
• • 1. 标题 (Headings)
  • • (1). 使用原生的标题标签
    • (2). 使用Bootstrap 5 的提供的标题标签类
    • (3). 使用Bootstrap提供的副标题类 class = "text-muted"
    • (4). 使用Bootstrap 5 的提供的更大的标题标签类
    • • disply系列类与h系列标签比较
      • display系列类的参数
  • 2. 段落突出 (Lead)
  • 3. 内联文本元素 (Inline Text Elements)
  • • (1). 使用原生的内联文本标签
    • (2). 使用Bootstrap 5 的提供的内联文本标签类
    • (3). 内联文本标签表格
  • 4. 缩写 (Abbreviations)

排版 (Typography)

Bootstrap 5 官方文档

1. 标题 (Headings)

(1). 使用原生的标题标签

  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>

(2). 使用Bootstrap 5 的提供的标题标签类

使用以上类, 可以让标签中的文本获得<h>标签的样式

  <p class="h1">h1. Bootstrap heading</p>
  <p class="h2">h2. Bootstrap heading</p>
  <p class="h3">h3. Bootstrap heading</p>
  <p class="h4">h4. Bootstrap heading</p>
  <p class="h5">h5. Bootstrap heading</p>
  <p class="h6">h6. Bootstrap heading</p>
  <div class="h1">h1. Bootstrap heading</div>
  <div class="h2">h2. Bootstrap heading</div>
  <div class="h3">h3. Bootstrap heading</div>
  <div class="h4">h4. Bootstrap heading</div>
  <div class="h5">h5. Bootstrap heading</div>
  <div class="h6">h6. Bootstrap heading</div>

(3). 使用Bootstrap提供的副标题类 class = “text-muted”

<h3>
  主标题
  <small class="text-muted">副标题</small>
</h3>

(4). 使用Bootstrap 5 的提供的更大的标题标签类

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

disply系列类与h系列标签比较

  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>

display系列类的参数

2. 段落突出 (Lead)

  <p>
    普通段落
  </p>
  <p class = "lead">
    段落突出
  </p>

3. 内联文本元素 (Inline Text Elements)

(1). 使用原生的内联文本标签

  <p>使用mark标签<mark>突显</mark>文本</p>
  <p>使用del标签<del>删除线</del></p>
  <p>使用s标签<s>删除线</s></p>
  <p>使用ins标签<ins>下划线</ins></p>
  <p>使用u标签<u>下划线</u></p>
  <p>使用small标签<small>小字</small></p>
  <p>使用strong标签<strong>加粗</strong></p>
  <p>使用em标签<em>斜体</em></p>

(2). 使用Bootstrap 5 的提供的内联文本标签类

(3). 内联文本标签表格

4. 缩写 (Abbreviations)

  缩写是用于在鼠标悬停时, 出现一些提示信息。缩写有一个默认的下划线，并获得一个帮助光标，以便在悬停时为辅助技术的用户提供额外的内容。

正常大小

使用 .initialism, 可以让文本‎稍微小一点

<p>正常大小 <abbr title="提示内容">无initialism类的内容</abbr> <abbr title="提示内容" class="initialism">有initialism的内容</abbr></p>
<p>正常大小 <abbr title="提示内容">内容</abbr> <abbr title="提示内容" class="initialism">内容</abbr></p>