Bootstrap 4文字排版 - 响应式文本格式指南

最后编辑于2025-04-14 13:43:40.4177151 +0800 CST

Bootstrap 4 文字排版 ¶

Bootstrap 4 提供了丰富的排版工具和样式，帮助开发者快速设计美观、一致和响应式的文本内容。本章将详细介绍Bootstrap 4中的文本排版功能。

Bootstrap 4 默认文本设置 ¶

Bootstrap 4 为HTML文档设置了基本的排版样式，包括：

基础字体大小：16px (font-size: 1rem)
默认行高：1.5 (line-height: 1.5)
默认字体族："Helvetica Neue", Helvetica, Arial, sans-serif
段落边距：顶部边距为0，底部边距为1rem (16px)

这些默认设置可以在Bootstrap的Reboot CSS文件中找到，该文件基于Normalize.css，提供了跨浏览器一致性的基础。

响应式字体大小

Bootstrap 4使用rem单位定义大多数尺寸，这使得文本大小能够根据用户的浏览器设置自动调整。

标题元素 (h1-h6) ¶

Bootstrap定义了所有HTML标题（h1到h6）的样式，每个级别的标题都有特定的大小和样式。

<h1>h1 Bootstrap 标题 (2.5rem = 40px)</h1>
<h2>h2 Bootstrap 标题 (2rem = 32px)</h2>
<h3>h3 Bootstrap 标题 (1.75rem = 28px)</h3>
<h4>h4 Bootstrap 标题 (1.5rem = 24px)</h4>
<h5>h5 Bootstrap 标题 (1.25rem = 20px)</h5>
<h6>h6 Bootstrap 标题 (1rem = 16px)</h6>

h1 Bootstrap 标题 (2.5rem = 40px)

h2 Bootstrap 标题 (2rem = 32px)

h3 Bootstrap 标题 (1.75rem = 28px)

h4 Bootstrap 标题 (1.5rem = 24px)

h5 Bootstrap 标题 (1.25rem = 20px)

h6 Bootstrap 标题 (1rem = 16px)

.h1 到 .h6 类 ¶

如果你想使用标题样式但不想改变HTML的语义结构，Bootstrap提供了等效的标题类：.h1到.h6。

<p class="h1">使用h1样式的段落文本</p>
<p class="h2">使用h2样式的段落文本</p>
<p class="h3">使用h3样式的段落文本</p>

使用h1样式的段落文本

使用h2样式的段落文本

使用h3样式的段落文本

Display 标题类 ¶

当标准标题样式不够吸引人时，Bootstrap 4提供了更大更醒目的"Display"标题样式：.display-1到.display-4。

<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>

Display 1

Display 2

Display 3

Display 4

Display标题特别适合用于:

页面英雄区域(Hero sections)
登陆页面
重要的标题内容

辅助文本 `<small>` ¶

HTML <small> 元素或 .small 类用于创建字号更小的次要文本，通常用于标题的副标题或辅助说明。

<h1>主标题 <small>副标题</small></h1>
<h2>主标题 <small>副标题</small></h2>
<h3>主标题 <small>副标题</small></h3>

主标题副标题

文本高亮 `<mark>` ¶

使用 HTML <mark> 元素可以高亮显示文本，Bootstrap为其添加了黄色背景和适当的内边距。

<p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
<p>这个是<mark>非常重要的</mark>信息。</p>

使用 mark 元素来高亮文本。

这个是非常重要的信息。

缩写文本 `<abbr>` ¶

HTML <abbr> 元素用于标记缩写词或首字母缩略词，Bootstrap对其添加了一条虚线下划线，鼠标悬停时会显示完整的描述。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> 是网页的标准标记语言。</p>

The WHO was founded in 1948.

HTML 是网页的标准标记语言。

添加 .initialism 类可以将文本显示得更小，并转换为大写字母。

引用块 `<blockquote>` ¶

用于展示来自其他来源的内容引用。在 <blockquote> 元素上添加 .blockquote 类可以美化引用样式。

<blockquote class="blockquote">
  <p>设计是一种思想，一种解决问题的方法，而不仅仅是一种视觉表现。</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

设计是一种思想，一种解决问题的方法，而不仅仅是一种视觉表现。

Someone famous in Source Title

引用对齐 ¶

可以使用文本对齐工具类来改变引用的对齐方式：

<blockquote class="blockquote text-center">
  <p>居中对齐的引用块。</p>
  <footer class="blockquote-footer">引用来源</footer>
</blockquote>
<blockquote class=“blockquote text-right”>
<p>右对齐的引用块。</p>
<footer class=“blockquote-footer”>引用来源</footer>
</blockquote>

