学习 Bootstrap 5 之 Typography

Posted 2022-02-06 _DiMinisH

学习 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)
  • 5. 引用 (Blockquotes)
  • 6. 资源命名 (Naming a source)
  • 7. 列表 (Lists)
  • • (1). 无样式 class = "list-unstyled"
    • (2). 内联样式
    • (3). 省略文本 class="text-truncate"

排版 (Typography)

Bootstrap 5 官方文档

1. 标题 (Headings)

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

<h1> ~ <h6>

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

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

.h1
.h2
.h3
.h4
.h5
.h6

使用以上类, 可以让标签中的文本获得<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”

.text-muted

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

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

.display-1
.display-2
.display-3
.display-4
.display-5
.display-6

<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系列类的参数

类	字体大小	字体粗细
.display-1	5 rem	300
.display-2	4.5 rem	300
.display-3	4 rem	300
.display-4	3.5 rem	300
.display-5	3 rem	300
.display-6	2.5 rem	300

2. 段落突出 (Lead)

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

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

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

原生标签	效果
<mark>	突显文本 (背景变色)
<del>	删除线
<s>	删除线
<u>	下划线
<ins>	下划线
<small>	小字文本
<strong>	加粗
<em>	斜体

  <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 的提供的内联文本标签类

原生标签	提供的类	效果
<mark>	.mark	突显文本 (背景变色)
<small>	.small	小字文本
<u>	.text-decoration-underline	下划线
<s>	.text-decoration-line-through	删除线

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

原生标签	提供的类	效果
<mark>	.mark	突显文本 (背景变色)
<del>		删除线
<s>	.text-decoration-line-through	删除线
<u>	.text-decoration-underline	下划线
<ins>		下划线
<small>	.small	小字文本
<strong>		加粗
<em>		斜体

4. 缩写 (Abbreviations)

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

正常大小

<addr title = “提示的内容”>

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

<addr title = “提示的内容” class = “initialism‎”>

正常大小 无initialism类的内容 有initialism的内容

正常大小 内容 内容

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

5. 引用 (Blockquotes)

  用于在文档中引用来自其他来资源的内容块

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

6. 资源命名 (Naming a source)

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

7. 列表 (Lists)

(1). 无样式 class = “list-unstyled”

  <div style = "width:150px; height: 300px;">
    <h5>原列表</h5>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <br />
    <h5>Bootstrap</h5>
    <ul class = "list-unstyled">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>

(2). 内联样式

ul使用: list-inline
li使用: list-inline-item

  <ul class="list-inline">
    <li class="list-inline-item">This is a list item.</li>
    <li class="list-inline-item">And another one.</li>
    <li class="list-inline-item">But they're displayed inline.</li>
  </ul>

(3). 省略文本 class=“text-truncate”

当文本在列中显示不下时, 默认是换行, 如果设置了省略, 则多余的文本会省略

  <div class="container">
    <div class="row" style = "border:3px solid black">
      <div class="col col-1 text-truncate" style = "border:1px solid red">这里文本很长 x x x x x x x</div>
      <div class="col col-1" style = "border:1px solid red">这里文本很长 x x x x x x x</div>
    </div>
  </div>