在网页设计中，文本样式是传递信息、提升可读性的关键。Bootstrap5提供了一系列简洁的类，让我们无需写复杂的CSS就能轻松控制文本的对齐方式、粗细和行高。本文将手把手带你掌握这些基础文本样式的用法，适合初学者快速上手。
一、文本对齐（Text Alignment）¶
文本对齐决定了文字在页面中的水平位置，Bootstrap5通过简单的类名就能实现左对齐、居中对齐、右对齐，甚至根据屏幕大小（手机、平板、电脑）灵活调整。
1. 基础对齐方式¶
- 左对齐：
.text-start（默认通常也是左对齐，但显式使用更清晰） - 居中对齐：
.text-center（最常用，让文本在容器中水平居中） - 右对齐：
.text-end（较少用，但在某些场景如导航菜单中可能需要）
示例：
<!-- 左对齐 -->
<p class="text-start bg-light p-3">这行文字左对齐，在容器左侧开始显示。</p>
<!-- 居中对齐 -->
<p class="text-center bg-light p-3">这行文字居中对齐，所有内容在容器中间。</p>
<!-- 右对齐 -->
<p class="text-end bg-light p-3">这行文字右对齐，在容器右侧结束显示。</p>
效果：三个段落分别显示左、中、右对齐，背景色和内边距仅为了方便观察。
2. 响应式对齐（按屏幕尺寸调整）¶
Bootstrap5支持断点对齐，即不同屏幕宽度下显示不同对齐方式。断点包括：
- sm：小屏幕（手机横屏，≥576px）
- md：中等屏幕（平板，≥768px）
- lg：大屏幕（电脑，≥992px）
- xl：超大屏幕（≥1200px）
语法：text-<断点>-<对齐方式>，例如 .text-md-center 表示“在中等屏幕及以上居中对齐”。
示例：
<!-- 小屏幕（手机）左对齐，大屏幕（电脑）居中对齐 -->
<p class="text-sm-start text-lg-center bg-light p-3">
手机上左对齐，电脑上居中对齐，响应式切换！
</p>
效果：在手机上文字靠左，切换到电脑或平板后自动居中。
二、文本粗细（Text Weight）¶
文本粗细（即字体的“胖瘦”）影响文字的视觉层级，Bootstrap5通过.font-weight-*类快速控制。
1. 常用粗细类¶
- 粗体：
.font-weight-bold（最常用，如标题、强调内容） - 常规：
.font-weight-normal（默认字体粗细，可省略，但显式设置更清晰） - 细体：
.font-weight-light（较细的字体，适合次要内容） - 更粗/更细：
.font-weight-bolder（比父元素更粗）、.font-weight-lighter（比父元素更细）
示例：
<!-- 粗体标题 -->
<h1 class="font-weight-bold">这是粗体标题</h1>
<!-- 常规正文 -->
<p class="font-weight-normal">这是常规粗细的正文，默认就是这个效果。</p>
<!-- 细体文本 -->
<p class="font-weight-light">这是细体文本，适合次要信息。</p>
<!-- 更粗（父元素常规时） -->
<p class="font-weight-bolder">这行文字比父元素更粗</p>
三、行高设置（Line Height）¶
行高是指文本行之间的垂直距离，合适的行高能提升可读性。Bootstrap5通过.line-height-*类提供预设行高选项。
1. 常用行高类¶
- 默认行高：
.line-height-base（通常为1.5，适合正文） - 紧凑行高：
.line-height-sm（较小行高，适合短文本或导航） - 宽松行高：
.line-height-lg（较大行高，适合长篇阅读或强调内容）
示例：
<!-- 默认行高（1.5） -->
<p class="line-height-base bg-light p-3">
这是默认行高的文本，每行之间距离适中，适合大多数正文。
</p>
<!-- 宽松行高（1.8） -->
<p class="line-height-lg bg-light p-3">
这是宽松行高的文本，行与行之间距离更大，阅读体验更好。
</p>
四、综合示例：把所有样式串起来¶
以下是一个完整的HTML片段，展示文本对齐、粗细、行高的综合应用：
<!DOCTYPE html>
<html>
<head>
<!-- 引入Bootstrap5 CSS（需先加载，这里省略CDN链接） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
<!-- 居中标题（粗体） -->
<h2 class="text-center font-weight-bold mb-4">这是综合示例标题</h2>
<!-- 小屏幕左对齐，大屏幕右对齐的副标题 -->
<h5 class="text-sm-start text-lg-end font-weight-light mb-3">副标题：响应式对齐</h5>
<!-- 正文：默认行高，部分粗体 -->
<p class="mb-3">
这是一段普通正文，默认行高和常规粗细。
<span class="font-weight-bold">这里是粗体强调内容</span>，需要突出显示。
</p>
<!-- 宽松行高的段落 -->
<p class="line-height-lg bg-light p-3">
这是宽松行高的文本，通过.line-height-lg类设置，行与行之间距离更大，
适合长篇内容阅读，比如文章正文。
</p>
</body>
</html>
总结¶
Bootstrap5的文本样式通过简单的类名就能实现对齐、粗细和行高的精准控制，无需手动写CSS。关键是记住：
- 对齐用.text-*（基础+响应式）；
- 粗细用.font-weight-*（粗体、常规、细体）；
- 行高用.line-height-*（默认、紧凑、宽松）。
多练习组合这些类，就能快速打造出清晰易读的文本排版效果！