Bootstrap4 文字排版学习笔记

Bootstrap4 提供了许多用于文本排版的类，从简单到复杂的样式都有所涉及。下面是一些常见的用法和示例。

字体大小

使用 .h1 到 .h6 类可以设置标题的字体大小。例如：

htmlCopy Code
<h1 class="h1">这是h1标题</h1>
<h2 class="h2">这是h2标题</h2>
<h3 class="h3">这是h3标题</h3>
<h4 class="h4">这是h4标题</h4>
<h5 class="h5">这是h5标题</h5>
<h6 class="h6">这是h6标题</h6>

字体加粗

使用 .font-weight-bold 类可以设置文本的加粗样式。例如：

htmlCopy Code
<p class="font-weight-bold">这是加粗的文本</p>

斜体

使用 .font-italic 类可以设置文本的斜体样式。例如：

htmlCopy Code
<p class="font-italic">这是斜体的文本</p>

粗斜体

使用 .font-weight-bold.font-italic 类可以设置文本的粗斜体样式。例如：

htmlCopy Code
<p class="font-weight-bold font-italic">这是粗斜体的文本</p>

下划线

使用 .text-decoration-underline 类可以给文本添加下划线。例如：

htmlCopy Code
<p class="text-decoration-underline">这是带下划线的文本</p>

删除线

使用 .text-decoration-line-through 类可以给文本添加删除线。例如：

htmlCopy Code
<p class="text-decoration-line-through">这是带删除线的文本</p>

文本颜色

使用 .text-primary、.text-secondary、.text-success、.text-danger、.text-warning、.text-info 和 .text-light、.text-dark、.text-white 类可以设置文本的颜色。例如：

htmlCopy Code
<p class="text-primary">这是蓝色的文本</p>
<p class="text-danger">这是红色的文本</p>
<p class="text-success">这是绿色的文本</p>
<p class="text-warning">这是黄色的文本</p>
<p class="text-info">这是浅蓝色的文本</p>
<p class="text-white bg-dark">这是白色的文本，背景为黑色</p>

对齐方式

使用 .text-left、.text-center 和 .text-right 类可以设置文本的对齐方式。例如：

htmlCopy Code
<p class="text-left">这是左对齐的文本</p>
<p class="text-center">这是居中对齐的文本</p>
<p class="text-right">这是右对齐的文本</p>

以上是 Bootstrap4 文字排版的一些常见方法和示例。可以根据自己的需求进行灵活运用。