活跃
badge rounded-pill bg-success-subtle text-success-emphasis border border-success-subtle px-3 py-2
活跃
浅绿色胶囊状态，就是你图 1 的效果
75 个常用示例
一个元素可以同时使用多个 Class
<p class="text-success text-center fw-bold">成功！</p>
成功！
状态标签
组合 badge、rounded-pill 和颜色 Class 制作状态标签。
进行中
badge rounded-pill text-bg-primary
进行中
蓝色的进行中状态
已完成
badge rounded-pill text-bg-success
已完成
绿色的完成状态
等待中
badge rounded-pill text-bg-warning
等待中
黄色的等待状态
已停止
badge rounded-pill text-bg-danger
已停止
红色的停止状态
草稿
badge rounded-pill text-bg-secondary
草稿
灰色的草稿状态
文字颜色
使用 text-* 快速改变文字颜色。
这是一段主要颜色文字
text-primary
主要颜色
适合链接和重要信息
操作成功完成
text-success
成功颜色
适合成功、完成状态
发生错误，请检查
text-danger
危险颜色
适合错误和删除提示
请注意这项内容
text-warning
警告颜色
适合需要注意的信息
这里有一条新消息
text-info
信息颜色
适合一般提示信息
次要说明文字
text-muted
次要颜色
弱化非重点内容
文字对齐
控制文字在容器中的水平位置。
靠左对齐
text-start
靠左对齐
文字从容器左边开始
居中对齐
text-center
居中对齐
文字放在容器正中间
靠右对齐
text-end
靠右对齐
文字贴近容器右边
字体样式
改变粗细、大小和斜体效果。
这是一段粗体文字
fw-bold
粗体
突出重要文字
这是一段半粗体文字
fw-semibold
半粗体
比普通文字稍粗
这是一段细体文字
fw-light
细体
显示轻盈的文字效果
这是一段斜体文字
fst-italic
斜体
强调引用或特殊文字
较大的文字
fs-3
字体大小
fs-1 最大，fs-6 最小
hello h2ynex
text-uppercase
大写转换
自动将英文转成大写
背景与边框
使用 bg-*、border 和 rounded 组合外观。
蓝色背景
bg-primary text-white
蓝色背景
深色背景搭配白字
成功背景
bg-success text-white
成功背景
显示成功状态区域
警告背景
bg-warning text-dark
警告背景
浅色背景搭配深色字
边框与圆角
border rounded
边框圆角
加入边框和圆角
间距
m-* 控制外距，p-* 控制内距，数字通常为 0–5。
m-3 外距
m-3
全部外距
四个方向加入 margin
p-3 内距
p-3
全部内距
四个方向加入 padding
px-4 左右内距
px-4
左右内距
只增加水平方向内距
py-3 上下内距
py-3
上下内距
只增加垂直方向内距
mt-3 顶部外距
mt-3
顶部外距
元素上方加入 margin
mb-4 底部外距
mb-4
底部外距
元素下方加入 margin
Flex 布局
组合 d-flex、justify-content-* 和 align-items-* 排列元素。
12
d-flex
启用 Flex
让子元素水平排列
ABC
gap-3
项目间距
为 Flex 子元素加入统一间隔
左右
justify-content-between
两端对齐
第一个在左，最后一个在右
中间
justify-content-center
水平居中
子元素排列在中间
高中
align-items-center
垂直居中
不同高度的元素垂直居中
上下
flex-column
垂直排列
让 Flex 子元素从上到下排列
1234
flex-wrap
自动换行
空间不足时允许子元素换到下一行
123
order-last
调整顺序
把指定的 Flex 子元素移到最后
显示方式
使用 d-* 控制元素的显示、隐藏和排列方式。
d-block
d-block
块级元素
独占一整行宽度
文字前 d-inline 文字后
d-inline
行内元素
与其他文字保持同一行
inline-block
d-inline-block
行内区块
在同一行并可以设置尺寸
AB
d-grid
Grid 显示
快速启用 CSS Grid
右边元素已隐藏 → 看不到我
d-none
隐藏元素
元素不会显示或占据空间
桌面尺寸可以看到我
d-md-block d-none
响应式显示
只在 md 及以上屏幕显示
宽度与高度
使用 w-*、h-* 和 viewport Class 控制元素尺寸。
25%
w-25
25% 宽度
占父容器四分之一
50%
w-50
50% 宽度
占父容器一半
75%
w-75
75% 宽度
占父容器四分之三
100%
w-100
100% 宽度
填满父容器宽度
100% 高
h-100
100% 高度
填满父容器高度
max-width: 100%
mw-100
最大宽度
限制元素不超过父容器
圆角与阴影
组合 rounded-* 和 shadow-* 增加层次感。
rounded
rounded
普通圆角
为元素加入标准圆角
rounded-pill
rounded-pill
胶囊圆角
制作完全圆润的胶囊
H
rounded-circle
圆形
相同宽高时显示为圆形
shadow-sm
shadow-sm
小阴影
轻微提升元素层次
shadow
shadow
标准阴影
普通卡片常用阴影
shadow-lg
shadow-lg
大阴影
更明显的浮起效果
栅格布局
使用 row、col 和 g-* 创建响应式网格。
AB
row
网格行
Bootstrap 栅格的外层行
66
col-6
一半宽度
12 栏中的 6 栏
444
col-4
三分之一
12 栏中的 4 栏
123
row-cols-3
自动三列
让一行自动显示三列
AB
g-3
网格间距
同时设置横向和纵向间距
响应式
col-12 col-md-6
响应式栏
手机全宽，md 以上一半宽度
透明度与可见性
调整元素透明度、溢出方式和可见状态。
100%
opacity-100
完全不透明
正常显示元素
75%
opacity-75
75% 透明度
稍微降低视觉强调
50%
opacity-50
50% 透明度
显示禁用或次要状态
25%
opacity-25
25% 透明度
非常淡的元素效果
这是一段很长很长很长很长的内容
overflow-hidden
隐藏溢出
裁切超出容器的内容
前面 隐藏文字 后面
invisible
不可见
隐藏元素但仍然保留原来的空间