Bootstrap 4：精通文字排版与标题样式

Bootstrap 4 是一个流行的前端开发框架，专注于简化网页设计与开发流程。其在文字排版方面具有明确且直观的默认设置，以确保一致性和易读性。以下是关于Bootstrap 4 文字排版的关键知识点： 1. **默认样式**： - **字体大小**：Bootstrap 4 的基础字体大小设为 16px，通过 `font-size: 1rem` 实现，其中 1rem 相当于浏览器视口宽度的 16像素。 - **行高**：默认行高为 1.5，有助于提高可读性。 - **字体家族**：默认字体家族为 "Helvetica Neue", Helvetica, Arial, sans-serif，提供多种字体选择。 - **元素间距**：所有元素的顶部和底部外边距分别为 0 和 1rem（即 16px），减少了不必要的空白。 2. **标题样式**： - Bootstrap 4 根据语义化 HTML 标签（h1 到 h6）自动生成相应的样式。标题大小递减，从最大标题 h1 的 2.5rem（40px）到最小标题 h6 的 1rem（16px）。 3. **Display 类**： - 提供 `.display-1` 到 `.display-4` 四个类，用于调整标题的大小和权重，以满足不同的视觉需求。这些类会增加标题的字号和粗细，适用于强调或大型标题。 4. **辅助文本样式**： - 对于较小和颜色较浅的文本，Bootstrap 使用 `<small>` 元素，配合标题一起使用时可以作为副标题，提供额外的层次感。 5. **高亮文本**： - 使用 `<mark>` 元素标记重要的或需要突出显示的文字，可以通过设置黄色背景和内边距来增强视觉效果。 6. **Abbreviations**： - `<abbr>` 元素用于定义缩写或首字母缩写，方便用户理解内容。 7. **Blockquotes**： - `<blockquote>` 元素用于引用外部内容，可以添加 `.blockquote` 类来实现标准引用样式，通常会带有引用来源和引号。 Bootstrap 4 在文字排版上注重一致性与易读性，提供了丰富的样式选项和组件，使开发者能够轻松地创建美观且功能完备的网页布局。了解并掌握这些基础知识，能帮助你在实际项目中高效利用Bootstrap进行文本呈现。