| 变量名 | 值 | 颜色示意 |
|---|---|---|
| --blue | #007bff |
|
| --indigo | #6610f2 |
|
| --purple | #6f42c1 |
|
| --pink | #e83e8c |
|
| --red | #dc3545 |
|
| --orange | #fd7e14 |
|
| --yellow | #ffc107 |
|
| --green | #28a745 |
|
| --teal | #20c997 |
|
| --cyan | #17a2b8 |
|
| --white | #fff |
|
| --gray | #6c757d |
|
| --gray-dark | #343a40 |
|
| --primary | #007bff |
|
| --secondary | #6c757d |
|
| --success | #28a745 |
|
| --info | #17a2b8 |
|
| --warning | #ffc107 |
|
| --danger | #dc3545 |
|
| --light | #f8f9fa |
|
| --dark | #343a40 |
|
| --breakpoint-xs | 0 | |
| --breakpoint-sm | 576px | |
| --breakpoint-md | 768px | |
| --breakpoint-lg | 992px | |
| --breakpoint-xl | 1200px | |
| --font-family-sans-serif | 无衬线字体序列 | |
| --font-family-monospace | 等宽字体序列 |
| 属性和值 | 限制 | 说明 |
|---|---|---|
| hidden | 无 | 隐藏，且不保留物理空间 |
| tabindex="-1" | 对可输入组件生效 | 聚焦时，不显示对象外的线条轮廓 |
| type="button" | 仅对 input 生效 |
表示按钮 |
| type="reset" | 仅对 input 生效 |
表示重置按钮 |
| type="submit" | 仅对 input 生效 |
表示提交按钮 |
| type="radio" | 仅对 input 生效 |
表示单选按钮 |
| type="checkbox" | 仅对 input 生效 |
表示复选按钮 |
| type="date" | 仅对 input 生效 |
用于输入日期 |
| type="time" | 仅对 input 生效 |
用于输入时间 |
| type="datetime-local" | 仅对 input 生效 |
用于输入日期和时间 |
| type="month" | 仅对 input 生效 |
用于输入年和月 |
| type="number" | 仅对 input 生效 |
用于输入数字 |
| type="search" | 仅对 input 生效 |
用于搜索框 |
| readonly | 仅对输入控件生效 | 表示只读 |
| x-placement="top" | 仅对 .dropdown-menu 、.bs-tooltip-auto 、bs-popover-auto生效 |
设置放置位置 |
| x-placement="right" | 仅对 .dropdown-menu 、.bs-tooltip-auto 、bs-popover-auto生效 |
|
| x-placement="bottom" | 仅对 .dropdown-menu 、.bs-tooltip-auto 、bs-popover-auto生效 |
|
| x-placement="left" | 仅对 .dropdown-menu 、.bs-tooltip-auto 、bs-popover-auto生效 |
|
| size | ||
| multiple | 仅在 .form-control、.custom-select 生效 |
表示多选 |
| data-browse="用于显示的值" | 仅在 .custom-file-label 生效 |
.h1 与 h1 相同
.h2 与 h2 相同
......
.h6 与 h6 相同
| 类名 | 作用 |
|---|---|
| .lead | 用于一个段落的文字，使其显示效果显著。 |
| .display-1 | 6倍根元素字体大小 |
| .display-2 | 5.5倍根元素字体大小 |
| .display-3 | 4.5倍根元素字体大小 |
| .display-4 | 3.5倍根元素字体大小 |
| .samll | 小号字体，同samll标签 |
| .mark | 带有记号的文本，同mark标签 |
| .initialism | 字体大小为90%，字母大写 |
| 类名 | 作用 |
|---|---|
| .list-unstyled | 无样式，无左内边距 |
| .list-inline | 无样式，无左内边距，用于定义行内列表 |
| .list-inline-item | 行内块元素，用于列表行内的每一项 |
| 类名 | 说明 |
|---|---|
| .list-group | 列表基础类 |
| .list-group-item | 列表项 |
| .list-group-item-action | 激活列表项 |
| .list-group-item-primary | 主要列表项 |
| .list-group-item-secondary | 次要列表项 |
| .list-group-item-success | 成功列表项 |
| .list-group-item-info | 信息列表项 |
| .list-group-item-warning | 警告列表项 |
| .list-group-item-danger | 危险列表项 |
| .list-group-item-light | 浅色列表项 |
| .list-group-item-dark | 深灰色列表项 |
| .list-group-horizontal | 水平列表 |
| .list-group-horizontal-sm | 小型屏幕的水平列表 |
| .list-group-horizontal-md | 中型屏幕的水平列表 |
| .list-group-horizontal-ls | 大型屏幕的水平列表 |
| .list-group-horizontal-xl | 超大型屏幕的水平列表 |
| .list-group-flush | 无左右边框 |
| 类名 | 作用 |
|---|---|
| .blockquote | 引用样式 |
| .blockquote-footer | 引用脚注 |
| 类名 | 作用 |
|---|---|
| .img-fluid | 图片最大宽度为父盒子宽度，高度与宽度对应，使其横着比保持不变 |
| .img-thumbnail | 用于显示缩略图 |
| .figure | 用于包含标题和图片的容器，设置为行内块元素 |
| .figure-img | .figure中的图片 |
| .figure-caption | 图片的说明文字 |
| 标签名或类名 | 说明 |
|---|---|
| code | 单行代码 |
| pre | 多行代码 |
| kbd | 表示用户需要通过键盘输入的内容 |
| .pre-scrollable | 可纵向滚动的多行代码 |
| 类名 | 说明 |
|---|---|
| .col-* | *为1~12，数字之和每行不能超过12 |
| .col-auto | 列宽度自动分配 |
| .order-first | 始终在最前 |
| .order-last | 始终在最后 |
| .order-* | *为数字0~12，数值小的项排在前面 |
| .offset-* | *为数字1~11，表示向右偏移 十二分之几（通过margin-left实现） |
宽度大于576px且小于768px的设备，以下类仅适用于小型设备：
| 类名 | 说明 |
|---|---|
| .col-sm-* | 分配列的数字 |
| .col-sm-auto | 自动分配宽度 |
| .order-sm-first | 始终在最前 |
| .order-sm-last | 始终在最后 |
| .order-sm-* | *为数字0~12，数值小的项排在前面 |
| .offset-sm-* | *为数字1~11，表示向右偏移 十二分之几 |
宽度大于768px且小于992px的设备，以下类仅适用于中型设备：
| 类名 | 说明 |
|---|---|
| .col-md-* | 为中型屏幕分配列的数字 |
| .col-md-auto | 中型屏幕自动分配宽度 |
| .order-md-first | 始终在最前 |
| .order-md-last | 始终在最后 |
| .order-md-* | *为数字0~12，数值小的项排在前面 |
| .offset-md-* | *为数字1~11，表示向右偏移 十二分之几 |
宽度大于992px且小于1200px的设备，以下类仅适用于大型设备：
| 类名 | 说明 |
|---|---|
| .col-lg-* | 为大型屏幕分配列的数字 |
| .col-lg-auto | 大型屏幕自动分配宽度 |
| .order-lg-first | 始终在最前 |
| .order-lg-last | 始终在最后 |
| .order-lg-* | *为数字0~12，数值小的项排在前面 |
| .offset-lg-* | *为数字1~11，表示向右偏移 十二分之几 |
宽度大于1200px的设备，以下类仅适用于超大型设备：
| 类名 | 说明 |
|---|---|
| .col-xl-* | 为超大型屏幕分配列的数字 |
| .col-xl-auto | 超大型屏幕自动分配宽度 |
| .order-xl-first | 始终在最前 |
| .order-xl-last | 始终在最后 |
| .order-xl-* | *为数字0~12，数值小的项排在前面 |
| .offset-xl-* | *为数字1~11，表示向右偏移 十二分之几 |
| 类名 | 说明 |
|---|---|
| .align-baseline | 基线对齐 |
| .align-top | 顶部对齐 |
| .align-middle | 垂直居中对齐 |
| .align-bottom | 底部对齐 |
| .align-text-bottom | 文本底部对齐 |
| .align-text-top | 文本顶部对齐 |
| 类名 | 说明 |
|---|---|
| .bg-primary | 主色调背景 |
| .bg-secondary | 次色调背景 |
| .bg-success | 操作成功背景 |
| .bg-info | 信息背景 |
| bg-info | 警告背景 |
| .bg-danger | 危险背景 |
| .bg-light | 浅色背景 |
| .bg-dark | 深灰色背景 |
| .bg-white | 白色背景 |
| .bg-transparent | 透明背景 |
| 类名 | 说明 |
|---|---|
| .border | 边框 |
| .border-top | 顶部边框 |
| .border-right | 右侧边框 |
| .border-bottom | 底部边框 |
| .border-left | 左侧边框 |
| .border-0 | 无边框 |
| .border-top-0 | 顶部无边框 |
| .border-right-0 | 右侧无边框 |
| .border-bottom-0 | 底部无边框 |
| .border-left-0 | 左侧无边框 |
| .border-primary | 主色调边框 |
| .border-secondary | 次要色调边框 |
| .border-success | 成功边框 |
| .border-info | 信息边框 |
| .border-warning | 警告边框 |
| .border-danger | 危险边框 |
| .border-light | 浅色边框 |
| .border-dark | 浅色边框 |
| .border-white | 白色边框 |
| .rounded-sm | 边框小圆角 |
| .rounded | 边框圆角 |
| .rounded-top | 顶部圆角 |
| .rounded-right | 右侧圆角 |
| .rounded-bottom | 底部圆角 |
| .rounded-left | 左侧圆角 |
| .rounded-lg | 边框大圆角 |
| .rounded-circle | 椭圆形边框 |
| .rounded-pill | 胶囊型边框 |
| .rounded-0 | 无边框圆角 |
| 类名 | 说明 |
|---|---|
| .clearfix | 清除浮动 |
| .d-none | 隐藏对象 |
| .d-inline | 指定对象为内联元素 |
| .d-inline-block | 指定对象为内联块元素 |
| .d-block | 指定对象为块元素 |
| .d-table | 指定对象为块元素级表格 |
| .d-table-row | 指定对象作为表格行 |
| .d-table-cell | 指定对象作为表格单元格 |
| .d-flex | 将对象作为弹性伸缩盒显示 |
| .d-inline-flex | 将对象作为内联块级弹性伸缩盒显示 |
可为不同宽度的屏幕指定不同的显示模式：
576px < 小屏幕 < 768px < 中型屏幕 < 992px < 大型屏幕 < 1200px < 超大型屏幕
分别用表示为：
.d-sm-*
.d-md-*
.d-lg-*
.d-xl-*
.d-print-*
| 类名 | 说明 |
|---|---|
| .table | 普通表格 |
| .table-sm | 小表格 |
| .table-bordered | 表格边框 |
| .table-borderless | 无边框 |
| .table-striped | 条纹型表格 |
| .table-hover | 光标悬浮时，行样式变化 |
| .table-primary | 背景色为主色调的表格 |
| .table-secondary | 背景色为次要色调的表格 |
| .table-success | 边框颜色为success颜色的表格 |
| .table-info | 背景色为info颜色的表格 |
| .table-warning | 背景色为警告颜色的表格 |
| .table-danger | 背景色为危险颜色的表格 |
| .table-light | 背景色为亮色的表格 |
| .table-dark | 背景色为深色的表格 |
| .table-active | 背景色为活跃的颜色的表格 |
| .thead-dark | 深色的表头 |
| .thead-light | 亮色的表头 |
| .table-responsive | 响应式的表格 |
| 类名 | 说明 |
|---|---|
| .form-control | 表单中的控制组件 |
| .form-control-sm | 更小的控制组件 |
| .form-control-lg | 更大的控制组件 |
| .form-control-file | 表单中选择文件的组件 |
| .form-control-range | 表单中控制范围的组件 |
| .col-form-label | 表单中行标签 |
| .col-form-label-lg | 更大的行标签 |
| .col-form-label-sm | 更小的行标签 |
| .form-control-plaintext | 表单明文输入组件 |
| .form-group | 表单组 |
| .form-text | 表单文本 |
| .form-row | 表单行 |
| .form-check | 表单校对 |
| .form-check-input | 表单输入校对 |
| .form-check-label | 表单校对标签 |
| .form-check-inline | 内联表单校对 |
| .valid-feedback | 有效的反馈 |
| .valid-tooltip | 有效的提示信息 |
| .was-validated | 验证 |
| .invalid-feedback | 无效的反馈 |
| .invalid-tooltip | 无效的提示信息 |
| .form-inline | 内联表单 |
属性
| 类名 | 说明 |
|---|---|
| .btn | 按钮基础类 |
| .btn-primary | 主按钮 |
| .btn-secondary | 次要按钮 |
| .btn-success | 成功按钮 |
| .btn-info | 信息按钮 |
| .btn-warning | 警告按钮 |
| .btn-danger | 危险按钮 |
| .btn-light | 亮色按钮 |
| .btn-dark | 暗色按钮 |
| .btn-outline-primary | 有边框的主按钮 |
| .btn-outine-secondary | 有边框的次要按钮 |
| .btn-outline-success | 有外边框的成功按钮 |
| .btn-outline-info | 有外边框的信息按钮 |
| .btn-outline-warning | 有外边框的警告按钮 |
| .btn-outline-danger | 有外边框的危险按钮 |
| .btn-outline-light | 有外边框的亮色按钮 |
| .btn-outline-dark | 有外边框的暗色按钮 |
| .btn-link | 链接样式的按钮 |
| .btn-lg | 大按钮 |
| .btn-group-lg | 大按钮组，包含在该组内的按钮都为大按钮 |
| .btn-sm | 小按钮 |
| .btn-group-sm | 小按钮组，包含在该组内的按钮都为小按钮 |
| .btn-group | 按钮组 |
| .btn-group-vertical | 垂直的按钮组 |
| .btn-block | 块级按钮 |
| .btn-toolbar | 按钮工具栏 |
| .btn-group-toggle | 可切换的按钮组 |
| 类名 | 说明 |
|---|---|
| .nav | 导航栏基础类 |
| .nav-link | 链接导航栏 |
| .nav-tabs | 导航选项卡 |
| .nav-item | 导航项 |
| .nav-pills | 胶囊状导航栏 |
| .nav-fill | |
| .nav-justified | |
| .tab-content | 选项卡内容 |
| .tab-pane | 选项窗格 |
| .navbar | 导航条 |
| .navbar-brand | 导航条商标 |
| .navbar-nav | 导航栏 |
| .navbar-text | 导航条文字 |
| .navbar-collapse | 折叠导航条 |
| .navbar-toggler | 导航条变换按钮 |
| .navbar-expand-sm | 小型屏幕导航条扩展 |
| .navbar-expand-md | 中型屏幕导航条扩展 |
| .navbar-expand-lg | 大型屏幕导航条扩展 |
| .navbar-expand-xl | 大型屏幕导航条扩展 |
| .navbar-expand | 导航台扩展 |
| .navbar-light | 亮色导航条 |
| .navbar-dark | 暗色导航条 |
| 类名 | 说明 |
|---|---|
| .breadcrumb | 面包屑导航基础类 |
| .breadcrumb-item | 导航项 |
| .pagination | 分页 |
| .page-link | 页面链接 |
| .pagination-lg | 更大的分页 |
| .pagination-sm | 更小的分页 |
| 类名 | 说明 |
|---|---|
| .card | 卡片基础类 |
| .card-body | 卡片主体 |
| .card-title | 卡片标题 |
| .card-subtitle | 卡片副标题 |
| .card-text | 卡片文本 |
| .card-link | 卡片链接 |
| .card-header | 卡片头部 |
| .card-footer | 卡片尾部 |
| .card-header-tabs | 卡片头部选项卡 |
| .card-header-pills | 胶囊状卡片头 |
| .card-img-overlay | 卡片中的全图显示的图片 |
| .card-img | 卡片中的图片 |
| .card-img-top | 卡片中位于顶部的图片 |
| .card-img-bottom | 卡片中位于底部的图片 |
| .card-deck | 卡片层 |
| .card-group | 卡片组 |
| .card-colums | 卡片列 |
| .accordion | 折叠其下的卡片 |
| 类名 | 说明 |
|---|---|
| .badge | 徽章基础类 |
| .badge-pill | 胶囊状 |
| .badge-primary | 主徽章 |
| .badge-secondary | 次要徽章 |
| .badge-success | 操作成功徽章 |
| .badge-info | 信息徽章 |
| .badge-warning | 警告徽章 |
| .badge-danger | 危险徽章 |
| .badge-light | 亮色徽章 |
| .badge-dark | 暗色徽章 |
| 类名 | 说明 |
|---|---|
| .progress | 进度条容器 |
| .progress-bar | 进度条，使用百分比的width属性控制进度条的位置 |
| .progress-bar-striped | 进度条的条纹 |
| .progress-bar-animated | 带有动画的进度条，配合条纹使用 |
| 类名 | 说明 |
|---|---|
| .media | 多媒体容器 |
| .media-body | 多媒体主体 |
| 类名 | 说明 |
|---|---|
| .container | 普通容器 |
| .container-fluid | 通栏容器 |
| .row | 行容器，左右有15px会被隐藏 |
| .no-gutters | 无左右外边距，子元素若有.col或.col-*则同时无左右内边距 |
| 类名 | 说明 |
|---|---|
| .float-left | 左浮动 |
| .float-right | 右浮动 |
| .float-none | 无浮动 |
| .float-*-left | *为sm, md, lg或xl，为各个不同尺寸的屏幕指定左浮动 |
| .float-*-right | *为sm, md, lg或xl，为各个不同尺寸的屏幕指定右浮动 |
| .float-*-none | *为sm, md, lg或xl，为各个不同尺寸的屏幕指定无浮动 |
| .overflow-auto | 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。 |
| .overflow-hidden | 隐藏溢出容器的内容且不出现滚动条。 |
| .position-static | 静态定位 |
| .position-relative | 相对定位 |
| .position-absolute | 绝对定位 |
| .position-fixed | 以窗口为基准的绝对定位 |
| .position-sticky | 吸附定位 |
| .fixed-top | 定位在窗口顶部 |
| .fixed-bottom | 定位在窗口底部 |
| .stick-top | 吸附在顶部 |
| .visible | 设置对象可视 |
| .invisible | 设置对象隐藏，并保留其占据的物理空间 |
| 类名 | 说明 |
|---|---|
| .w-25 | 宽度25% |
| .w-50 | 宽度50% |
| .w-75 | 宽度75% |
| .w-100 | 宽度100% |
| .w-auto | 宽度自动 |
| .h-25 | 高度25% |
| .h-50 | 高度50% |
| .h-75 | 高度75% |
| .h-100 | 高度100% |
| .h-auto | 高度自动 |
| .mw-100 | 最大宽度100% |
| .mh-100 | 最大高度100% |
| .min-vw | 最小宽度100vw |
| .min-vh-100 | 最小高度100vh |
| .vw-100 | 宽度100vw |
| .vh-100 | 高度100vh |
| .m-* | *可取值为0~5，外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .mt-* | *可取值为0~5，顶部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .mt-* | *可取值为0~5，右侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .mb-* | *可取值为0~5，底部外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .ml-* | *可取值为0~5，左侧外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .mx-* | *可取值为0~5，左右外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .my-* | *可取值为0~5，上下外边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .p-* | *可取值为0~5，内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .pt-* | *可取值为0~5，顶部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .pr-* | *可取值为0~5，右侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .pb-* | *可取值为0~5，底部内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .pl-* | *可取值为0~5，左侧内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .px-* | *可取值为0~5，左右内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .py-* | *可取值为0~5，上下内边距取值分别为为 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem |
| .m-n* | *可取值为1~5，外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .mt-n* | *可取值为1~5，顶部外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .mr-n* | *可取值为1~5，右侧外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .mb-n* | *可取值为1~5，底部外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .ml-n* | *可取值为1~5，左侧外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .mx-n* | *可取值为1~5，左右外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
| .my-n* | *可取值为1~5，上下外边距取值分别为为 -0.25rem, -0.5rem, -1rem, -1.5rem, -3rem |
外边距和内边距可以把类名中的两个 - 符号替换为-sm-、-md-、-lg-、-xl-来为不同尺寸的屏幕设置不同的内外i边距。
| 类名 | 说明 |
|---|---|
| .text-monospace | 等宽字体 |
| .text-justify | 内容两端对齐 |
| .text-wrap | 会将序列的空格合并为一个，内部是否换行由换行规则决定。 |
| .text-nowrap | 会将序列的空格合并为一个，并强制所有文本在同一行内显示。 |
| .text-truncate | 文本溢出后省略，溢出部分替换为 ... |
| .text-left | 内容左对齐 |
| .text-right | 内容右对齐 |
| .text-center | 内容居中对齐 |
| .text-*-left | *可选 sm、md、lg 或 xl ，为各种不同宽度的设备指定内容左对齐 |
| .text-*-right | *可选 sm、md、lg 或 xl ，为各种不同宽度的设备指定内容右对齐 |
| .text-*-center | *可选 sm、md、lg 或 xl ，为各种不同宽度的设备指定内容居中对齐 |
| .text-lowercase | 将每个单词转换成小写 |
| .text-uppercase | 将每个单词转换成大写 |
| .text-capitalize | 将每个单词的第一个字母转换成大写 |
| .font-weight-light | 比正常字体更轻的值 |
| .font-weight-lighter | 比继承值更轻的值 |
| .font-weight-normal | 正常字体的值 |
| .font-weight-bold | 粗体 |
| .font-weight-bolder | 继承值更重的值 |
| .text-italic | 指定文本字体样式为斜体 |
| .text-white | 文本颜色为白色 |
| .text-primary | 字体颜色为主要颜色 |
| .text-secondary | 文本颜色为次要颜色 |
| .text-success | 文本颜色为成功色 |
| .text-info | 文本颜色为信息色 |
| .text-warning | 文本颜色为警告色 |
| .text-danger | 文本颜色为危险色 |
| .text-light | 文本颜色为浅色 |
| .text-dark | 文本颜色为深灰色 |
| .text-body | 文本颜色为主体颜色 |
| .text-muted | 文本颜色为柔和的颜色 |
| .text-black-50 | 文本颜色为黑色半透明 |
| .text-white-50 | 文本颜色为白色半透明 |
| .text-hide | 隐藏文本 |
| .text-decoration-none | 无文本装饰 |
| .text-break | 允许文本换行，要求一个没有断行破发点的词必须保持为一个整体单位 |
| .text-reset | 继承父元素的颜色 |
| 类名 | 说明 |
|---|---|
| .flex-row | 设置子元素水平显示，默认的 |
| .flex-colum | 设置子元素垂直方向显示 |
| .flex-row-reverse | 右对齐显示 |
| .flex-colum-reverse | 垂直方向反转子元素 |
| .flex-warp | 设置flex容器为多行 |
| .flex-nowrap | 设置flex容器为单行 |
| .flex-wrap-reverse | 反转wrap排列 |
| .flex-fill | 为每个弹性子元素设置时，子元素宽度相等 |
| .flex-grow-0 | 定义弹性子元素扩展比率为0 |
| .flex-grow-1 | 定义弹性子元素扩展比率为1 |
| .flex-shrink-0 | 定义弹性子元素收缩比率为0 |
| .flex-shrink-1 | 定义弹性子元素收缩比率为1 |
| .justify-content-start | 弹性盒子子元素将向行起始位置对齐 |
| .justify-content-end | 弹性盒子子元素将向行结束位置对齐 |
| .justify-content-center | 弹性盒子子元素将向中间对齐 |
| .justify-content-between | 弹性盒子子元素会平均地分布在行里 |
| .justify-content-around | 弹性盒子元素会平均地分布在行里，并且两端保留子元素与子元素之间间距大小的一半 |
| .align-items-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| .align-items-end | 弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。 |
| .align-items-center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置。 |
| .align-items-baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 |
| .align-items-stretch | 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 |
| .align-content-start | 各行向弹性盒容器的起始位置堆叠。 |
| .align-content-end | 各行向弹性盒容器的结束位置堆叠。 |
| .align-content-center | 各行向弹性盒容器的中间位置堆叠。 |
| .align-content-between | 各行在弹性盒容器中平均分布。 |
| .align-content-around | 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 |
| .align-content-stretch | 各行将会伸展以占用剩余的空间。 |
| .align-self-auto | 其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。 |
| .align-self-start | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 |
| .align-self-end | 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 |
| .align-self-center | 弹性盒子元素在该行的侧轴（纵轴）上居中放置 |
| .align-self-baseline | 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。 |
| .align-self-stretch | 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。 |
可为不同宽度的屏幕指定不同的模式：
576px < 小屏幕(sm) < 768px < 中型屏幕(md) < 992px < 大型屏幕(lg) < 1200px < 超大型屏幕(xl)
以上各属性分别表示为（以sm为例）：
.flex-sm-*
.justify-content-sm-*
.align-items-sm-*
.align-content-sm-*
.align-self-sm-*
| 类名 | 说明 |
|---|---|
| .focus | 选中状态 |
| .active | 活动状态 |
| .disabled | 禁用状态 |
| .close | 右侧关闭 |
| .show | 淡入 |
| .fade | 淡出 |
| .jumbotron | 超大屏幕，灰色背景框 |
| .jumbotron-fluid | 超大屏幕，无内边距和边框圆角 |
| .sr-only | |
| .sr-only-focusable | |
| .shadow-sm | 较小的元素阴影 |
| .shadow | 元素阴影 |
| .shadow-lg | 较大的元素阴影 |
| .shadow-none | 无元素阴影 |
| 类名 | 说明 |
|---|---|
| .collapse | 折叠 |
| .collapsing | 折叠中 |
| .dropdown-toggle | 下拉切换 |
| .dropdown-toggle-split | 有间隔的切换下拉切换 |
| .dropup | |
| .dropright | |
| .dropdown | |
| .dropleft | |
| .dropdown-menu | 下拉菜单 |
| .dropdown-menu-left | 左侧菜单 |
| .dropdown-menu-right | 右侧菜单 |
| .dropdown-menu-sm-left | 小型屏幕左侧菜单 |
| .dropdown-menu-sm-right | 小型屏幕右侧菜单 |
| .dropdown-menu-md-left | 中型屏幕左侧菜单 |
| .dropdown-menu-md-right | 中型屏幕右侧菜单 |
| .dropdown-menu-lg-left | 大型屏幕左侧菜单 |
| .dropdown-menu-lg-right | 大型屏幕右侧菜单 |
| .dropdown-menu-xl-left | 超大型屏幕左侧菜单 |
| .dropdown-menu-xl-right | 超大型屏幕右侧菜单 |
| .dropdown-divider | 下拉分配 |
| .dropdown-item | 下拉菜单项 |
| .dropdown-header | 下拉菜单标题 |
| .dropdown-item-text | 下拉菜单项的文字 |
| 类名 | 说明 |
|---|---|
| .input-group | 输入组 |
| .input-group-prepend | 输入组前 |
| .input-group-append | 输入组后 |
| .input-group-text | 文本输入组 |
| .input-group-lg | |
| .input-group-sm |
| 类名 | 说明 |
|---|---|
| .custom-control | 自定义控件 |
| .custom-control-inline | 内联块级行内伸缩盒 |
| .custom-control-input | 自定义输入控件 |
| .custom-control-label | 自定义标签控件 |
| .custom-checkbox | 自定义复选框 |
| .custom-radio | 自定义单选框 |
| .custom-switch | 自定义开关 |
| .custom-select | 自定义选项 |
| .custom-select-sm | 更小的自定义选项 |
| .custom-select-lg | 更大的自定义选项 |
| .custom-file | 自定义文件 |
| .custom-file-input | 自定义文件输入 |
| .custom-file-label | 自定义文件标签 |
| .custom-range | 自定义范围 |
| 类名 | 说明 |
|---|---|
| .alert | 信息提示框基础类 |
| .alert-heading | 提示头 |
| .alert-link | 提示中的链接部分 |
| .alert-dismissible | 可关闭的提示 |
| 类名 | 说明 |
|---|---|
| .toast | |
| .toast-header | |
| .toast-body |
| 类名 | 说明 |
|---|---|
| .modal-open | |
| .modal | 模态框容器类 |
| .modal-sm | 小模态框 |
| .modal-lg | 大模态框 |
| .modal-xl | 超大模态框 |
| .modal-dialog | 模态对话框 |
| .modal-dialog-scrollable | 可滚动的模态对话框 |
| .modal-content | 模态框内容 |
| .modal-header | 模态框头部 |
| .modal-title | 模态框标题 |
| .modal-body | 模态框主体 |
| .modal-footer | 模态框底部 |
| .modal-dialog-centered | 垂直居中的模态对话框 |
| .modal-backdrop | |
| .modal-scrollbar-measure |
| 类名 | 说明 |
|---|---|
| .tooltip | 提示框基础类 |
| .arrow | 箭头 |
| .bs-tooltip-top | |
| .bs-tooltip-auto | |
| .bs-tooltip-right | |
| .bs-tooltip-bottom | |
| .bs-tooltip-left | |
| .bs-tooltip-inner |
| 类名 | 说明 |
|---|---|
| .popover | 弹出窗口基础类 |
| .arrow | |
| .bs-popover-auto | |
| .bs-popover-top | |
| .bs-popover-right | |
| .bs-popover-bottom | |
| .bs-popover-left | |
| .popover-header | |
| .popover-body |
| 类名 | 说明 |
|---|---|
| .spinner-border | |
| .spinner-border-sm | |
| .spinner-grow | |
| .spinner-grow-sm |