English 中文 العربية 日本語 Português

Bootstrap: 辅助工具类

最后更新：2026-08-26

1. 本课导读

(1) 前置知识

(2) 🎯 你将学到

(3) 痛点

Alice 在调整页面元素的边框、阴影和圆角时需要写大量自定义 CSS——用 Bootstrap 工具类一行 class 就能搞定。

(4) 解法

Bootstrap 提供了一套完整的原子化 CSS 工具类，覆盖边框、圆角、阴影、浮动、可见性、溢出和尺寸等常用样式。

理解方式： 工具类 = CSS 样式快捷方式——shadow = box-shadow、rounded = border-radius、border-primary = border-color。一个 class 顶一行 CSS。

(5) 收益

不用写自定义 CSS，直接在 HTML 中用 class 组合即可实现各种视觉效果，开发和调试速度大幅提升。

2. 边框

Border classes: border, border-top/end/bottom/start, border-0/1/2/3/4/5, border-{color}

(1) 边框工具类

class CSS 效果
border 四边 1px solid #dee2e6 边框
border-top / border-end / border-bottom / border-start 单边边框
border-0 去除所有边框
border-{1-5} 边框宽度 1px ~ 5px
border-{color} 边框颜色（primary/success/danger 等）

(2) 边框宽度参考表

class CSS 效果 适用场景
border-1 border-width: 1px 最细边框 默认边框、表格单元格
border-2 border-width: 2px 细边框 卡片边框、输入框
border-3 border-width: 3px 中等边框 强调边框、按钮
border-4 border-width: 4px 粗边框 区块分割、标题下划线
border-5 border-width: 5px 最粗边框 左侧强调线、警告边框

▶ 示例：边框和圆角演示

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Borders & Rounded Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Border Directions</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border p-3">border</div>
      <div class="border-top p-3">border-top</div>
      <div class="border-end p-3">border-end</div>
      <div class="border-bottom p-3">border-bottom</div>
      <div class="border-start p-3">border-start</div>
    </div>

    <h5>Border Width</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-1 p-3">border-1</div>
      <div class="border border-2 p-3">border-2</div>
      <div class="border border-3 p-3">border-3</div>
      <div class="border border-4 p-3">border-4</div>
      <div class="border border-5 p-3">border-5</div>
    </div>

    <h5>Border Colors</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-primary p-3">primary</div>
      <div class="border border-success p-3">success</div>
      <div class="border border-danger p-3">danger</div>
      <div class="border border-warning p-3">warning</div>
      <div class="border border-info p-3">info</div>
      <div class="border border-dark p-3">dark</div>
    </div>

    <h5>Rounded Sizes</h5>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <div class="border p-3 rounded-0">rounded-0</div>
      <div class="border p-3 rounded-1">rounded-1</div>
      <div class="border p-3 rounded-2">rounded-2</div>
      <div class="border p-3 rounded-3">rounded-3</div>
      <div class="border p-3 rounded-4">rounded-4</div>
      <div class="border p-3 rounded-5">rounded-5</div>
      <div class="border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">circle</div>
      <div class="border rounded-pill px-4 py-2">rounded-pill</div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

3. 圆角

Rounded classes: rounded-0/1/2/3/4/5, rounded-circle, rounded-pill, rounded-top/end/bottom/start

(1) 圆角尺寸参考

class border-radius 效果
rounded-0 0（无圆角） 直角
rounded-1 0.125rem (2px) 微圆角
rounded-2 0.25rem (4px) 小圆角
rounded-3 0.375rem (6px) 默认圆角
rounded-4 0.5rem (8px) 中圆角
rounded-5 0.75rem (12px) 大圆角
rounded-circle 50%（正圆形） 圆形
rounded-pill 100rem（胶囊形） 药丸形

(2) 单边圆角

