Bootstrap 4 类 参考
所有 Bootstrap 4 类完整列表
Bootstrap 4 CSS 类完整列表，附带说明和示例
| 类 | 描述 | 示例 | 类别 |
|---|---|---|---|
.active |
为 **导航栏** 中的活动链接添加白色文本颜色。 | 试一试 | 导航栏 |
.active |
为列表组中的活动 **列表项** 添加蓝色背景色 | 试一试 | 列表组 |
.active |
添加深蓝色背景色以模拟“按下”的 **按钮** | 试一试 | 按钮 |
.active |
为下拉菜单中的活动 **下拉菜单项** 添加蓝色背景色 | 试一试 | 下拉菜单 |
.active |
为 **分页** 链接添加蓝色背景色（以突出显示当前页面） | 试一试 | 分页 |
.active |
显示/显示当前的 **轮播** 项目 | 试一试 | 轮播 |
.alert |
创建提醒消息框 | 试一试 | 提醒框 |
.alert-danger |
红色提醒。表示危险或可能产生负面影响的操作 | 试一试 | 提醒框 |
.alert-dark |
深色提醒。深灰色提醒框 | 试一试 | 提醒框 |
.alert-dismissible |
表示一个可关闭的提醒框。与 .close 类一起使用，此类用于关闭提醒框（添加了额外的内边距） |
试一试 | 提醒框 |
.alert-heading |
对指定元素添加 color:inherit |
试一试 | 提醒框 |
.alert-info |
青色提醒。表示一个中性信息性更改或操作 | 试一试 | 提醒框 |
.alert-light |
浅色提醒。浅灰色提醒框 | 试一试 | 提醒框 |
.alert-link |
用于提醒框内的链接，以提供匹配的颜色链接 | 试一试 | 提醒框 |
.alert-primary |
蓝色提醒。表示一个重要操作 | 试一试 | 提醒框 |
.alert-secondary |
灰色提醒。表示一个“不太重要”的操作 | 试一试 | 提醒框 |
.alert-success |
绿色提醒。表示一个成功或正面的操作 | 试一试 | 提醒框 |
.alert-warning |
黄色提醒。表示此操作应谨慎进行 | 试一试 | 提醒框 |
.align-baseline |
元素与父元素的基线对齐。这是默认值 | 试一试 | 实用工具 |
.align-bottom |
元素与行中最低的元素对齐 | 试一试 | 实用工具 |
.align-middle |
元素位于父元素的中间 | 试一试 | 实用工具 |
.align-top |
元素与行中最高元素的顶部对齐 | 试一试 | 实用工具 |
.align-text-top |
元素与父元素字体的顶部对齐 | 试一试 | 实用工具 |
.align-text-bottom |
元素与父元素字体的底部对齐 | 试一试 | 实用工具 |
.align-content-around |
“围绕”对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-*-around |
在不同屏幕上“围绕”对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-center |
居中对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-*-center |
在不同屏幕上居中对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-end |
在末尾对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-*-end |
在不同屏幕上在末尾对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-start |
从开头对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-*-start |
在不同屏幕上从开头对齐收集的项目 | 试一试 | Flex 布局 |
.align-content-stretch |
拉伸收集的项目 | 试一试 | Flex 布局 |
.align-content-*-stretch |
在不同屏幕上拉伸收集的项目 | 试一试 | Flex 布局 |
.align-items-start |
从开头对齐单行项目 | 试一试 | Flex 布局 |
.align-items-*-start |
在不同屏幕上从开头对齐单行项目 | 试一试 | Flex 布局 |
.align-items-end |
在末尾对齐单行项目 | 试一试 | Flex 布局 |
.align-items-*-end |
在不同屏幕上在末尾对齐单行项目 | 试一试 | Flex 布局 |
.align-items-center |
居中对齐单行项目 | 试一试 | Flex 布局 |
.align-items-*-center |
在不同屏幕上居中对齐单行项目 | 试一试 | Flex 布局 |
.align-items-baseline |
在基线对齐单行项目 | 试一试 | Flex 布局 |
.align-items-*-baseline |
在不同屏幕上在基线对齐单行项目 | 试一试 | Flex 布局 |
.align-items-stretch |
拉伸单行项目 | 试一试 | Flex 布局 |
.align-items-*-stretch |
在不同屏幕上拉伸单行项目 | 试一试 | Flex 布局 |
.align-self-start |
从开头对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-*-start |
在不同屏幕上从开头对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-end |
在末尾对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-*-end |
在不同屏幕上在末尾对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-center |
居中对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-*-center |
在不同屏幕上居中对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-baseline |
在基线对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-*-baseline |
在不同屏幕上在基线对齐一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-stretch |
拉伸一个 flex 项目 | 试一试 | Flex 布局 |
.align-self-*-stretch |
在不同屏幕上拉伸一个 flex 项目 | 试一试 | Flex 布局 |
.badge |
创建圆形徽章（灰色圆圈 - 通常用作数字指示器） | 试一试 | 徽章 |
.badge-danger |
红色徽章。表示危险或可能产生负面影响的操作 | 试一试 | 徽章 |
.badge-dark |
深色徽章。深灰色提醒框 | 试一试 | 徽章 |
.badge-info |
青色徽章。表示一个中性信息性更改或操作 | 试一试 | 徽章 |
.badge-light |
浅色徽章。浅灰色提醒框 | 试一试 | 徽章 |
.badge-pill |
使徽章更圆 | 试一试 | 徽章 |
.badge-primary |
蓝色徽章。表示一个重要操作 | 试一试 | 徽章 |
.badge-secondary |
灰色徽章。表示一个“不太重要”的操作 | 试一试 | 徽章 |
.badge-success |
绿色徽章。表示一个成功或正面的操作 | 试一试 | 徽章 |
.badge-warning |
黄色徽章。表示此操作应谨慎进行 | 试一试 | 徽章 |
.bg-danger |
为元素添加红色背景色。表示危险或负面操作 | 试一试 | 颜色 |
.bg-dark |
为元素添加深灰色背景色 | 试一试 | 颜色 |
.bg-info |
为元素添加青色背景色。表示一些信息 | 试一试 | 颜色 |
.bg-light |
为元素添加浅灰色背景色 | 试一试 | 颜色 |
.bg-primary |
为元素添加蓝色背景色。表示一些重要的内容 | 试一试 | 颜色 |
.bg-secondary |
为元素添加灰色背景色。表示一个“不太重要”的操作 | 试一试 | 颜色 |
.bg-success |
为元素添加绿色背景色。表示成功或正面的操作 | 试一试 | 颜色 |
.bg-warning |
为元素添加黄色/橙色背景色。表示警告或负面操作 | 试一试 | 颜色 |
.blockquote |
样式化来自其他来源的引用的块内容（添加更大的字号 (1.25rem)） | 试一试 | 排版 |
.blockquote-footer |
样式化引用块内的来源标题（浅灰色文本，有缩进） | 试一试 | 排版 |
.border |
为元素添加边框 | 试一试 | 实用工具 |
.border-bottom-0 |
移除元素的底部边框 | 试一试 | 实用工具 |
.border-danger |
为元素添加红色边框（表示危险） | 试一试 | 实用工具 |
.border-dark |
为元素添加深色边框 | 试一试 | 实用工具 |
.border-info |
为元素添加青色边框（表示信息） | 试一试 | 实用工具 |
.border-left-0 |
移除元素的左边框 | 试一试 | 实用工具 |
.border-light |
为元素添加浅灰色边框 | 试一试 | 实用工具 |
.border-primary |
为元素添加蓝色边框 | 试一试 | 实用工具 |
.border-right-0 |
移除元素的右边框 | 试一试 | 实用工具 |
.border-top-0 |
移除元素的顶部边框 | 试一试 | 实用工具 |
.border-secondary |
为元素添加灰色边框 | 试一试 | 实用工具 |
.border-success |
为元素添加绿色边框（表示成功） | 试一试 | 实用工具 |
.border-warning |
为元素添加橙色边框（表示警告） | 试一试 | 实用工具 |
.border-white |
为元素添加白色边框 | 试一试 | 实用工具 |
.border-0 |
移除元素的全部边框 | 试一试 | 实用工具 |
.breadcrumb |
分页。表示当前页面在导航层级中的位置 | 试一试 | 分页 |
.breadcrumb-item |
样式化面包屑导航中的列表项或链接 | 试一试 | 分页 |
.btn |
创建基本按钮（灰色背景和圆角） | 试一试 | 按钮 |
.btn-block |
创建块级按钮，跨越父元素的整个宽度 | 试一试 | 按钮 |
.btn-dark |
深灰色按钮 | 试一试 | 按钮 |
.btn-danger |
红色按钮。表示危险或负面操作 | 试一试 | 按钮 |
.btn-group |
将按钮组合在一起，显示在同一行 | 试一试 | 按钮组 |
.btn-group-lg |
大型按钮组（使按钮组中的所有按钮变大 - 增加字号和内边距） | 试一试 | 按钮组 |
.btn-group-sm |
小型按钮组（使按钮组中的所有按钮变小） | 试一试 | 按钮组 |
.btn-group-vertical |
使按钮组垂直堆叠 | 试一试 | 按钮组 |
.btn-info |
青色按钮。表示一个中性信息性更改或操作 | 试一试 | 按钮 |
.btn-light |
浅灰色按钮 | 试一试 | 按钮 |
.btn-link |
使按钮看起来像链接（获得按钮行为） | 试一试 | 按钮 |
.btn-lg |
大型按钮 | 试一试 | 按钮 |
.btn-outline-dark |
深灰色边框/轮廓按钮 | 试一试 | 按钮 |
.btn-outline-danger |
红色边框/轮廓按钮。表示危险或负面操作 | 试一试 | 按钮 |
.btn-outline-info |
青色边框/轮廓按钮。表示一个中性信息性更改或操作 | 试一试 | 按钮 |
.btn-outline-light |
浅灰色边框/轮廓按钮 | 试一试 | 按钮 |
.btn-outline-primary |
蓝色边框/轮廓按钮。 | 试一试 | 按钮 |
.btn-outline-secondary |
灰色边框/轮廓按钮。表示一个“不太重要”的操作 | 试一试 | 按钮 |
.btn-outline-success |
绿色边框/轮廓按钮。表示成功或正面的操作 | 试一试 | 按钮 |
.btn-outline-warning |
橙色边框/轮廓按钮。表示警告或负面操作 | 试一试 | 按钮 |
.btn-primary |
蓝色按钮。表示一些重要的内容 | 试一试 | 按钮 |
.btn-sm |
小型按钮 | 试一试 | 按钮 |
.btn-secondary |
灰色按钮。表示一个“不太重要”的操作 | 试一试 | 按钮 |
.btn-success |
绿色按钮。表示成功或正面的操作 | 试一试 | 按钮 |
.btn-toolbar |
将按钮组组合成按钮工具栏，用于更复杂的组件 | 试一试 | 按钮组 |
.btn-warning |
橙色按钮。表示警告或负面操作 | 试一试 | 按钮 |
.card |
创建卡片 | 试一试 | 卡片 |
.card-body |
卡片内容的容器 | 试一试 | 卡片 |
.card-columns |
创建卡片拼贴式网格的容器 | 试一试 | 卡片 |
.card-danger |
为卡片添加红色背景色。表示危险或负面操作 | 试一试 | 卡片 |
.card-dark |
为卡片添加灰色背景色 | 试一试 | 卡片 |
.card-deck |
创建具有相等高度和宽度的卡片网格的容器 | 试一试 | 卡片 |
.card-footer |
卡片页脚 | 试一试 | 卡片 |
.card-group |
创建具有相等高度和宽度的卡片网格的容器，**无侧边距** | 试一试 | 卡片 |
.card-header |
卡片标题 | 试一试 | 卡片 |
.card-header-tabs |
样式化卡片标题中的导航标签 | 试一试 | 卡片 |
.card-header-pills |
样式化卡片标题中的导航药丸 | 试一试 | 卡片 |
.card-img-bottom |
将图片放置在卡片底部 | 试一试 | 卡片 |
.card-img-overlay |
将图片变成卡片背景。常用于在图片上添加文本 | 试一试 | 卡片 |
.card-img-top |
将图片放置在卡片顶部 | 试一试 | 卡片 |
.card-info |
为卡片添加青色背景色。表示一些信息 | 试一试 | 卡片 |
.card-light |
为卡片添加浅灰色背景色 | 试一试 | 卡片 |
.card-link |
为卡片内的任何链接添加蓝色以及悬停效果 | 试一试 | 卡片 |
.card-primary |
为卡片添加蓝色背景色。表示一些重要的内容 | 试一试 | 卡片 |
.card-secondary |
为卡片添加灰色背景色。表示一些“不太重要”的内容 | 试一试 | 卡片 |
.card-subtitle |
.card-subtitle 用于 .card-title 之后，并向元素添加以下内容：margin-top: -.375rem; margin-bottom: 0; |
试一试 | 卡片 |
.card-success |
为卡片添加绿色背景色。表示成功或正面的操作 | 试一试 | 卡片 |
.card-text |
用于移除 .card-body 中 p 元素作为最后一个（或唯一一个）子元素时的底部边距 |
试一试 | 卡片 |
.card-title |
为卡片内的任何标题元素添加标题 | 试一试 | 卡片 |
.card-warning |
为卡片添加黄色/橙色背景色。表示警告或负面操作 | 试一试 | 卡片 |
.carousel |
创建轮播（幻灯片） | 试一试 | 轮播 |
.carousel-caption |
为轮播中的每个幻灯片创建标题文本 | 试一试 | 轮播 |
.carousel-control-next |
“下一个”轮播/项目链接的容器 | 试一试 | 轮播 |
.carousel-control-next-icon |
与 .carousel-control-next 一起使用，创建“下一个”图标/按钮（向右箭头） |
试一试 | 轮播 |
.carousel-control-prev |
“上一个”轮播/项目链接的容器 | 试一试 | 轮播 |
.carousel-control-prev-icon |
与 .carousel-control-prev 一起使用，创建“上一个”图标/按钮（向左箭头） |
试一试 | 轮播 |
.carousel-indicators |
在每个幻灯片的底部添加小圆点/指示器（表示轮播中有多少张幻灯片，以及用户当前正在查看的幻灯片） | 试一试 | 轮播 |
.carousel-inner |
幻灯片项目的容器 | 试一试 | 轮播 |
.carousel-item |
指定每个幻灯片的内容 | 试一试 | 轮播 |
.clearfix |
清除浮动 | 试一试 | 实用工具 |
.close |
样式化关闭图标。这通常用于提醒框和模态框。通常与 × 符号结合使用以创建实际的图标（一个更好看的“x”）。它默认浮动到右侧 | 试一试 | 实用工具 |
.col-auto |
让表单列根据内容自动调整大小 | 试一试 | 表单 |
.col-* |
为超小设备创建列布局（**以及更大/所有设备**，如果未与其他列类组合）。* 可以是 1 到 12 之间的数字 | 试一试 | 网格系统 |
.col-sm-* |
为小型设备创建列布局（**以及更大**，如果未与其他列类组合）。* 可以是 1 到 12 之间的数字 | 试一试 | 网格系统 |
.col-md-* |
为中型设备创建列布局（**以及更大**，如果未与其他列类组合）。* 可以是 1 到 12 之间的数字 | 试一试 | 网格系统 |
.col-lg-* |
为大型设备创建列布局（**以及更大**，如果未与其他列类组合）。* 可以是 1 到 12 之间的数字 | 试一试 | 网格系统 |
.col-xl-* |
为超大设备创建列布局。* 可以是 1 到 12 之间的数字 | 试一试 | 网格系统 |
.collapse |
表示可折叠内容 - 可按需隐藏或显示 | 试一试 | 折叠 |
.collapse show |
默认显示可折叠内容 | 试一试 | 折叠 |
.container |
固定宽度的容器，宽度由屏幕大小决定。左右边距相等。 | 试一试 | 容器 |
.container-fluid |
跨越屏幕全宽的容器 | 试一试 | 容器 |
.container-* |
响应式容器 | 试一试 | 容器 |
.custom-checkbox |
自定义复选框的包装器/容器 | 试一试 | 自定义表单 |
.custom-control |
自定义表单的包装器/容器 | 试一试 | 自定义表单 |
.custom-control-input |
自定义表单控件 | 试一试 | 自定义表单 |
.custom-control-inline |
内联（水平 - 并排）自定义表单控件 | 试一试 | 自定义表单 |
.custom-control-label |
自定义标签，与自定义表单控件一起使用时 | 试一试 | 自定义表单 |
.custom-file |
自定义文件上传 | 试一试 | 自定义表单 |
.custom-file-input |
自定义文件上传 | 试一试 | 自定义表单 |
.custom-file-label |
自定义文件标签 | 试一试 | 自定义表单 |
.custom-radio |
自定义单选按钮的包装器/容器 | 试一试 | 自定义表单 |
.custom-range |
自定义范围控件 | 试一试 | 自定义表单 |
.custom-select |
自定义选择菜单 | 试一试 | 自定义表单 |
.custom-select-lg |
大型自定义选择菜单 | 试一试 | 自定义表单 |
.custom-select-sm |
小型自定义选择菜单 | 试一试 | 自定义表单 |
.custom-switch |
自定义切换开关 | 试一试 | 自定义表单 |
.disabled |
禁用 **按钮**（添加不透明度和悬停时的“禁止停车标志”图标） | 试一试 | 按钮 |
.disabled |
禁用 **下拉菜单** 项（添加灰色文本颜色和悬停时的“禁止停车标志”图标） | 试一试 | 下拉菜单 |
.disabled |
禁用 **分页** 链接（无法点击 - 添加灰色文本颜色和悬停时的“禁止停车标志”图标） | 试一试 | 分页 |
.disabled |
禁用列表组中的 **列表** 项（无法点击 - 添加浅灰色颜色并移除列表项链接上的悬停效果） | 试一试 | 列表组 |
.dropdown |
创建可切换菜单，允许用户从预定义列表中选择一个值 | 试一试 | 下拉菜单 |
.dropdown-divider |
用于使用细水平边框分隔下拉菜单中的链接 | 试一试 | 下拉菜单 |
.dropdown-header |
用于在下拉菜单中添加标题 | 试一试 | 下拉菜单 |
.dropdown-item |
创建下拉菜单项（添加到 .dropdown-menu 中的链接或按钮） | 试一试 | 下拉菜单 |
.dropdown-item-text |
用于向下拉菜单项添加纯文本，或用于链接以获得默认链接样式 | 试一试 | 下拉菜单 |
.dropdown-menu |
添加下拉菜单容器的默认样式 | 试一试 | 下拉菜单 |
.dropdown-menu-right |
右对齐下拉菜单 | 试一试 | 下拉菜单 |
.dropdown-toggle |
用于应该隐藏和显示（切换）下拉菜单的按钮 | 试一试 | 下拉菜单 |
.dropleft |
左对齐下拉菜单 | 试一试 | 下拉菜单 |
.dropright |
右对齐下拉菜单 | 试一试 | 下拉菜单 |
.dropup |
表示向上展开的菜单（向上而不是向下） | 试一试 | 下拉菜单 |
.d-block |
创建块级元素（添加 display:block） |
试一试 | 实用工具 |
.d-*-block |
在特定屏幕宽度上创建块级元素 | 试一试 | 实用工具 |
.d-inline |
使元素内联 | 试一试 | 实用工具 |
.d-*-inline |
在特定屏幕尺寸上使元素内联 | 试一试 | 实用工具 |
.d-inline-block |
使元素成为内联块 | 试一试 | 实用工具 |
.d-*-inline-block |
在特定屏幕尺寸上使元素成为内联块 | 试一试 | 实用工具 |
.d-flex |
创建 flexbox 容器并将直接子元素转换为 flex 项目 | 试一试 | Flex 布局 |
.d-*-flex |
在特定屏幕尺寸上创建 flexbox 容器 | 试一试 | Flex 布局 |
.d-inline-flex |
创建内联 flexbox 容器 | 试一试 | Flex 布局 |
.d-*-inline-flex |
在特定屏幕尺寸上创建内联 flexbox 容器 | 试一试 | Flex 布局 |
.d-none |
隐藏元素 | 试一试 | 实用工具 |
.d-*-none |
在特定屏幕尺寸上隐藏元素 | 试一试 | 实用工具 |
.d-table |
使元素显示为表格 | 试一试 | 实用工具 |
.d-*-table |
在特定屏幕尺寸上使元素显示为表格 | 试一试 | 实用工具 |
.d-table-cell |
使元素显示为表格单元格 | 试一试 | 实用工具 |
.d-*-table-cell |
在特定屏幕尺寸上使元素显示为表格单元格 | 试一试 | 实用工具 |
.d-table-row |
使元素显示为表格行 | 试一试 | 实用工具 |
.d-*-table-row |
在特定屏幕尺寸上使元素显示为表格行 | 试一试 | 实用工具 |
.embed-responsive |
嵌入式内容的容器。使视频或幻灯片在任何设备上都能正确缩放 | 试一试 | 图片 |
.embed-responsive-16by9 |
嵌入式内容的容器。创建 16:9 宽高比的嵌入式内容 | 试一试 | 图片 |
.embed-responsive-3by4 |
嵌入式内容的容器。创建 3:4 宽高比的嵌入式内容 | 试一试 | 图片 |
.embed-responsive-item |
用于 .embed-responsive 内部。使视频能很好地缩放到父元素 |
试一试 | 图片 |
.fade |
关闭提醒框时添加淡入淡出效果 | 试一试 | 提醒框 |
.fade |
显示标签/药丸内容时添加淡入淡出效果 | 试一试 | 导航 |
.fade |
打开模态框时添加淡入淡出效果 | 试一试 | 模态框 |
.fixed-bottom |
使元素固定在屏幕底部（粘性/固定） | 试一试 | 实用工具 |
.fixed-top |
使元素固定在屏幕顶部（粘性/固定） | 试一试 | 实用工具 |
.flex-column |
垂直显示 flex 项目 | 试一试 | Flex 布局 |
.flex-*-column |
在不同屏幕尺寸上垂直显示 flex 项目 | 试一试 | Flex 布局 |
.flex-column-reverse |
反向垂直显示 flex 项目 | 试一试 | Flex 布局 |
.flex-*-column-reverse |
在不同屏幕尺寸上反向垂直显示 flex 项目 | 试一试 | Flex 布局 |
.flex-fill |
用于 flex 项目，强制它们成为等宽列 | 试一试 | Flex 布局 |
.flex-*-fill |
在不同屏幕上强制 flex 项目成为等宽 | 试一试 | Flex 布局 |
.flex-grow-0|1 |
用于单个 flex 项目，使其占据剩余的可用空间 | 试一试 | Flex 布局 |
.flex-nowrap |
不换行 flex 项目 | 试一试 | Flex 布局 |
.flex-*-nowrap |
在不同屏幕上不换行项目 | 试一试 | Flex 布局 |
.flex-shrink-0|1 |
用于单个 flex 项目，在必要时缩小它 | Flex 布局 | |
.flex-row |
水平显示 flex 项目（并排） | 试一试 | Flex 布局 |
.flex-*-row |
在特定屏幕尺寸上水平显示 flex 项目 | 试一试 | Flex 布局 |
.flex-row-reverse |
右对齐并水平显示 flex 项目 | 试一试 | Flex 布局 |
.flex-*-row-reverse |
在特定屏幕尺寸上右对齐并水平显示 flex 项目 | 试一试 | Flex 布局 |
.flex-wrap |
换行 flex 项目 | 试一试 | Flex 布局 |
.flex-*-wrap |
在不同屏幕上换行项目 | 试一试 | Flex 布局 |
.flex-wrap-reverse |
反向换行 flex 项目 | 试一试 | Flex 布局 |
.flex-*-wrap-reverse |
在不同屏幕上反向换行 flex 项目 | 试一试 | Flex 布局 |
.float-left |
将元素浮动到左侧 | 试一试 | 实用工具 |
.float-*-left |
在不同屏幕上将元素浮动到左侧 | 试一试 | 实用工具 |
.float-none |
移除元素的浮动 | 试一试 | 实用工具 |
.float-right |
将元素浮动到右侧 | 试一试 | 实用工具 |
.float-*-right |
在不同屏幕上将元素浮动到左侧 | 试一试 | 实用工具 |
.font-italic |
斜体 文本 | 试一试 | 排版 |
.font-weight-bold |
粗体 文本 | 试一试 | 排版 |
.font-weight-bolder |
更粗的 文本 (font-weight:bolder) | 试一试 | 排版 |
.font-weight-light |
纤细字体文本 (font-weight:300) | 试一试 | 排版 |
.font-weight-lighter |
更纤细字体文本 (font-weight:lighter) | 试一试 | 排版 |
.font-weight-normal |
正常文本 (font-weight:400) | 试一试 | 排版 |
.form-check |
复选框的容器。添加适当的内边距 | 试一试 | 表单 |
.form-check-inline |
使复选框显示在同一行（水平） | 试一试 | 表单 |
.form-check-input |
样式化具有适当边距的复选框 | 试一试 | 表单 |
.form-check-label |
确保与复选框一起使用的标签具有适当的边距 | 试一试 | 表单 |
.form-control |
用于 input、textarea 和 select 元素，使其跨越页面的整个宽度并保持响应性 | 试一试 | 表单 |
.form-control-file |
向 type="file" 的输入字段添加 display:block 和 width:100% |
试一试 | 表单 |
.form-control-lg |
大型表单控件 | 试一试 | 表单 |
.form-control-plaintext |
将表单控件样式化为纯文本 | 试一试 | 表单 |
.form-control-range |
向 type="range" 的输入字段添加 display:block 和 width:100% |
试一试 | 表单 |
.form-control-sm |
小型表单控件 | 试一试 | 表单 |
.form-group |
表单输入和标签的容器 | 试一试 | 表单 |
.form-inline |
使 <form> 左对齐，具有内联块控件（这仅适用于视口宽度至少为 768px 的表单） | 试一试 | 表单 |
.form-row |
响应式列的容器（比 .row 的左右边距更小/覆盖默认的列间距） |
试一试 | 表单 |
.h1 - .h6 |
使元素看起来像具有所选类（h1-h6）的标题 | 试一试 | 排版 |
.h-25 |
将元素的高度设置为 25% | 试一试 | 实用工具 |
.h-50 |
将元素的高度设置为 50% | 试一试 | 实用工具 |
.h-75 |
将元素的高度设置为 75% | 试一试 | 实用工具 |
.h-100 |
将元素的高度设置为 100% | 试一试 | 实用工具 |
.img-fluid |
响应式图片（添加 max-width:100% 和 height:auto） | 试一试 | 图片 |
.img-thumbnail |
将图片塑造成缩略图（细浅灰色边框） | 试一试 | 图片 |
.initialism |
在 <abbr> 元素中显示文本，字号稍小 |
试一试 | 排版 |
.input-group |
容器，通过在输入字段前面或后面添加图标、文本或按钮作为“帮助文本”来增强输入 | 试一试 | 输入组 |
.input-group-append |
输入组容器，用于在输入字段后面添加帮助文本 | 试一试 | 输入组 |
.input-group-lg |
大型输入组 | 试一试 | 输入组 |
.input-group-prepend |
输入组容器，用于在输入字段前面添加帮助文本 | 试一试 | 输入组 |
.input-group-sm |
小型输入组 | 试一试 | 输入组 |
.input-group-text |
样式化输入组中的指定帮助文本 | 试一试 | 输入组 |
.input-lg |
大型输入字段 | 试一试 | 输入尺寸 |
.input-sm |
小型输入字段 | 试一试 | 输入尺寸 |
.invalid-feedback |
创建自定义验证消息，用于已验证的表单（红色文本颜色） | 试一试 | 表单 |
.invalid-tooltip |
创建自定义验证消息，用于已验证的表单（红色工具提示） | 试一试 | 表单 |
.invisible |
使元素不可见 | 试一试 | 实用工具 |
.is-invalid |
验证表单元素（为输入字段添加红色边框）。注意：适用于服务器端 | 试一试 | 表单 |
.is-valid |
验证表单元素（为输入字段添加绿色边框）。注意：适用于服务器端 | 试一试 | 表单 |
.jumbotron |
创建一个带内边距的灰色标题/框，带有圆角，并放大其中的文本字号。用于特别吸引某些特殊内容或信息 | 试一试 | Jumbotron |
.jumbotron-fluid |
创建全宽的 jumbotron（灰色带内边距的标题），无圆角 | 试一试 | Jumbotron |
.justify-content-* |
从**开始**、**结束**、**居中**、**之间**和“**周围**”对齐 flex 项目 | 试一试 | Flex 布局 |
.justify-content-*-around |
在不同屏幕尺寸上“围绕”对齐 flex 项目 | 试一试 | Flex 布局 |
.justify-content-*-between |
在不同屏幕尺寸上“之间”对齐 flex 项目 | 试一试 | Flex 布局 |
.justify-content-*-center |
在不同屏幕尺寸上居中对齐 flex 项目 | 试一试 | Flex 布局 |
.justify-content-*-end |
在不同屏幕尺寸上结束对齐 flex 项目 | 试一试 | Flex 布局 |
.justify-content-*-start |
在不同屏幕尺寸上从开始对齐 flex 项目 | 试一试 | Flex 布局 |
.lead |
增大段落的字号和行高 | 试一试 | 排版 |
.list-group |
为 <li> 元素创建带边框的列表组 |
试一试 | 列表组 |
.list-group-flush |
移除列表组中列表项的一些边框和圆角 | 试一试 | 列表组 |
.list-group-horizontal |
水平显示列表项而不是垂直显示（并排而不是堆叠） | 试一试 | 列表组 |
.list-group-horizontal-* |
在不同屏幕尺寸上水平显示列表项而不是垂直显示 | 试一试 | 列表组 |
.list-group-item |
添加到列表组中的每个 <li> 元素 |
试一试 | 列表组 |
.list-group-item-action |
添加到列表组内的链接，使其在悬停时突出显示（背景变暗） | 试一试 | 列表组 |
.list-group-item-danger |
列表组中列表项的红色背景色 | 试一试 | 列表组 |
.list-group-item-dark |
列表组中列表项的深灰色背景色 | 试一试 | 列表组 |
.list-group-item-info |
列表组中列表项的浅蓝色背景色 | 试一试 | 列表组 |
.list-group-item-light |
列表组中列表项的浅灰色背景色 | 试一试 | 列表组 |
.list-group-item-primary |
列表组中列表项的蓝色背景色 | 试一试 | 列表组 |
.list-group-item-success |
列表组中列表项的绿色背景色 | 试一试 | 列表组 |
.list-group-item-warning |
列表组中列表项的黄色背景色 | 试一试 | 列表组 |
.list-inline |
将所有列表项放在一行（与每个 <li> 元素上的 .list-inline-item 一起使用） |
试一试 | 排版 |
.list-inline-item |
将所有列表项放在一行（与父级 <ul> 元素上的 .list-inline 一起使用） |
试一试 | 排版 |
.list-unstyled |
从 <ul> 或 <ol> 列表移除所有默认的列表样式（项目符号、左外边距等） |
试一试 | 排版 |
.mark |
高亮文本：高亮文本 | 试一试 | 排版 |
.media |
将媒体对象与内容（如图片或视频）一起对齐（常用于博客文章中的评论等） | 试一试 | 媒体对象 |
.media-body |
媒体内容的容器 | 试一试 | 媒体对象 |
.modal |
标识内容为模态框并将其焦点转移到其中 | 试一试 | 模态框 |
.modal-body |
定义模态框主体的样式。在此处添加任何 HTML 标记（p、img 等） | 试一试 | 模态框 |
.modal-content |
样式化模态框（边框、背景色等）。在此内部，如果需要，添加模态框的标题、主体和页脚 | 试一试 | 模态框 |
.modal-dialog-centered |
垂直和水平居中模态框 | 试一试 | 模态框 |
.modal-dialog-scrollable |
在模态框内添加滚动条 | 试一试 | 模态框 |
.modal-footer |
模态框的页脚（通常包含一个操作按钮和一个关闭按钮） | 试一试 | 模态框 |
.modal-header |
模态框的标题（通常包含一个标题和一个关闭按钮） | 试一试 | 模态框 |
.modal-lg |
大型模态框（比默认宽度更宽） | 试一试 | 模态框 |
.modal-sm |
小型模态框（宽度较小） | 试一试 | 模态框 |
.modal-xl |
超大模态框 | 试一试 | 模态框 |
.m-# / m-*-# |
响应式外边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.mt-# / mt-*-# |
响应式顶部外边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.mb-# / mb-*-# |
响应式底部外边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.ml-# / ml-*-# |
响应式左外边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.mr-# / mr-*-# |
响应式右外边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.mx-# / mx-*-# |
响应式左右外边距自动（水平）类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.my-# / my-*-# |
响应式顶部和底部外边距自动（垂直）类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.mx-auto |
水平居中元素 | 试一试 | 实用工具 |
.nav nav-tabs |
创建标签页菜单 | 试一试 | 标签页 |
.nav nav-pills |
创建药丸菜单 | 试一试 | 标签页 |
.nav-justified |
使标签/药丸链接具有相等的宽度 | 试一试 | 标签页 |
.navbar |
创建导航栏 | 试一试 | 导航栏 |
.navbar-nav |
导航栏容器内的导航链接容器 | 试一试 | 导航栏 |
.navbar-brand |
添加到导航栏内的链接或标题元素，用以表示 Logo 或标题 | 试一试 | 导航栏 |
.navbar-collapse |
折叠导航栏（在手机和小平板电脑上隐藏，并替换为菜单/汉堡图标） | 试一试 | 导航栏 |
.navbar-expand-* |
响应式折叠类 - 在小型（sm）、中型（md）、大型（lg）或超大（xl）屏幕上垂直堆叠导航栏 | 试一试 | 导航栏 |
.navbar-dark |
为导航栏中的所有链接添加白色文本颜色 | 试一试 | 导航栏 |
.navbar-light |
为导航栏中的所有链接添加黑色文本颜色 | 试一试 | 导航栏 |
.navbar-text |
垂直对齐导航栏内所有非链接元素（确保适当的内边距） | 试一试 | 导航栏 |
.navbar-toggler |
样式化在小屏幕上打开导航栏的按钮。自动样式化为汉堡/三条线 | 试一试 | 导航栏 |
.nav-link |
用于样式化导航栏内的链接/锚点 | 试一试 | 导航栏 |
.nav-item |
用于样式化导航栏内的列表项 | 试一试 | 导航栏 |
.needs-validation |
为已提交的表单添加验证样式 | 试一试 | 表单 |
.no-gutters |
移除列的间距/额外空间 | 试一试 | 网格系统 |
.page-item |
样式化分页中的列表项 | 试一试 | 分页 |
.page-link |
样式化分页中的链接 | 试一试 | 分页 |
.pagination |
创建分页（当你的网站有很多页面时很有用） | 试一试 | 分页 |
.pagination-lg |
大型分页（每个分页链接的字号和内边距更大） | 试一试 | 分页 |
.pagination-sm |
小型分页（每个分页链接的字号和内边距更小） | 试一试 | 分页 |
.pre-scrollable |
使 <pre> 元素可滚动（最大高度 350px 并提供 y 轴滚动条） |
试一试 | 助手 |
.progress |
进度条的容器 | 试一试 | 进度条 |
.progress-bar |
创建进度条 | 试一试 | 进度条 |
.progress-bar-animated |
动画化进度条（与条纹一起使用） | 试一试 | 进度条 |
.progress-bar-striped |
为进度条添加条纹 | 试一试 | 进度条 |
.p-# / p-*-# |
响应式内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.pt-# / pt-*-# |
响应式顶部内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.pb-# / pb-*-# |
响应式底部内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.pl-# / pl-*-# |
响应式左内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.pr-# / pr-*-# |
响应式右内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.py-# / py-*-# |
响应式顶部和底部内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.px-# / px-*-# |
响应式左内边距和右内边距类。* 可以是 sm, md, lg 或 xl。# 可以是 0 到 5 之间的数字 | 试一试 | 实用工具 |
.rounded |
为元素添加圆角 | 试一试 | 实用工具 |
.rounded-bottom |
为元素的底部添加圆角 | 试一试 | 实用工具 |
.rounded-circle |
将元素塑造成圆形（不支持 IE8 及更早版本） | 试一试 | 实用工具 |
.rounded-left |
为元素的左侧添加圆角 | 试一试 | 实用工具 |
.rounded-right |
为元素的右侧添加圆角 | 试一试 | 实用工具 |
.rounded-top |
为元素的顶部添加圆角 | 试一试 | 实用工具 |
.rounded-0 |
移除元素的圆角 | 试一试 | 实用工具 |
.row |
响应式列的容器 | 试一试 | 网格系统 |
.row-cols-* |
设置应并排显示的列数 | 试一试 | 网格系统 |
.shadow |
为元素添加阴影 | 试一试 | 实用工具 |
.shadow-lg |
为元素添加大型阴影 | 试一试 | 实用工具 |
.shadow-none |
移除元素的阴影 | 试一试 | 实用工具 |
.shadow-sm |
为元素添加小型阴影 | 试一试 | 实用工具 |
.small |
在任何标题中创建较浅、次要的文本 | 试一试 | 排版 |
.spinner-border |
创建加载指示器/加载器 | 试一试 | 加载指示器 |
.spinner-border-sm |
创建更小的加载指示器/加载器 | 试一试 | 加载指示器 |
.spinner-grow |
创建一个“增长”的加载指示器/加载器 | 试一试 | 加载指示器 |
.spinner-grow-sm |
创建一个“增长”的更小的加载指示器/加载器 | 试一试 | 加载指示器 |
.sr-only |
隐藏所有设备上的元素，除了屏幕阅读器 | 试一试 | 实用工具 |
.sr-only-focusable |
隐藏所有设备上的元素，除了屏幕阅读器 | 试一试 | 实用工具 |
.sticky-top |
使元素在滚动**经过**后固定在页面**顶部** | 试一试 | 实用工具 |
.stretched-link |
添加到链接，使其包含的块（父元素）可点击（仅适用于 position:relative 的父元素） | 试一试 | 实用工具 |
.tab-content |
与 .tab-pane 一起使用，创建可切换/动态的标签页/药丸 |
试一试 | 标签页 |
.tab-pane |
与 .tab-content 一起使用，创建可切换/动态的标签页/药丸 |
试一试 | 标签页 |
.table |
为表格添加基本样式（内边距、底部边框等） | 试一试 | 表格 |
.table-active |
为**表格**行（<tr> 或表格单元格（<td>））添加灰色背景色（悬停时使用相同颜色） |
试一试 | 表格 |
.table-bordered |
为表格和单元格的所有侧面添加边框 | 试一试 | 表格 |
.table-borderless |
移除表格的边框 | 试一试 | 表格 |
.table-condensed |
将单元格内边距减半，使表格更紧凑 | 试一试 | 表格 |
.table-dark |
为表格添加黑色背景和白色文本 | 试一试 | 表格 |
.table-hover |
创建可悬停的表格（在表格行悬停时添加灰色背景色） | 试一试 | 表格 |
.table-responsive-* |
使表格响应式（在需要时添加水平滚动条）。默认情况下，滚动条会在小于 992px 宽度的屏幕上添加到表格（如果需要）。大于 992px 宽度的屏幕上没有区别。但是，你可以使用 sm|md|lg|xl 来决定何时根据屏幕宽度添加表格滚动条 | 试一试 | 表格 |
.table-striped |
为表格添加斑马条纹 | 试一试 | 表格 |
.text-break |
防止长文本破坏布局 | 试一试 | 排版 |
.text-capitalize |
表示大写文本 | 试一试 | 排版 |
.text-center |
文本居中对齐 | 试一试 | 排版 |
.text-*-center |
在不同屏幕上文本居中对齐 | 试一试 | 排版 |
.text-danger |
红色文本颜色。表示危险 | 试一试 | 颜色 |
.text-dark |
深灰色文本颜色 | 试一试 | 排版 |
.text-decoration-none |
移除链接的下划线 | 试一试 | 排版 |
.text-hide |
隐藏文本（有助于用背景图像替换元素的文本内容） | 试一试 | 排版 |
.text-info |
浅蓝色文本颜色。表示信息 | 试一试 | 颜色 |
.text-light |
浅灰色文本颜色 | 试一试 | 颜色 |
.text-justify |
表示两端对齐文本 | 试一试 | 排版 |
.text-left |
文本左对齐 | 试一试 | 排版 |
.text-*-left |
在不同屏幕上文本左对齐 | 试一试 | 排版 |
.text-lowercase |
将文本转换为小写 | 试一试 | 排版 |
.text-muted |
灰色文本颜色 | 试一试 | 颜色 |
.text-nowrap |
防止文本换行 | 试一试 | 排版 |
.text-primary |
蓝色文本颜色。表示一些重要的内容 | 试一试 | 颜色 |
.text-secondary |
灰色文本颜色。表示一些“不太重要”的内容 | 试一试 | 颜色 |
.text-reset |
重置文本或链接的颜色（继承自父元素的颜色） | 试一试 | 排版 |
.text-right |
文本右对齐 | 试一试 | 排版 |
.text-*-right |
在不同屏幕上右对齐文本 | 试一试 | 排版 |
.text-success |
绿色文本颜色。表示成功 | 试一试 | 颜色 |
.text-uppercase |
将文本转换为大写 | 试一试 | 排版 |
.text-warning |
黄色/橙色文本颜色。表示警告 | 试一试 | 颜色 |
.text-white |
白色文本颜色 | 试一试 | 颜色 |
.thead-dark |
为表格标题添加黑色背景色 | 试一试 | 表格 |
.thead-light |
为表格标题添加灰色背景色 | 试一试 | 表格 |
.toast |
创建一个通知（几秒后消失的提示框） | 试一试 | 通知 |
.toast-body |
通知正文 | 试一试 | 通知 |
.toast-header |
通知标题 | 试一试 | 通知 |
.valid-feedback |
创建自定义验证消息，用于已验证的表单（绿色文本颜色） | 试一试 | 表单 |
.valid-tooltip |
创建自定义验证消息，用于已验证的表单（绿色工具提示） | 试一试 | 表单 |
.visible |
使元素可见 | 试一试 | 实用工具 |
.was-validated |
为表单元素添加验证样式 | 试一试 | 表单 |
.w-25 |
将元素的宽度设置为 25% | 试一试 | 实用工具 |
.w-50 |
将元素的宽度设置为 50% | 试一试 | 实用工具 |
.w-75 |
将元素的宽度设置为 75% | 试一试 | 实用工具 |
.w-100 |
将元素的宽度设置为 100% | 试一试 | 实用工具 |
上表显示了所有可用的 Bootstrap 4 类。
提示：要查看所有 Bootstrap 3 类的完整列表，请访问我们的 所有 Bootstrap 3 CSS 类参考。
