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 |
将聚集的项目 “围绕” 对齐 | 试一试 | 弹性布局 |
.align-content-*-around |
在不同屏幕上将聚集的项目 “围绕” 对齐 | 试一试 | 弹性布局 |
.align-content-center |
将聚集的项目居中对齐 | 试一试 | 弹性布局 |
.align-content-*-center |
在不同屏幕上将聚集的项目居中对齐 | 试一试 | 弹性布局 |
.align-content-end |
将聚集的项目对齐到末尾 | 试一试 | 弹性布局 |
.align-content-*-end |
在不同屏幕上将聚集的项目对齐到末尾 | 试一试 | 弹性布局 |
.align-content-start |
从开始位置将聚集的项目对齐 | 试一试 | 弹性布局 |
.align-content-*-start |
在不同屏幕上从开始位置将聚集的项目对齐 | 试一试 | 弹性布局 |
.align-content-stretch |
拉伸聚集的项目 | 试一试 | 弹性布局 |
.align-content-*-stretch |
在不同屏幕上拉伸聚集的项目 | 试一试 | 弹性布局 |
.align-items-start |
从开始位置对齐单行项目 | 试一试 | 弹性布局 |
.align-items-*-start |
在不同屏幕上从开始位置对齐单行项目 | 试一试 | 弹性布局 |
.align-items-end |
将单行项目对齐到末尾 | 试一试 | 弹性布局 |
.align-items-*-end |
在不同屏幕上将单行项目对齐到末尾 | 试一试 | 弹性布局 |
.align-items-center |
将单行项目居中对齐 | 试一试 | 弹性布局 |
.align-items-*-center |
在不同屏幕上将单行项目居中对齐 | 试一试 | 弹性布局 |
.align-items-baseline |
将单行项目对齐到基线 | 试一试 | 弹性布局 |
.align-items-*-baseline |
在不同屏幕上将单行项目对齐到基线 | 试一试 | 弹性布局 |
.align-items-stretch |
拉伸单行项目 | 试一试 | 弹性布局 |
.align-items-*-stretch |
在不同屏幕上拉伸单行项目 | 试一试 | 弹性布局 |
.align-self-start |
从开始位置对齐弹性项目 | 试一试 | 弹性布局 |
.align-self-*-start |
在不同屏幕上从开始位置对齐弹性项目 | 试一试 | 弹性布局 |
.align-self-end |
将弹性项目对齐到末尾 | 试一试 | 弹性布局 |
.align-self-*-end |
在不同屏幕上将弹性项目对齐到末尾 | 试一试 | 弹性布局 |
.align-self-center |
将弹性项目居中对齐 | 试一试 | 弹性布局 |
.align-self-*-center |
在不同屏幕上将弹性项目居中对齐 | 试一试 | 弹性布局 |
.align-self-baseline |
将弹性项目对齐到基线 | 试一试 | 弹性布局 |
.align-self-*-baseline |
在不同屏幕上将弹性项目对齐到基线 | 试一试 | 弹性布局 |
.align-self-stretch |
拉伸弹性项目 | 试一试 | 弹性布局 |
.align-self-*-stretch |
在不同屏幕上拉伸弹性项目 | 试一试 | 弹性布局 |
.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 项目 | 试一试 | 弹性布局 |
.d-*-flex |
在特定屏幕尺寸上创建一个 flexbox 容器 | 试一试 | 弹性布局 |
.d-inline-flex |
创建一个内联 flexbox 容器 | 试一试 | 弹性布局 |
.d-*-inline-flex |
在特定屏幕尺寸上创建一个内联 flexbox 容器 | 试一试 | 弹性布局 |
.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-*-column |
在不同屏幕尺寸上垂直显示弹性项目 | 试一试 | 弹性布局 |
.flex-column-reverse |
反向垂直显示弹性项目 | 试一试 | 弹性布局 |
.flex-*-column-reverse |
在不同屏幕尺寸上反向垂直显示弹性项目 | 试一试 | 弹性布局 |
.flex-fill |
用于弹性项目，强制其/它们成为等宽列 | 试一试 | 弹性布局 |
.flex-*-fill |
强制弹性项目在不同屏幕上具有等宽 | 试一试 | 弹性布局 |
.flex-grow-0|1 |
用于单个弹性项目，以占用可用空间的剩余部分 | 试一试 | 弹性布局 |
.flex-nowrap |
不要换行弹性项目 | 试一试 | 弹性布局 |
.flex-*-nowrap |
不要在不同屏幕上换行项目 | 试一试 | 弹性布局 |
.flex-shrink-0|1 |
用于单个弹性项目，如果需要，将其缩小 | 弹性布局 | |
.flex-row |
水平显示弹性项目（并排） | 试一试 | 弹性布局 |
.flex-*-row |
在特定屏幕尺寸上水平显示弹性项目 | 试一试 | 弹性布局 |
.flex-row-reverse |
右对齐并水平显示弹性项目 | 试一试 | 弹性布局 |
.flex-*-row-reverse |
在特定屏幕尺寸上右对齐并水平显示弹性项目 | 试一试 | 弹性布局 |
.flex-wrap |
换行弹性项目 | 试一试 | 弹性布局 |
.flex-*-wrap |
在不同屏幕上换行项目 | 试一试 | 弹性布局 |
.flex-wrap-reverse |
换行弹性项目，以反向顺序 | 试一试 | 弹性布局 |
.flex-*-wrap-reverse |
在不同屏幕上反向顺序换行弹性项目 | 试一试 | 弹性布局 |
.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 |
用于输入、textarea 和 select 元素，以跨越页面的整个宽度并使它们响应 | 试一试 | 表单 |
.form-control-file |
向类型为“文件”的输入字段添加 display:block 和 width:100% |
试一试 | 表单 |
.form-control-lg |
大型表单控件 | 试一试 | 表单 |
.form-control-plaintext |
将表单控件样式化为纯文本 | 试一试 | 表单 |
.form-control-range |
向类型为“范围”的输入字段添加 display:block 和 width:100% |
试一试 | 表单 |
.form-control-sm |
小型表单控件 | 试一试 | 表单 |
.form-group |
表单输入和标签的容器 | 试一试 | 表单 |
.form-inline |
使 <>form> 左对齐，并带有内联块控件（这仅适用于宽度至少为 768 像素的视口中的表单） | 试一试 | 表单 |
.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-fluid |
创建没有圆角的全宽巨型横幅（灰色填充标题） | 试一试 | 巨型横幅 |
.justify-content-* |
对齐弹性项目从开始，在结束，居中，在之间和“周围” | 试一试 | 弹性布局 |
.justify-content-*-around |
在不同屏幕尺寸上“周围”对齐弹性项目 | 试一试 | 弹性布局 |
.justify-content-*-between |
在不同屏幕尺寸上“之间”对齐弹性项目 | 试一试 | 弹性布局 |
.justify-content-*-center |
在不同屏幕尺寸上将弹性项目居中 | 试一试 | 弹性布局 |
.justify-content-*-end |
在不同屏幕尺寸上将弹性项目对齐到末尾 | 试一试 | 弹性布局 |
.justify-content-*-start |
在不同屏幕尺寸上从开始对齐弹性项目 | 试一试 | 弹性布局 |
.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 |
将所有列表项放置在单行上（与 .list-inline-item 一起使用，在每个 <li> 元素上） |
试一试 | 排版 |
.list-inline-item |
将所有列表项放置在单行上（与 .list-inline 一起使用，在父 <ul> 元素上） |
试一试 | 排版 |
.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 容器内用于导航链接的容器 | 试一试 | 导航栏 |
.navbar-brand |
添加到导航栏内的链接或标题元素，以表示徽标或标题 | 试一试 | 导航栏 |
.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> 元素可滚动（max-height 为 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 类参考.
