Bootstrap工具类概述
Bootstrap提供了一系列强大的工具类，用于快速构建和自定义界面，无需编写自定义CSS。这些工具类遵循单一职责原则，每个类只负责一个特定的样式属性。
核心概念： 工具类采用单一职责原则，每个类只负责一个特定的样式属性。这使得代码更加模块化，易于维护和重用。
工具类的优势
- 快速开发 - 无需编写自定义CSS即可实现常见样式
- 一致性 - 确保整个应用程序使用一致的间距、颜色和尺寸
- 响应式 - 大多数工具类都可以与响应式断点结合使用
- 可维护性 - 减少自定义CSS代码量，使样式更易于维护
间距工具类
使用间距工具类控制元素的边距(margin)和内边距(padding)。Bootstrap使用0-5的数值范围表示不同的间距大小。
边距类
边距类用于控制元素外部的空间。使用m表示margin，后跟方向（t, r, b, l, x, y）和大小（0-5）。
.m-0 ~ .m-5
.mt-0 ~ .mt-5
.mb-0 ~ .mb-5
.ml-0 ~ .ml-5
.mr-0 ~ .mr-5
.mx-0 ~ .mx-5
.my-0 ~ .my-5
内边距类
内边距类用于控制元素内部的空间。使用p表示padding，后跟方向（t, r, b, l, x, y）和大小（0-5）。
.p-0 ~ .p-5
.pt-0 ~ .pt-5
.pb-0 ~ .pb-5
.pl-0 ~ .pl-5
.pr-0 ~ .pr-5
.px-0 ~ .px-5
.py-0 ~ .py-5
间距示例
.p-3 .mb-3
.p-4 .mx-2
.mt-4 .p-2
间距示例代码
<div class="bg-primary text-white p-3 mb-3">.p-3 .mb-3</div>
<div class="bg-success text-white p-4 mx-2">.p-4 .mx-2</div>
<div class="bg-info text-white mt-4 p-2">.mt-4 .p-2</div>
间距数值对应关系：
- 0: 0rem (0px)
- 1: 0.25rem (4px)
- 2: 0.5rem (8px)
- 3: 1rem (16px)
- 4: 1.5rem (24px)
- 5: 3rem (48px)
颜色工具类
使用颜色工具类设置文本颜色和背景颜色。Bootstrap提供了一套完整的颜色系统，包括主题颜色和语义颜色。
文本颜色
文本颜色类用于设置元素的文本颜色。使用text-{color}格式。
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
背景颜色
背景颜色类用于设置元素的背景颜色。使用bg-{color}格式。
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
颜色示例
.bg-primary .text-white
.bg-success .text-white
.bg-warning .text-dark
.bg-light .text-dark
.bg-dark .text-light
颜色示例代码
<div class="p-3 mb-2 bg-primary text-white">.bg-primary .text-white</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success .text-white</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning .text-dark</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light .text-dark</div>
<div class="p-3 bg-dark text-light">.bg-dark .text-light</div>
颜色使用建议： 确保文本颜色和背景颜色之间有足够的对比度，以提高可访问性。可以使用在线工具检查颜色对比度是否符合WCAG标准。
边框工具类
使用边框工具类添加或移除边框，以及设置边框颜色和圆角。Bootstrap提供了一套完整的边框样式工具。
边框类
边框类用于控制元素的边框。使用border前缀，后跟方向或移除指令。
.border
.border-top
.border-end
.border-bottom
.border-start
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
边框颜色
边框颜色类用于设置边框的颜色。使用border-{color}格式。
.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-white
圆角类
圆角类用于控制元素的圆角。使用rounded前缀，后跟方向或特定形状。
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
.rounded-0
.rounded-1 ~ .rounded-3
边框示例
默认边框
主要颜色边框
成功颜色边框 + 圆角
圆形
胶囊形状
边框示例代码
<div class="p-3 mb-2 border">默认边框</div>
<div class="p-3 mb-2 border border-primary">主要颜色边框</div>
<div class="p-3 mb-2 border border-success rounded">成功颜色边框 + 圆角</div>
<div class="p-3 mb-2 border border-danger rounded-circle text-center" style="width: 100px; height: 100px; line-height: 70px;">圆形</div>
<div class="p-3 border border-warning rounded-pill">胶囊形状</div>显示与定位工具类
控制元素的显示方式、可见性和定位。这些工具类基于CSS的display和position属性。
显示类
显示类用于控制元素的显示方式。使用d-{value}格式。
.d-none
.d-inline
.d-inline-block
.d-block
.d-flex
.d-inline-flex
.d-grid
.d-table
可见性类
可见性类用于控制元素的可见性，但不影响布局。使用visible或invisible。
.visible
.invisible
定位类
定位类用于控制元素的定位方式。使用position-{value}格式。
.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.top-0 ~ .top-100
.start-0 ~ .start-100
.bottom-0 ~ .bottom-100
.end-0 ~ .end-100
.translate-middle
显示与定位示例
Flex 项目 1
Flex 项目 2
Flex 项目 3
左上角
右上角
左下角
右下角
显示与定位示例代码
<!-- Flex 布局 -->
<div class="d-flex p-2 bg-light mb-2">
<div class="p-2 bg-primary text-white me-2">Flex 项目 1</div>
<div class="p-2 bg-success text-white me-2">Flex 项目 2</div>
<div class="p-2 bg-info text-white">Flex 项目 3</div>
</div>
<!-- 绝对定位 -->
<div class="position-relative bg-light p-4" style="height: 100px;">
<div class="position-absolute top-0 start-0 bg-warning p-2">左上角</div>
<div class="position-absolute top-0 end-0 bg-danger text-white p-2">右上角</div>
<div class="position-absolute bottom-0 start-0 bg-success text-white p-2">左下角</div>
<div class="position-absolute bottom-0 end-0 bg-primary text-white p-2">右下角</div>
</div>其他实用工具类
Bootstrap还提供了许多其他实用工具类，用于处理文本、浮动、阴影等常见样式需求。
阴影类
阴影类用于为元素添加阴影效果。使用shadow-{size}格式。
.shadow-none
.shadow-sm
.shadow
.shadow-lg
浮动类
浮动类用于控制元素的浮动方向。使用float-{direction}格式。
.float-start
.float-end
.float-none
文本对齐
文本对齐类用于控制文本的水平对齐方式。使用text-{alignment}格式。
.text-start
.text-center
.text-end
文本变换
文本变换类用于控制文本的大小写。使用text-{transform}格式。
.text-lowercase
.text-uppercase
.text-capitalize
字体粗细
字体粗细类用于控制文本的粗细。使用fw-{weight}格式。
.fw-bold
.fw-bolder
.fw-normal
.fw-light
.fw-lighter
其他工具类示例
默认阴影
大阴影
向左浮动
向右浮动
居中对齐文本
大写文本
粗体文本
其他工具类示例代码
<div class="p-3 mb-3 shadow">默认阴影</div>
<div class="p-3 mb-3 shadow-lg">大阴影</div>
<div class="clearfix">
<div class="float-start p-2 bg-primary text-white me-2">向左浮动</div>
<div class="float-end p-2 bg-success text-white">向右浮动</div>
</div>
<div class="text-center p-2 bg-info text-white mt-3">居中对齐文本</div>
<div class="text-uppercase p-2 bg-warning mt-2">大写文本</div>
<div class="fw-bold p-2 bg-light mt-2">粗体文本</div>响应式工具类
所有工具类都可以与响应式断点结合使用，创建适应不同屏幕尺寸的设计。这是Bootstrap工具类系统最强大的功能之一。
响应式语法
格式：.{属性}{断点}-{值}
其中断点可以是：sm, md, lg, xl, xxl
响应式工具类示例
<!-- 不同屏幕尺寸的边距 -->
<div class="mt-3 mt-md-5 mt-xl-0">内容</div>
<!-- 不同屏幕尺寸的显示方式 -->
<div class="d-block d-md-none">只在移动设备显示</div>
<div class="d-none d-md-block">只在桌面设备显示</div>
<!-- 不同屏幕尺寸的文本对齐 -->
<div class="text-center text-md-start">移动设备居中，桌面设备左对齐</div>
<!-- 不同屏幕尺寸的Flex布局 -->
<div class="d-flex flex-column flex-md-row">
<div>移动设备垂直排列，桌面设备水平排列</div>
</div>响应式工具类最佳实践
- 移动优先 - 首先为移动设备设计，然后使用响应式类为更大的屏幕添加样式
- 渐进增强 - 从基本样式开始，然后为能力更强的设备添加增强样式
- 避免过度使用 - 只在必要时使用响应式工具类，避免代码变得难以维护
- 测试不同断点 - 确保在所有目标屏幕尺寸上测试您的设计
工具类使用技巧
以下是一些使用Bootstrap工具类的实用技巧，可以帮助您更高效地构建界面。
组合使用工具类
工具类可以组合使用，创建复杂的样式效果。
工具类组合示例
<!-- 创建一个带阴影、圆角和内边距的卡片 -->
<div class="shadow rounded p-4">
<h3 class="text-primary">卡片标题</h3>
<p class="text-muted">卡片内容</p>
<button class="btn btn-primary mt-3">操作按钮</button>
</div>
<!-- 创建一个居中对齐的容器 -->
<div class="d-flex justify-content-center align-items-center min-vh-100">
<div class="text-center">
<h1>居中内容</h1>
<p>这个容器在视口中垂直和水平居中</p>
</div>
</div>自定义工具类
如果Bootstrap提供的工具类不能满足您的需求，您可以创建自定义工具类。
自定义工具类示例
/* 自定义间距工具类 */
.my-custom-spacing {
margin: 2rem;
padding: 1.5rem;
}
/* 自定义颜色工具类 */
.text-custom {
color: #6f42c1;
}
.bg-custom {
background-color: #6f42c1;
}
/* 自定义阴影工具类 */
.shadow-custom {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
}