Bootstrap 速查表
可搜索、可打印的 Bootstrap 5.3 参考手册——栅格、间距、排版、颜色、弹性布局工具、按钮、表单以及组件。免费。
栅格与布局
12<div class="container">
固定宽度的响应式容器
<div class="container-fluid">
在每个断点都全宽的容器
<div class="container-md">
在 md 断点前 100% 宽
<div class="row">
栅格行，容纳列
<div class="col">
等宽自动列
<div class="col-6">
占 12 列中的 6 列
<div class="col-md-4">
从 md 断点起占 4 列
<div class="col-auto">
按内容自适应宽度的列
<div class="offset-md-2">
将列右移 2 列
<div class="row g-3">
列之间的间距
<div class="row row-cols-3">
强制每行 3 等列
<div class="order-2">
重排 flex/grid 列
间距工具类
12m-3
四边外边距（刻度 0-5）
mt-2
上外边距
mx-auto
自动水平外边距以居中
p-4
四边内边距
py-2
垂直内边距（上下）
ms-3
起始外边距（LTR 中为左，支持 RTL）
me-3
结束外边距（LTR 中为右，支持 RTL）
ps-2
起始内边距，支持 RTL
pe-2
结束内边距，支持 RTL
gap-3
flex/grid 项之间的间隙
m-n1
负外边距
p-md-5
从 md 起的响应式内边距
排版
14<h1>..<h6>
带默认样式的标题级别
<p class="display-1">
大号展示标题（display-1..6）
<p class="lead">
突出的引导段落
fw-bold
粗体字重
fw-semibold
半粗体字重
fst-italic
斜体字样
text-center
文本居中对齐
text-start
文本起始对齐，支持 RTL
text-end
文本结束对齐，支持 RTL
text-truncate
用省略号截断溢出
text-uppercase
将文本转为大写
fs-1
响应式字号（fs-1..6）
lh-base
基础行高（lh-1、lh-sm、lh-lg）
font-monospace
等宽字体族
颜色与背景
10text-primary
主色文本颜色
bg-primary
主色背景颜色
bg-primary-subtle
淡主色背景色调
text-primary-emphasis
强调主色文本，随主题适配
text-bg-primary
主色背景配自动对比文本
link-primary
彩色链接辅助类
bg-opacity-50
应用 50% 背景不透明度
text-body-secondary
弱化的次要正文文本
text-body-emphasis
高强调正文文本
border-primary-subtle
淡主色边框颜色
Flex 工具类
10d-flex
创建弹性容器
flex-row
横向排列项
flex-column
纵向排列项
justify-content-between
沿主轴分布项
align-items-center
在交叉轴上居中项
flex-wrap
允许项目换行
flex-grow-1
让某项增长以填满空间
flex-fill
强制等弹性宽度
align-self-end
将单个项对齐到末端
flex-md-row
从 md 起的响应式 flex 方向
显示与定位
12d-none
隐藏元素
d-md-block
从 md 断点起显示为块级
position-relative
相对定位
position-absolute
绝对定位
position-fixed
固定定位
position-sticky
粘性定位
top-0 start-0
固定到左上角，支持 RTL
translate-middle
通过 transform translate 居中
fixed-top
将元素固定到视口顶部
sticky-top
滚动时粘附到顶部
z-3
设置 z-index（z-0..3）
invisible
隐藏但保留布局空间
尺寸与边框
12w-100
宽度为父级的 100%
w-50
宽度为父级的 50%
h-100
高度为父级的 100%
mw-100
最大宽度 100%
vh-100
高度为视口的 100%
border
在四边添加默认边框
border-0
移除所有边框
border-primary
为边框上色
rounded
默认圆角
rounded-pill
完全圆角的胶囊形
rounded-circle
圆形圆角
shadow-sm
小阴影（shadow、shadow-lg）
按钮
9<button class="btn btn-primary">
实心主色按钮
<button class="btn btn-outline-primary">
描边按钮变体
<button class="btn btn-lg">
大号按钮（另有 btn-sm）
<button class="btn btn-link">
样式如链接的按钮
<button class="btn-close">
通用关闭（×）按钮
<button class="btn disabled">
禁用按钮状态
<button class="btn active">
激活按钮状态
<div class="d-grid"><button class="btn">
通过 d-grid 的全宽块按钮
<div class="btn-group">
将按钮分组在一起
表单
11<input class="form-control">
带样式的文本输入框
<label class="form-label">
表单字段标签
<select class="form-select">
带样式的下拉选择框
<div class="form-check">
复选/单选框包装器
<input class="form-check-input">
带样式的复选或单选输入
<div class="form-check form-switch">
开关切换组件
<input class="form-control-lg">
大号输入（另有 form-control-sm）
<div class="input-group">
将输入与附加组件分组
is-invalid
无效校验状态（另有 is-valid）
<div class="form-floating">
浮动标签输入
col-form-label
为水平表单对齐的标签
组件
14<div class="card">
灵活的内容卡片
<nav class="navbar navbar-expand-lg">
响应式导航栏
data-bs-toggle="modal" data-bs-target="#m"
触发模态对话框
data-bs-toggle="dropdown"
切换下拉菜单
data-bs-toggle="collapse"
切换可折叠元素
<div class="accordion">
堆叠的可折叠面板
<div class="alert alert-dismissible">
可关闭的警告消息
<span class="badge text-bg-primary">
小计数或标签徽章
<ul class="list-group">
带样式的项列表
<ul class="nav nav-tabs">
选项卡导航
<div class="toast">
轻量的 toast 通知
<div class="offcanvas">
画布外侧边栏面板
<div class="spinner-border">
加载旋转指示器
<nav><ul class="pagination">
分页导航链接
辅助类与杂项
11data-bs-theme="dark"
在某作用域启用深色模式
<div class="ratio ratio-16x9">
响应式宽高比盒子
visually-hidden
视觉隐藏但保留给屏幕阅读器
visually-hidden-focusable
聚焦前隐藏（跳转链接）
stretched-link
使父级整体可点击
clearfix
清除浮动子元素
<div class="vstack gap-2">
元素的垂直堆叠
<div class="hstack gap-2">
元素的水平堆叠
<a class="icon-link">
与内联图标对齐的链接
<div class="progress">
进度条容器
<nav class="breadcrumb">
面包屑导航路径
没有条目匹配“:q”。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。