在 Bootstrap 4 中,排版系统用于设置文本样式、字体、行高以及其他与文字相关的样式。Bootstrap 提供了一系列的类,可以用于设置文本的外观和排版。

以下是 Bootstrap 4 中常用的排版类:

1. 文本颜色

   使用以下类可以设置文本的颜色:

   - .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 is a primary text.</p>

2. 字体样式

   使用以下类可以设置文本的字体样式:

   - .font-weight-bold:设置文本为粗体。
   - .font-weight-normal:设置文本为常规字体。
   - .font-italic:设置文本为斜体。

   示例:
   <p class="font-weight-bold">This is bold text.</p>

3. 字体大小

   使用以下类可以设置文本的字体大小:

   - .h1, .h2, .h3, .h4, .h5, .h6:设置标题的字体大小。
   - .lead:设置文本为大号字体,用于引导性文本。

   示例:
   <h1 class="h1">Heading 1</h1>
   <p class="lead">This is lead text.</p>

4. 行高

   使用以下类可以设置文本的行高:

   - .line-height-1:设置文本的行高为 1。
   - .line-height-1_5:设置文本的行高为 1.5。

   示例:
   <p class="line-height-1">This text has a line height of 1.</p>

5. 文本对齐

   使用以下类可以设置文本的对齐方式:

   - .text-left:左对齐。
   - .text-center:居中对齐。
   - .text-right:右对齐。
   - .text-justify:两端对齐。

   示例:
   <p class="text-center">This text is center-aligned.</p>

以上是 Bootstrap 4 中排版系统的一些常见类,你可以根据具体的需求在文本元素上应用这些类来调整样式。确保查阅 [Bootstrap 4 文档中的 Typography 部分](https://getbootstrap.com/docs/4.6/content/typography/) 以获取更多详细的信息和选项。


转载请注明出处:http://www.zyzy.cn/article/detail/5483/Bootstrap