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:blockwidth:100% 添加到 type="file" 的输入字段 测试一下 Forms
.form-control-lg 大型表单控件 测试一下 Forms
.form-control-plaintext 将表单控件样式化为纯文本 测试一下 Forms
.form-control-range display:blockwidth: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 类参考