Bootstrap参考手册
本参考手册提供了Bootstrap所有类、组件和工具的快速查阅。Bootstrap是一个强大的前端框架，通过使用预定义的CSS类，可以快速构建响应式、移动优先的网站。
使用建议： 本参考手册按照功能模块分类，每个模块都包含详细的类名、描述和使用示例。您可以使用搜索功能快速查找特定类名或组件。
布局
内容
组件
工具类
表单
辅助类
Bootstrap版本信息
本参考手册基于Bootstrap 5.x版本编写。Bootstrap 5是当前最新稳定版本，与Bootstrap 4相比有以下主要变化：
放弃对Internet Explorer的支持
使用原生CSS变量进行主题定制
改进了网格系统，增加了新的断点
新增了更多实用工具类
优化了表单组件
注意： 如果您正在使用Bootstrap 4或更早版本，某些类名和功能可能有所不同。请参考相应版本的官方文档。
布局
布局相关的类用于控制页面整体结构和容器系统。Bootstrap使用容器、行和列来构建响应式布局。
容器
容器是Bootstrap布局的基本构建块，它们包含、填充和对齐您的内容。Bootstrap提供三种类型的容器：
类名
描述
示例
.container
响应式固定宽度容器，在不同断点处有最大宽度限制
.container-fluid
全宽容器，始终占据视口的100%宽度
.container-{breakpoint}
响应式容器，在指定断点之前100%宽度，之后变为固定宽度
最佳实践： 在大多数情况下，使用.container类即可。只有在需要全宽布局时才使用.container-fluid。
网格系统
Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它是基于flexbox构建的，允许最多12列。
类名
描述
示例
.row
创建一行，用于包含列
.col
等宽列，自动分配可用空间
.col-{number}
指定列宽（1-12），基于12列网格系统
.col-{breakpoint}-{number}
响应式列，在指定断点及以上应用列宽
.offset-{number}
列偏移，向右移动指定列数
.g-{number}
网格间距（0-5），控制列之间的间隙
网格系统示例
内容
内容相关的类用于处理文本、图像、表格等内容的样式和排版。
排版
Bootstrap提供了一套完整的排版工具，包括标题、段落、列表等样式。
类名
描述
示例
.h1 - .h6
标题样式，使元素看起来像标题
标题
.display-1 - .display-6
大标题，比普通标题更大更醒目
大标题
.lead
引导段落，使段落更突出
...
.text-{alignment}
文本对齐（start, center, end）
...
.fw-{weight}
字体粗细（bold, bolder, normal, light, lighter）
...
.fst-{style}
字体样式（italic, normal）
...
图片
Bootstrap提供了一些类来使图片具有响应式特性并添加样式。
类名
描述
示例
.img-fluid
响应式图片，自动调整大小以适应父容器
.img-thumbnail
缩略图，添加边框和圆角
.rounded
圆角图片
.float-{direction}
图片浮动（start, end）
表格
Bootstrap提供了多种表格样式和变体，使表格更加美观和易用。
类名
描述
示例
.table
基础表格
.table-striped
条纹表格，交替行背景色
.table-bordered
带边框表格
.table-hover
悬停效果，鼠标悬停时行高亮
.table-responsive
响应式表格，在小屏幕上水平滚动
组件
Bootstrap提供了一系列预构建的组件，可以快速添加到您的项目中。
按钮
Bootstrap提供了多种按钮样式和变体，适用于各种交互场景。
类名
描述
示例
.btn
基础按钮
.btn-{color}
按钮颜色（primary, secondary, success等）
.btn-outline-{color}
轮廓按钮，只有边框和文字有颜色
.btn-{size}
按钮大小（sm, lg）
.btn-group
按钮组，将多个按钮组合在一起
卡片
卡片是一个灵活的可扩展内容容器，包含页眉、页脚和内容区域。
类名
描述
示例
.card
基础卡片
.card-body
卡片主体
.card-title
卡片标题
标题
.card-text
卡片文本
文本
.card-header
卡片头部
.card-footer
卡片底部
导航
Bootstrap提供多种导航组件，包括基础导航、标签页和导航栏。
类名
描述
示例
.nav
基础导航
.nav-tabs
标签页导航
.nav-pills
胶囊导航
.navbar
导航栏
.navbar-expand-{breakpoint}
响应式导航栏，在指定断点处展开
.navbar-{color}
导航栏颜色（light, dark）
其他组件
Bootstrap还提供了许多其他有用的组件，用于常见UI需求。
类名
描述
示例
.alert
警告框，用于显示重要消息
.badge
徽章，用于突出显示小段信息
新
.breadcrumb
面包屑，显示当前页面在网站结构中的位置
.progress
进度条，显示任务的完成进度
.spinner-border
加载指示器，表示正在加载内容
.toast
toast通知，轻量级的信息提示
工具类
Bootstrap提供了大量实用工具类，用于快速构建和自定义界面，无需编写自定义CSS。
间距
使用间距工具类控制元素的边距(margin)和内边距(padding)。
类名
描述
示例
.m-{number}
外边距（0-5）
.p-{number}
内边距（0-5）
.m{t|r|b|l}-{number}
单边外边距
.p{t|r|b|l}-{number}
单边内边距
.m{x|y}-{number}
水平/垂直外边距
.p{x|y}-{number}
水平/垂直内边距
颜色
使用颜色工具类设置文本颜色和背景颜色。
类名
描述
示例
.text-{color}
文本颜色
...
.bg-{color}
背景颜色
.border-{color}
边框颜色
显示
控制元素的显示方式、可见性和定位。
类名
描述
示例
.d-{value}
显示属性（none, block, inline, flex等）
.d-{breakpoint}-{value}
响应式显示
.visible
可见
.invisible
不可见（但保留空间）
Flexbox
Flexbox工具类用于控制flex容器的对齐、方向和分布。
类名
描述
示例
.d-flex
Flex容器
.justify-content-{value}
主轴对齐
.align-items-{value}
交叉轴对齐
.flex-{direction}
方向（row, column）
.flex-{breakpoint}-{value}
响应式Flex
表单
Bootstrap提供了一系列表单控件和布局选项，用于创建美观且功能完整的表单。
表单控件
Bootstrap为各种表单元素提供了样式类。
类名
描述
示例
.form-control
表单控件，用于输入框、文本域等
.form-select
选择菜单
.form-check
复选框/单选按钮容器
.form-check-input
复选框/单选按钮
.form-check-label
复选框/单选按钮标签
.form-label
表单标签
表单布局
Bootstrap提供多种表单布局选项，包括水平表单和内联表单。
类名
描述
示例
.form-group
表单组（Bootstrap 4）
.mb-3
表单组间距（Bootstrap 5）
.row + .col
水平表单布局
.form-inline
内联表单（Bootstrap 4）
.row + .col-auto
内联表单布局（Bootstrap 5）
表单验证
Bootstrap提供表单验证样式类，用于显示验证状态和反馈信息。
类名
描述
示例
.is-valid
验证成功
.is-invalid
验证失败
.valid-feedback
成功提示
.invalid-feedback
错误提示
辅助类
Bootstrap提供了一些辅助类，用于处理特定样式需求。
定位
使用定位工具类控制元素的位置。
类名
描述
示例
.position-{value}
定位（static, relative, absolute, fixed, sticky）
.top-{number}
顶部定位（0-100）
.start-{number}
左侧定位（0-100）
.translate-middle
居中定位
边框
使用边框工具类添加或移除边框，以及设置边框颜色和圆角。
类名
描述
示例
.border
添加边框
.border-{side}
单边边框（top, end, bottom, start）
.border-{number}
边框宽度（1-5）
.rounded
圆角
.rounded-{side}
单边圆角（top, end, bottom, start, circle, pill）
阴影
使用阴影工具类为元素添加阴影效果。
类名
描述
示例
.shadow
常规阴影
.shadow-sm
小阴影
.shadow-lg
大阴影
.shadow-none
无阴影
浏览器兼容性
支持的浏览器
Chrome
最新版本
Firefox
最新版本
Safari
最新版本
Edge
最新版本
Opera
最新版本
注意： Bootstrap 5 不再支持 Internet Explorer。如果需要支持 IE，请使用 Bootstrap 4。
下一步学习
现在您已经熟悉了Bootstrap的类参考，下一步可以：
1
实战项目
通过实际项目巩固所学知识
查看项目
2
定制化
学习如何定制Bootstrap样式
继续学习
3
官方文档
查阅官方完整文档
访问官网