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

❮ 上一节 下一节 ❯