Bootstrap 4 提供了丰富的 文字排版（Typography） 类，用于快速定义文字样式。无论是标题、段落、对齐方式还是字体样式，Bootstrap 都能满足大多数需求。以下是 Bootstrap 4 文字排版的详细指南：
1. 标题（Headings）
Bootstrap 提供了从 <h1> 到 <h6> 的标题样式，你也可以通过类名设置这些标题。
示例：
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
自定义标题样式：
如果你想使用非 <h1> 到 <h6> 的标签，但需要同样的标题样式，可以添加相应的类名：
<p class="h1">This is styled as h1</p>
<p class="h2">This is styled as h2</p>
2. 文本段落
普通文本可以直接使用 HTML 的 <p> 标签。Bootstrap 4 为段落提供了一些默认样式，如 行高 和 文字间距。
示例：
<p>This is a paragraph. Bootstrap provides default styling for paragraphs with proper line height and spacing.</p>
3. 文本颜色
Bootstrap 提供了多种文本颜色类，可以快速设置文字颜色。
常用颜色类：
text-primary：主要文本（蓝色）text-secondary：次要文本（灰色）text-success：成功（绿色）text-danger：危险（红色）text-warning：警告（黄色）text-info：信息（青色）text-light：浅色（白色背景适合搭配）text-dark：深色text-muted：淡化文本text-white：白色文本
示例：
<p class="text-primary">This text is primary (blue).</p>
<p class="text-success">This text indicates success (green).</p>
<p class="text-danger">This text represents danger (red).</p>
<p class="text-muted">This text is muted.</p>
<p class="text-white bg-dark">This text is white on a dark background.</p>
4. 文本对齐
使用对齐类可以快速调整文本的对齐方式。
类名：
text-left：左对齐（默认）text-center：居中对齐text-right：右对齐text-justify：两端对齐text-nowrap：不换行text-wrap：自动换行text-lowercase：小写text-uppercase：大写text-capitalize：首字母大写
示例：
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text looks like this. It stretches text so that both sides are aligned.</p>
<p class="text-nowrap">This text will not wrap to the next line.</p>
5. 显示和隐藏文本（隐藏、裁剪）
- 隐藏文字：使用
d-none类隐藏文本。 - 省略超长文字：通过
text-truncate实现超长文字显示省略号（需配合父级的d-flex或d-inline-block）。
示例：
<div class="d-inline-block text-truncate" style="max-width: 200px;">
This is a very long text that will be truncated if it exceeds the container's width.
</div>
6. 字体样式
Bootstrap 提供了一些简单的类来快速调整字体样式。
类名：
font-weight-bold：加粗字体font-weight-normal：普通字体font-weight-light：细字体font-italic：斜体
示例：
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-light">Lightweight text.</p>
<p class="font-italic">Italic text.</p>
7. 文本样式辅助类
Bootstrap 提供了一些简单的辅助类来调整文字样式。
类名：
small：使文字更小mark：高亮文字blockquote：块引用blockquote-footer：引用来源lead：加大段落文字（适合作为简介）
示例：
<p class="lead">This is a lead paragraph. It stands out.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p><small>This text is smaller.</small></p>
<blockquote class="blockquote">
<p class="mb-0">This is a blockquote.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
8. 代码和键盘文本
- 内联代码：使用
<code>标签或.text-monospace类。 - 键盘文本：使用
<kbd>标签。 - 预格式化文本：使用
<pre>标签。
示例：
<p>To write inline code, use <code>code</code> tags.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<pre>
This is preformatted text.
It preserves both spaces and line breaks.
</pre>
9. 响应式文本显示
Bootstrap 4 提供了根据屏幕尺寸显示/隐藏文本的类。
示例：
<p class="d-none d-sm-block">This text is hidden on extra small screens but visible on small screens and larger.</p>
<p class="d-sm-none">This text is only visible on extra small screens.</p>
10. 列表样式
Bootstrap 提供了三种常见的列表样式：
- 无序列表
- 有序列表
- 无样式列表
示例：
<!-- 默认列表 -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- 内联列表 -->
<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>
<!-- 无样式列表 -->
<ul class="list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
</ul>
总结
Bootstrap 4 的文字排版功能简单而强大，它通过内置的类帮助我们快速调整文字样式、颜色、对齐、大小和间距等。如果你需要对文字进行更高级的定制，也可以结合 CSS 自定义样式。
如果需要详细的示例代码或有其他疑问，可以随时告诉我！
发表回复