辅助工具（Helpers）

Bootstrap 5 提供了一系列辅助工具类，用于处理常见的 CSS 需求，如清除浮动、颜色链接、焦点环、拉伸链接和文本截断等。

清除浮动（Clearfix）

使用 .clearfix 快速清除子元素的浮动，无需新增多余的 ::after 伪元素样式：

<div class="clearfix">
    <div class="float-start">左浮动</div>
    <div class="float-end">右浮动</div>
</div>

颜色与背景链接

.link-* 类用于覆盖链接颜色，保留悬停状态：

<a href="#" class="link-primary">主要链接</a>
<a href="#" class="link-secondary">次要链接</a>
<a href="#" class="link-success">成功链接</a>
<a href="#" class="link-danger">危险链接</a>
<a href="#" class="link-warning">警告链接</a>
<a href="#" class="link-info">信息链接</a>
<a href="#" class="link-light">浅色链接</a>
<a href="#" class="link-dark">深色链接</a>
<a href="#" class="link-body-emphasis">强调链接</a>

焦点环（Focus Ring）

.focus-ring 为任意元素添加可访问的焦点轮廓样式，替代浏览器默认的 :focus 样式：

<button class="btn btn-primary focus-ring">
    获取焦点时显示轮廓
</button>

<a href="#" class="focus-ring">
    链接焦点轮廓
</a>

通过 CSS 变量自定义焦点环颜色：

.focus-ring {
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .5);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-blur: 0;
}

图标链接（Icon Link）

.icon-link 用于创建带图标的链接，图标自动与文字对齐：

<a href="#" class="icon-link">
    <i class="bi-heart-fill"></i>
    收藏
</a>

<a href="#" class="icon-link icon-link-hover">
    了解更多
    <i class="bi-arrow-right"></i>
</a>

比率（Ratio）

.ratio 结合 .ratio-* 类，创建固定宽高比的嵌入容器，用于视频、地图等 iframe 内容：

<!-- 16:9 宽高比 -->
<div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/..." title="视频"></iframe>
</div>

<!-- 1:1 正方形 -->
<div class="ratio ratio-1x1">
    <div>正方形内容</div>
</div>

<!-- 4:3 比例 -->
<div class="ratio ratio-4x3">
    <div>内容</div>
</div>

支持的比率类：

.ratio-1x1
.ratio-4x3
.ratio-16x9
.ratio-21x9

栈（Stacks）

Stacks 是基于 Flexbox 的快速布局助手，分为垂直栈（.vstack）和水平栈（.hstack）：

<!-- 垂直栈 -->
<div class="vstack gap-3">
    <div class="p-2 bg-light border">项目 1</div>
    <div class="p-2 bg-light border">项目 2</div>
    <div class="p-2 bg-light border">项目 3</div>
</div>

<!-- 水平栈 -->
<div class="hstack gap-3">
    <div class="p-2 bg-light border">项目 1</div>
    <div class="p-2 bg-light border ms-auto">项目 2（推至右侧）</div>
</div>

拉伸链接（Stretched Link）

.stretched-link 通过 ::after 伪元素使整个父容器可点击：

<div class="card" style="max-width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">可点击卡片</h5>
        <p class="card-text">点击卡片任意位置跳转</p>
        <a href="#" class="btn btn-primary stretched-link">查看详情</a>
    </div>
</div>

注意：.stretched-link 要求父容器具有 position: relative（Bootstrap 的卡片默认带有该属性）。

文本截断（Text Truncation）

.text-truncate 使用 text-overflow: ellipsis 实现单行文本截断：

<!-- 块级元素 -->
<div class="text-truncate" style="max-width: 200px;">
    这是一段很长的文本，超出部分将被省略号截断显示
</div>

<!-- 行内块元素 -->
<a href="#" class="d-inline-block text-truncate" style="max-width: 150px;">
    超长链接文字将被截断
</a>

竖线（Vertical Rule）

.vr 创建类似 <hr> 但垂直方向的分隔线：

<div class="d-flex align-items-center gap-3">
    <span>左侧内容</span>
    <div class="vr"></div>
    <span>右侧内容</span>
</div>

视觉隐藏（Visually Hidden）

.visually-hidden 将元素在视觉上隐藏但仍对屏幕阅读器可见；.visually-hidden-focusable 在获得焦点时显示：

<!-- 仅屏幕阅读器可见 -->
<span class="visually-hidden">屏幕阅读器描述</span>

<!-- 焦点时可见，适合跳过导航链接 -->
<a class="visually-hidden-focusable" href="#main-content">
    跳转到主内容
</a>