class 说明
rounded-top 上边两个角圆角
rounded-end 右边两个角圆角
rounded-bottom 下边两个角圆角
rounded-start 左边两个角圆角
HTML 
<img src="https://via.placeholder.com/100" class="rounded-circle" width="100" height="100" alt="Avatar">
<button class="btn btn-primary rounded-pill px-4">Pill Button</button>
<div class="rounded-4 p-3 bg-light border">Extra rounded corners</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：边框效果画廊

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Effects Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row g-4">
      <div class="col-md-4"><div class="border border-primary p-3 rounded">Primary Border</div></div>
      <div class="col-md-4"><div class="border border-success border-3 p-3 rounded-3">Success Thick</div></div>
      <div class="col-md-4"><div class="border border-danger border-5 p-3 rounded-pill">Danger Pill</div></div>
      <div class="col-md-4"><div class="border-top border-warning border-4 p-3">Top Only</div></div>
      <div class="col-md-4"><div class="border-start border-info border-5 ps-3">Start Accent</div></div>
      <div class="col-md-4"><div class="border-0 bg-light p-3 rounded-circle text-center" style="width:80px;height:80px;">No Border</div></div>
    </div>
  </div>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

Shadow classes: shadow-none, shadow-sm, shadow, shadow-lg

(1) 阴影对比表

