异常教程

Bootstrap4 文字排版（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发领域，Bootstrap4 文字排版是构建优雅界面的核心环节之一。无论是初学者还是中级开发者，掌握 Bootstrap 提供的排版工具，都能显著提升页面的可读性与视觉一致性。本文将通过基础概念、具体案例和代码示例，系统讲解 Bootstrap4 的文字排版功能，帮助开发者快速上手并灵活应用。

一、基础文字排版：从 HTML 到 Bootstrap 的桥梁

1.1 标题与段落的默认样式

Bootstrap4 为 HTML 的标题（<h1> 到 <h6>）和段落（<p>）提供了默认样式，例如：

<h1>这是一个主标题</h1>  
<h2>这是一个副标题</h2>  
<p>这是一段默认的文本内容。</p>

默认样式通过 CSS 统一了字体大小、间距和颜色，开发者无需手动调整基础排版，这就像“装修房子时，开发商已经为你打好了基础框架”。

1.2 调整字体大小与行高

若需自定义文字大小，Bootstrap 提供了 .h1 到 .h6 的类，可叠加到任意标签上：

<div class="h1">自定义标题的文本</div>

此外，.display-1 到 .display-4 类可用于强调重要文本，例如：

<p class="display-3">欢迎访问我们的网站！</p>

二、标题的多样化设计

2.1 响应式标题：适配不同屏幕尺寸

通过添加 -sm、-md 等后缀，标题样式可随屏幕尺寸变化：

<h1 class="display-4">桌面端显示</h1>  
<h1 class="display-4 d-none d-sm-block">仅在小屏幕及以上显示</h1>

比喻：这如同“为不同尺寸的电视设置自动缩放功能”，确保标题在移动端和桌面端呈现最佳效果。

2.2 去除底部边距：.mb-0 的灵活应用

若需消除标题默认的底部边距，可用 .mb-0 类：

<h2 class="mb-0">标题与下方内容无缝衔接</h2>  
<p>这是紧跟标题的段落。</p>

三、段落与文本的进阶技巧

3.1 强调文本：粗体与斜体

使用 <strong>（粗体）和 <em>（斜体）标签，或直接添加 .font-weight-bold 和 .font-italic 类：

<p>这段文字包含 <strong>重点内容</strong> 和 <em>强调说明</em>。</p>

3.2 缩进与对齐：控制文本布局

  • 缩进：通过 .text-indent 类调整段落首行缩进（需自定义值）： 
    <p class="text-indent-2">中文段落首行缩进 2 个字符。</p>
  • 对齐：使用 .text-left、.text-center、.text-right 或 .text-justify： 
    <p class="text-center">居中文本</p>

四、文字颜色与背景色：提升可读性

Bootstrap 内置了多种预设颜色类，如 .text-primary（主色）、.text-success（绿色）、.text-danger（红色）等：

<p class="text-success">操作成功！</p>

若需自定义背景色，可叠加 .bg-light、.bg-dark 等类：

<div class="p-2 bg-info text-white">信息提示框</div>

五、响应式文字排版：适配多设备

5.1 断点驱动的文本样式

通过添加断点前缀（如 sm、md、lg），可为不同屏幕设计专属样式：

<p class="text-danger text-md-success">  
  移动端显示红色，平板及以上显示绿色。  
</p>

5.2 隐藏与显示文本

使用 .d-none 和 .d-sm-block 等类，可针对不同设备隐藏或显示内容：

<p class="d-none d-md-block">仅在中等屏幕及以上显示</p>

六、自定义样式：超越默认规则

6.1 覆盖 Bootstrap 样式

若需完全自定义，可通过自定义 CSS 覆盖 Bootstrap 的默认值：

/* 自定义标题字体大小 */  
h1 {  
  font-size: 2.5rem !important;  
  color: #333;  
}

6.2 组合多个类实现复杂效果

通过叠加多个类，可快速实现复杂排版：

<div class="text-center text-lg-left mb-3">  
  <p class="font-italic bg-light p-2">  
    这段文字在小屏幕居中，大屏幕左对齐，背景为浅灰色。  
  </p>  
</div>

七、实战案例：构建一个新闻卡片

以下是一个综合使用 Bootstrap4 文字排版功能的案例：

<div class="card mb-4">  
  <div class="card-body">  
    <h5 class="card-title">新闻标题</h5>  
    <p class="card-text">  
      这是一篇新闻内容。  
      <strong>重点数据：用户增长 200%！</strong>  
    </p>  
    <div class="text-right">  
      <a href="#" class="btn btn-primary">阅读全文</a>  
    </div>  
  </div>  
</div>

此案例演示了标题、段落、按钮对齐等常见场景，开发者可直接复制并修改内容。

结论

Bootstrap4 文字排版提供了从基础到高级的丰富工具，帮助开发者快速构建美观且响应式的设计。无论是调整标题样式、控制文本对齐，还是实现多设备适配，均能通过简单类名或少量 CSS 轻松实现。建议读者通过实际项目练习，逐步掌握这些技巧，并结合项目需求灵活组合 Bootstrap 的排版功能。记住，排版不仅是技术问题，更是用户体验的核心环节——一个清晰的文字布局，能让用户更高效地获取信息，提升网站的整体价值。

最新发布

查看更多文章