Bootstrap5 文字排版学习笔记

1. 字体和颜色

Bootstrap5 提供了一些字体和颜色的类，可以方便地应用到页面元素中。

1.1 字体类

Bootstrap5 提供了以下字体类：

• fw-light：轻字体
• fw-normal：常规字体
• fw-bold：粗字体
• fw-bolder：更加粗的字体

这些类可以通过添加 .fw-xx 的方式应用到文本元素中，例如：

htmlCopy Code
<p class="fw-bold">这是粗体文本</p>

1.2 颜色类

Bootstrap5 提供了一些预定义的颜色类：

• text-primary：主要文字颜色
• text-secondary：次要文字颜色
• text-success：成功状态的文字颜色
• text-danger：危险状态的文字颜色
• text-warning：警告状态的文字颜色
• text-info：信息提示的文字颜色
• text-light：浅色背景下的文字颜色
• text-dark：深色背景下的文字颜色
• text-muted：禁用状态的文字颜色

这些类可以通过添加 .text-xx 的方式应用到文本元素中，例如：

htmlCopy Code
<p class="text-primary">这是主要文字颜色</p>

2. 对齐方式

Bootstrap5 提供了一些对齐方式的类，可以将元素在水平或垂直方向上进行对齐。

2.1 水平对齐

Bootstrap5 提供了以下水平对齐类：

• text-start：左对齐
• text-center：居中对齐
• text-end：右对齐

这些类可以通过添加 .text-xx 的方式应用到文本元素中，例如：

htmlCopy Code
<h1 class="text-center">这是居中对齐的标题</h1>

2.2 垂直对齐

Bootstrap5 提供了以下垂直对齐类：

• align-baseline：基线对齐
• align-top：顶部对齐
• align-middle：居中对齐
• align-bottom：底部对齐

这些类可以通过添加 .align-xx 的方式应用到文本元素中，例如：

htmlCopy Code
<p class="align-middle">这是居中对齐的段落文字</p>

3. 实例

下面是一个使用 Bootstrap5 文字排版类的例子：

htmlCopy Code
<div class="container">
  <h1 class="text-center text-primary fw-bold mt-3 mb-5">Bootstrap5 文字排版学习笔记</h1>
  <div class="row">
    <div class="col-md-6">
      <p class="fw-bold text-success">这是一段成功状态的粗体文本</p>
      <p class="text-muted">这是一段禁用状态的普通文本</p>
    </div>
    <div class="col-md-6">
      <p class="fw-bold text-danger">这是一段危险状态的粗体文本</p>
      <p class="text-info">这是一段信息提示的普通文本</p>
    </div>
  </div>
</div>

效果如下图所示：