class CSS box-shadow 视觉深度 使用场景
shadow-none 无阴影 平面 表格、列表、卡片组
shadow-sm 0 0.125rem 0.25rem 浅 默认卡片、小工具
shadow 0 0.5rem 1rem 中等 下拉菜单、弹出框
shadow-lg 0 1rem 3rem 深 模态框、Toast、通知
HTML 
<div class="shadow-none p-3 mb-3 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-3 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">Large shadow</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：阴影深度对比

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Depth Comparison</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .shadow-card { transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
    .shadow-card:hover { transform: translateY(-4px); }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Shadow Depth Scale</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card shadow-none p-4 text-center shadow-card h-100 border">
          <div class="display-6 text-body-tertiary mb-2">0</div>
          <h5>shadow-none</h5>
          <p class="text-body-secondary small mb-0">No shadow, flat design. Good for tables and card groups.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-sm p-4 text-center shadow-card h-100">
          <div class="display-6 text-secondary mb-2">1</div>
          <h5>shadow-sm</h5>
          <p class="text-body-secondary small mb-0">Subtle depth. Default for cards, small UI widgets.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow p-4 text-center shadow-card h-100">
          <div class="display-6 text-body mb-2">2</div>
          <h5>shadow</h5>
          <p class="text-body-secondary small mb-0">Moderate depth. Used for dropdowns and popovers.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-lg p-4 text-center shadow-card h-100">
          <div class="display-6 text-dark mb-2">3</div>
          <h5>shadow-lg</h5>
          <p class="text-body-secondary small mb-0">Prominent depth. Ideal for modals, toasts, notifications.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-5 mb-4">Combined Effects</h2>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card shadow-sm rounded-3 p-4" style="width:200px;">shadow-sm + rounded-3</div>
      <div class="card shadow rounded-4 border-0 p-4" style="width:200px;">shadow + rounded-4</div>
      <div class="card shadow-lg rounded-pill px-4 py-3 text-center" style="width:220px;">shadow-lg + pill</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

4. 浮动与清除

class 效果
float-start float: left
float-end float: right
float-none float: none
clearfix 清除浮动（父容器用）
HTML 
<div class="clearfix">
  <div class="float-start bg-primary text-white p-3 rounded">Float left</div>
  <div class="float-end bg-success text-white p-3 rounded">Float right</div>
</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。 注意： Flexbox 布局在大多数场景下比 float 更推荐。float 属性在 Bootstrap 5 中主要用于文本环绕图片。

(1) Float vs Flex vs Grid 布局选择

维度 Float 布局 Flexbox 布局 CSS Grid 布局
Bootstrap class float-start/end + clearfix d-flex + flex-* row + col-*
适用场景 文本环绕图片、简单左右排列 一维排列（行或列）、居中、等分布局 二维网格、多行多列、复杂布局
响应式支持 有限（float-md-start） 丰富（flex-md-row 等） 丰富（col-md-6 等）
对齐能力 弱（需额外 clearfix） 强（align-items-* justify-content-*） 强（align-self-* justify-items-*）
Bootstrap 推荐 ⚠ 不推荐（仅文本环绕） ✅ 推荐（一维布局） ✅ 推荐（二维布局）

5. 可见性与溢出

(1) 可见性

class CSS 说明
visible visibility: visible 显示元素
invisible visibility: hidden 隐藏但占据空间

(2) 溢出

class CSS 说明
overflow-auto overflow: auto 溢出时滚动
overflow-hidden overflow: hidden 溢出隐藏
overflow-visible overflow: visible 溢出可见（默认）
overflow-scroll overflow: scroll 始终显示滚动条

(3) 垂直对齐

class CSS
align-baseline vertical-align: baseline
align-top vertical-align: top
align-middle vertical-align: middle
align-bottom vertical-align: bottom
align-text-top vertical-align: text-top
align-text-bottom vertical-align: text-bottom
HTML 
<!-- Visibility -->
<div class="visible p-2 bg-light border">Visible element</div>
<div class="invisible p-2 bg-light border">Invisible (still occupies space)</div>

<!-- Overflow -->
<div class="overflow-auto border p-2" style="height: 80px;">Content that may overflow...</div>
<div class="overflow-hidden border p-2" style="height: 80px;">Hidden overflow content...</div>

<!-- Vertical alignment -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：溢出滚动示例

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Examples</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .overflow-box { border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Overflow Behaviors</h2>
    <div class="row g-3">
      <div class="col-md-3">
        <div class="overflow-box overflow-auto" style="height:120px;">
          <p class="fw-bold text-success">overflow-auto</p>
          <p>Scrolls when content overflows. Bootstrap provides utility classes to control how content behaves when it exceeds its container. The overflow-auto class adds scrollbars only when needed, keeping the layout clean while ensuring content remains accessible to users.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-hidden" style="height:120px;">
          <p class="fw-bold text-danger">overflow-hidden</p>
          <p>Content clipped. The overflow-hidden class clips content that exceeds the container boundaries, hiding any overflow without scrollbars.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-visible" style="height:120px;">
          <p class="fw-bold text-warning">overflow-visible</p>
          <p>Content overflows bounds. The overflow-visible class allows content to overflow beyond the container.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-scroll" style="height:120px;">
          <p class="fw-bold text-primary">overflow-scroll</p>
          <p>Always shows scrollbars. The overflow-scroll class forces scrollbars to always display, even when content fits.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-4">Horizontal Overflow</h2>
    <div class="overflow-auto bg-light p-2 rounded border" style="white-space: nowrap; max-width: 100%;">
      <span class="badge bg-primary me-2">Tag 1</span>
      <span class="badge bg-success me-2">Tag 2</span>
      <span class="badge bg-warning me-2">Tag 3</span>
      <span class="badge bg-danger me-2">Tag 4</span>
      <span class="badge bg-info me-2">Tag 5</span>
      <span class="badge bg-dark me-2">Tag 6</span>
      <span class="badge bg-secondary me-2">Tag 7</span>
      <span class="badge bg-primary me-2">Tag 8</span>
      <span class="badge bg-success me-2">Tag 9</span>
      <span class="badge bg-warning me-2">Tag 10</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

6. 尺寸

(1) 宽度

class CSS
w-25 / w-50 / w-75 / w-100 width: 25%/50%/75%/100%
mw-100 max-width: 100%
vw-100 width: 100vw
min-vw-100 min-width: 100vw

(2) 高度

class CSS
h-25 / h-50 / h-75 / h-100 height: 25%/50%/75%/100%
mh-100 max-height: 100%
vh-100 height: 100vh
min-vh-100 min-height: 100vh
HTML 
<div class="w-25 bg-primary text-white p-2 rounded-1 mb-1">w-25 (25%)</div>
<div class="w-50 bg-success text-white p-2 rounded-1 mb-1">w-50 (50%)</div>
<div class="w-75 bg-info text-white p-2 rounded-1 mb-1">w-75 (75%)</div>
<div class="w-100 bg-danger text-white p-2 rounded-1 mb-1">w-100 (100%)</div>
<div class="mw-100 bg-warning p-2 rounded-1" style="width: 200%;">mw-100 (max 100%)</div>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

▶ 示例：宽高调节面板

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width & Height Playground</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-3">Width Classes</h2>
    <div class="mb-4">
      <div class="w-25 p-3 mb-2 bg-primary text-white rounded-1">w-25</div>
      <div class="w-50 p-3 mb-2 bg-success text-white rounded-1">w-50</div>
      <div class="w-75 p-3 mb-2 bg-info text-white rounded-1">w-75</div>
      <div class="w-100 p-3 mb-2 bg-danger text-white rounded-1">w-100</div>
    </div>

    <h2 class="mb-3">Height Classes</h2>
    <div class="d-flex gap-2 border rounded-3 p-3 mb-4" style="height:160px;">
      <div class="h-25 bg-primary text-white p-2 rounded-1 d-flex align-items-center">h-25</div>
      <div class="h-50 bg-success text-white p-2 rounded-1 d-flex align-items-center">h-50</div>
      <div class="h-75 bg-info text-white p-2 rounded-1 d-flex align-items-center">h-75</div>
      <div class="h-100 bg-danger text-white p-2 rounded-1 d-flex align-items-center">h-100</div>
    </div>

    <h2 class="mb-3">Viewport Units</h2>
    <div class="vw-100 bg-warning text-dark p-2 rounded-1 mb-2">vw-100 (100% viewport width)</div>
    <div class="min-vw-100 bg-light border p-2 rounded-1">min-vw-100 (minimum 100% viewport)</div>

    <h2 class="mt-4 mb-3">Use Case: Sidebar + Content</h2>
    <div class="d-flex border rounded-3 overflow-hidden">
      <div class="w-25 bg-dark text-white p-3">
        <p class="fw-bold mb-1">Sidebar</p>
        <small>w-25</small>
      </div>
      <div class="w-75 bg-light p-3">
        <p class="fw-bold mb-1">Main Content</p>
        <small>w-75</small>
      </div>
    </div>

    <h2 class="mt-4 mb-3">Max Constraints</h2>
    <div class="mw-100 border p-2 rounded-1 mb-2" style="width:200%; background:#f8f9fa;">mw-100 limits width to 100%</div>
    <div class="mh-100 border p-2 rounded-1" style="height:50px; background:#f8f9fa;">mh-100 allows up to 100% height</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ 试一试

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

(1) 工具类组织结构图

100% 
graph TD
    A[Bootstrap Utilities] --> B[Spacing]
    A --> C[Typography]
    A --> D[Layout]
    A --> E[Visual]
    A --> F[Interactive]
    B --> B1[m/p + {side} + {size}]
    C --> C1[text-* / fw-* / fs-*]
    D --> D1[Display d-*]
    D --> D2[Flex flex-*]
    D --> D3[Float float-*]
    D --> D4[Width/Height w-*/h-*]
    E --> E1[Border border-*]
    E --> E2[Rounded rounded-*]
    E --> E3[Shadow shadow-*]
    E --> E4[Color text-*/bg-*]
    F --> F1[Overflow overflow-*]
    F --> F2[Visibility visible/invisible]
    F --> F3[Vertical align align-*]

输出： Bootstrap 5.3 样式生效的组件效果（如按钮、卡片、轮播、折叠等），页面默认采用 Bootstrap 默认主题（亮色）和响应式网格。

❓ 常见问题

Q 工具类能和组件 class 混用吗？
A 可以，而且这正是 Bootstrap 的设计理念。卡片组件加 shadow、按钮加 rounded-pill、表格加 border-0——工具类是组件的"调味料"，自由组合。
Q border-* 和 rounded-* 也支持断点后缀吗？
A 大部分不支持（通过 CSS 变量覆盖实现），但 border 类支持 border-md-0 之类在响应式断点下移除边框。
Q invisible 和 d-none 有什么不同？
A invisible 隐藏元素但元素仍然占据页面空间（visibility: hidden）。d-none 完全移除元素（display: none），不占据空间。
Q 多个工具类冲突时哪个优先级高？
A 同一 CSS 属性，后定义的 class 生效。Bootstrap 工具类加载顺序较晚，通常优先级：组件 class < 工具类 < 自定义 CSS。例如 text-primary 会覆盖卡片默认颜色，border-0 会覆盖表格边框。如果需要强制覆盖，用 !important 或更高特异性选择器。
Q 可以自定义工具类的值吗？
A 通过 Sass 可以。覆盖 $utilities map 中的 values 即可新增或修改工具类值。例如新增 w-15、w-35 等宽度值，或修改 shadow-* 的阴影大小。CDN 方式无法自定义，只能使用预设值。

📖 小节

📝 作业

  1. ⭐ 创建三种不同圆角的卡片：rounded-0 方形名片风格、rounded-3 标准卡片、rounded-pill 胶囊按钮风格。
  2. ⭐⭐ 做一个小号阴影 vs 大号阴影对比：两个卡片分别用 shadow-sm 和 shadow-lg，放在同一行。
  3. ⭐⭐⭐ 用 w-50 和 mx-auto 创建一个宽 50% 的居中区块，加 border + rounded-4 + shadow。

上一课： Bootstrap Icons · 下一课： 综合实战：企业站首页

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