一个完全免费的开发者资源

Bootstrap4类参考

❮之前 下一个❯

所有Bootstrap4类的完整列表

所有Bootstrap4 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
.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 创建一个圆形徽章（灰色圆圈-通常用作数字指示器） 试一试 徽章
.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 在blockquote内设置源标题的样式（带缩进的浅灰色文本） 试一试 排版
.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 绿色按钮。/td> 试一试 按钮
.btn-toolbar 将按钮组集合组合到按钮工具栏中，以实现更复杂的组件 试一试 按钮组
.btn-warning 橙色按钮。 试一试 按钮
.card 创建一张卡 试一试 卡片
.card-body 卡片内容的容器 试一试 卡片
.card-columns 容器以创建砖石般的卡片网格 试一试 卡片
.card-danger 为卡添加红色背景色。 试一试 卡片
.card-dark 为卡片添加灰色背景色 试一试 卡片
.card-deck 容器以创建高度和宽度相等的卡片网格 试一试 卡片
.card-footer 卡页脚 试一试 卡片
.card-group 容器以创建高度和宽度相等，没有侧边距的卡片网格 试一试 卡片
.card-header 卡header 试一试 卡片
.card-header-tabs 卡标题内的样式导航选项卡 试一试 卡片
.card-header-pills 在卡header内设置导航药丸的样式 试一试 卡片
.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; 底边距：0; 试一试 卡片
.card-success 为卡片添加绿色背景色。 试一试 卡片
.card-text 如果 a和p 元素是.card-body内的最后一个子元素（或唯一的子元素），则用于删除a和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 设置关闭图标的样式。这通常用于警报和模式。常与＆times;一起使用 符号以创建实际的图标（外观更好的" 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菜单内的链接或按钮） 试一试 下拉
.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-respond内部使用。很好地将视频缩放到父元素 试一试 图片
.fade 关闭警报框时增加褪色效果 试一试 警报信息
.fade 显示标签 试一试 导航
.fade 打开模式时添加淡入淡出效果 试一试 模态框
.fixed-bottom 使元素停留在屏幕底部（粘性/固定） 试一试 实用工具
.fixed-top 使元素停留在屏幕顶部（粘性/固定） 试一试 实用工具
.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 将元素浮动到左侧 试一试 实用工具
.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 用于输入，文本区域和选择元素以跨越页面的整个宽度并使它们响应 试一试 表单
.form-control-file 将display：block和width：100％添加到使用type =" file"输入的字段中 试一试 表单
.form-control-lg 大表格控制 试一试 表单
.form-control-plaintext 将表单控件设置为纯文本样式 试一试 表单
.form-control-range 将display：block和width：100％添加到类型为 type="range"的输入字段中 试一试 表单
.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 响应式图像（添加最大宽度：100％和高度：自动） 试一试 图片
.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-* 从头头，在尾，居中，中间和"前后"对齐 试一试 Flex
.justify-content-*-around 在不同屏幕尺寸上"对齐"柔性项目 试一试 Flex
.justify-content-*-between 在不同屏幕尺寸的"中间"对齐 试一试 Flex
.justify-content-*-center 在不同屏幕尺寸的居中对齐 试一试 Flex
.justify-content-*-end 在不同屏幕尺寸的尾对齐 试一试 Flex
.justify-content-*-start 从一开始就在不同屏幕尺寸上对齐 试一试 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-*-# margin。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.mt-# / mt-*-# margin-top。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.mb-# / mb-*-# margin-bottom。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.ml-# / ml-*-# margin-left。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.mr-# / mr-*-# margin-right。*可以是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>元素可滚动（最大高度为350px，并提供y轴滚动条） 试一试 助手
.progress 进度条 试一试 进度条
.progress-bar 创建一个进度条 试一试 进度条
.progress-bar-animated 动画进度条（与条纹一起使用） 试一试 进度条
.progress-bar-striped 在进度条上添加条纹 试一试 进度条
.p-# / p-*-# Padding 。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.pt-# / pt-*-# Padding-top。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.pb-# / pb-*-# Padding-bottom。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.pl-# / pl-*-# Padding-left。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.pr-# / pr-*-# Padding-right。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.py-# / py-*-# Padding响应式顶部和底部填充。*可以是sm，md，lg或xl。＃可以是0到5之间的数字 试一试 实用工具
.px-# / px-*-# Padding响应式左右填充。*可以是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 添加到链接中使其包含的块（父级）可点击（仅适用于位置为相对的父元素） 试一试 实用工具
.tab-content 与.tab-pane一起使用以创建可切换/Tabs 试一试 选项卡
.tab-pane 与.tab-content一起使用以创建可切换/Tabs 试一试 选项卡
.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 提示框的 header 试一试 提示框
.toast-header 提示框的body 试一试 提示框
.valid-feedback 创建用于已验证表单（绿色文本颜色）的自定义验证消息 试一试 表单
.valid-tooltip 创建用于已验证表单的自定义验证消息（绿色工具提示） 试一试 表单
.visible 使元素可见 试一试 实用工具
.was-validated 将验证样式添加到表单元素 试一试 表单
.w-25 将元素的宽度设置为25％ 试一试 实用工具
.w-50 将元素的宽度设置为50％ 试一试 实用工具
.w-75 将元素的宽度设置为75％ 试一试 实用工具
.w-100 将元素的宽度设置为100％ 试一试 实用工具

上面的表格显示所有可用的Bootstrap4类.

提示:看到所有人的完整列表Bootstrap3类,我们去所有Bootstrap3 CSS类参考.


❮之前 下一个❯