居中对齐的引用块。

引用来源

右对齐的引用块。

引用来源

描述列表 `<dl>` ¶

描述列表(Description List)由术语及其对应描述组成，Bootstrap为其提供了基本样式：

<dl>
  <dt>Bootstrap</dt>
  <dd>- 流行的前端开发框架</dd>
  <dt>HTML</dt>
  <dd>- 网页标记语言</dd>
  <dt>CSS</dt>
  <dd>- 层叠样式表</dd>
</dl>

Bootstrap: - 流行的前端开发框架
HTML: - 网页标记语言
CSS: - 层叠样式表

水平描述列表 ¶

添加 .row 和列类可以创建水平对齐的描述列表：

<dl class="row">
  <dt class="col-sm-3">Bootstrap</dt>
  <dd class="col-sm-9">流行的前端开发框架</dd>
  <dt class="col-sm-3">HTML</dt>
  <dd class="col-sm-9">网页标记语言</dd>
</dl>

Bootstrap: 流行的前端开发框架
HTML: 网页标记语言

代码元素 ¶

Bootstrap为代码相关的HTML元素提供了基本样式。

内联代码 `<code>` ¶

用于表示内联代码片段：

<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>

以下 HTML 元素: span, section, 和 div 用于定义部分文档内容。

键盘输入 `<kbd>` ¶

用于表示用户通过键盘输入的内容：

<p>使用 <kbd>ctrl + p</kbd> 打开打印对话框。</p>
<p>保存文件请按 <kbd>ctrl + s</kbd>。</p>

使用 ctrl + p 打开打印对话框。

保存文件请按 ctrl + s。

代码块 `<pre>` ¶

对于多行代码，使用 <pre> 元素，它会保留空格和换行：

<pre>
<code>
// 这是一个代码示例
function example() {
  console.log("Hello, Bootstrap!");
}
</code>
</pre>


// 这是一个代码示例
function example() {
  console.log("Hello, Bootstrap!");
}

文本工具类 ¶

Bootstrap 4提供了多种文本格式化工具类，可以快速应用常见的文本样式。

文本对齐 ¶

控制文本的水平对齐：

<p class="text-left">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-right">右对齐文本。</p>
<p class="text-justify">两端对齐文本。这种对齐方式会自动调整字间距，使各行的长度相等。这种对齐方式会自动调整字间距，使各行的长度相等。</p>

左对齐文本。

居中对齐文本。

右对齐文本。

两端对齐文本。这种对齐方式会自动调整字间距，使各行的长度相等。这种对齐方式会自动调整字间距，使各行的长度相等。

文本转换 ¶

控制文本的大小写：

<p class="text-lowercase">转换为小写文本。</p>
<p class="text-uppercase">转换为大写文本。</p>
<p class="text-capitalize">每个单词首字母大写。</p>

转换为小写文本。TEXT TO LOWERCASE.

转换为大写文本。text to uppercase.

每个单词首字母大写。text capitalize each word.

字体粗细和斜体 ¶

控制文本的粗细和样式：

<p class="font-weight-bold">粗体文本。</p>
<p class="font-weight-normal">常规文本。</p>
<p class="font-weight-light">细体文本。</p>
<p class="font-italic">斜体文本。</p>

粗体文本。

常规文本。

细体文本。

斜体文本。

文本截断 ¶

使用 .text-truncate 可以将文本截断并显示省略号。需要设置 display: inline-block 或 display: block：

<!-- 块级元素 -->
<div class="text-truncate" style="max-width: 150px;">
  这是一段很长的文本，将被截断并显示省略号。
</div>
<!– 内联元素 –>
<span class=“d-inline-block text-truncate” style=“max-width: 150px;">
这是一段很长的文本，将被截断并显示省略号。
</span>

这是一段很长的文本，将被截断并显示省略号。

列表样式 ¶

Bootstrap提供了多种列表格式化类。

无样式列表 ¶

使用 .list-unstyled 移除默认的列表样式（项目符号和左边距）：

<ul class="list-unstyled">
  <li>无样式列表项</li>
  <li>无样式列表项</li>
  <li>无样式列表项
    <ul>
      <li>嵌套列表项</li>
      <li>嵌套列表项</li>
    </ul>
  </li>
</ul>

无样式列表项
无样式列表项
无样式列表项
- 嵌套列表项
- 嵌套列表项

内联列表 ¶

使用 .list-inline 和 .list-inline-item 将列表项显示在同一行：

