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