<ul class="list-inline">
  <li class="list-inline-item">内联列表项</li>
  <li class="list-inline-item">内联列表项</li>
  <li class="list-inline-item">内联列表项</li>
</ul>

内联列表项
内联列表项
内联列表项

响应式文本 ¶

Bootstrap 4提供了响应式文本对齐类，可以在不同屏幕尺寸下改变文本对齐方式：

<p class="text-sm-left">小屏幕及以上左对齐</p>
<p class="text-md-center">中等屏幕及以上居中对齐</p>
<p class="text-lg-right">大屏幕及以上右对齐</p>
<p class="text-xl-right">超大屏幕右对齐</p>

小屏幕及以上左对齐

中等屏幕及以上居中对齐

大屏幕及以上右对齐

超大屏幕右对齐

排版工具类一览表 ¶

下表提供了Bootstrap 4中所有排版相关工具类的简要说明：

类名	描述
`.h1` 到 `.h6`	应用对应标题样式的类
`.display-1` 到 `.display-4`	更大、更醒目的标题样式
`.lead`	让段落更突出（增大字体、行高和字重）
`.small`	缩小文本（为父元素的85%）
`.text-left`	文本左对齐
`.text-center`	文本居中对齐
`.text-right`	文本右对齐
`.text-justify`	文本两端对齐
`.text-*-left/center/right`	响应式文本对齐（*可为sm、md、lg、xl）
`.text-lowercase`	文本转为小写
`.text-uppercase`	文本转为大写
`.text-capitalize`	每个单词首字母大写
`.font-weight-bold`	文本加粗
`.font-weight-normal`	文本正常粗细
`.font-weight-light`	文本变细
`.font-italic`	文本斜体
`.text-truncate`	截断溢出文本并添加省略号
`.list-unstyled`	移除列表的默认样式
`.list-inline` 与 `.list-inline-item`	创建内联列表
`.pre-scrollable`	使<pre>元素可滚动（最大高度340px）
`.blockquote`	引用块样式
`.blockquote-footer`	引用块的注脚样式
`.initialism`	应用于<abbr>，显示为小号大写字母

最佳实践 ¶

以下是在Bootstrap 4中使用排版功能的一些最佳实践：

保持一致性：整个网站使用一致的标题层级和文本样式
避免过多风格：限制页面上使用的字体粗细和样式变化
考虑响应性：测试不同屏幕尺寸上的文本如何显示
注意可访问性：确保文本颜色对比度足够，字体大小适当
利用工具类：使用Bootstrap提供的工具类，避免编写自定义CSS

注意

虽然Bootstrap提供了丰富的排版类，应避免在一个页面中使用过多不同的样式，这可能导致视觉混乱和不一致的用户体验。

Bootstrap 4网格系统 - 响应式布局设计指南 Bootstrap 4 颜色系统 - 文本与背景色彩指南

Bootstrap 4文字排版 - 响应式文本格式指南

Bootstrap 4 文字排版 ¶

Bootstrap 4 默认文本设置 ¶

响应式字体大小

标题元素 (h1-h6) ¶

h1 Bootstrap 标题 (2.5rem = 40px)

h2 Bootstrap 标题 (2rem = 32px)

h3 Bootstrap 标题 (1.75rem = 28px)

h4 Bootstrap 标题 (1.5rem = 24px)

h5 Bootstrap 标题 (1.25rem = 20px)

h6 Bootstrap 标题 (1rem = 16px)

.h1 到 .h6 类 ¶

Display 标题类 ¶

Display 1

Display 2

Display 3

Display 4

辅助文本 <small> ¶

主标题 副标题

主标题 副标题

主标题 副标题

文本高亮 <mark> ¶

缩写文本 <abbr> ¶

引用块 <blockquote> ¶

引用对齐 ¶

描述列表 <dl> ¶

水平描述列表 ¶

代码元素 ¶

内联代码 <code> ¶

键盘输入 <kbd> ¶

代码块 <pre> ¶

文本工具类 ¶

文本对齐 ¶

文本转换 ¶

字体粗细和斜体 ¶

文本截断 ¶

列表样式 ¶

无样式列表 ¶

内联列表 ¶

响应式文本 ¶

排版工具类一览表 ¶

最佳实践 ¶

注意

编程修炼指南

辅助文本 `<small>` ¶

主标题副标题

主标题副标题

主标题副标题

文本高亮 `<mark>` ¶

缩写文本 `<abbr>` ¶

引用块 `<blockquote>` ¶

描述列表 `<dl>` ¶

内联代码 `<code>` ¶

键盘输入 `<kbd>` ¶

代码块 `<pre>` ¶