Bootstrap类名

字体

.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 行内块元素，用于列表行内的每一项

引用

.blockquote 引用样式
.blockquote-footer 引用脚注

图片

.img-fluid 图片最大宽度为父盒子宽度，高度与宽度对应，使其横着比保持不变
.img-thumbnail 用于显示缩略图
.figure 用于包含标题和图片的容器，设置为行内块元素
.figure-img .figure中的图片
.figure-caption 图片的说明文字
代码
code 单行代码
pre 多行代码
kbd 表示用户需要通过键盘输入的内容
.pre-scrollable 可纵向滚动的多行代码

容器

.container 普通容器
.container-fluid 通栏容器
.row 行容器，左右有15px会被隐藏
.no-gutters 无左右外边距，子元素若有.col或.col-*则同时无左右内边距

响应式网格布局（通用）

.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，表示向右偏移 十二分之几

表格

.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 内联表单

属性

size, multiple 高度自动

按钮

.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 可切换的按钮组

下拉菜单

.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 自定义范围

导航

.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 暗色导航条

卡片

.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 折叠其下的卡片
面包屑导航
.breadcrumb 面包屑导航基础类
.breadcrumb-item 导航项
.pagination 分页
.page-link 页面链接
.pagination-lg 更大的分页
.pagination-sm 更小的分页

徽章

.badge 徽章基础类
.badge-pill 胶囊状
.badge-primary 主徽章
.badge-secondary 次要徽章
.badge-success 操作成功徽章
.badge-info 信息徽章
.badge-warning 警告徽章
.badge-danger 危险徽章
.badge-light 亮色徽章
.badge-dark 暗色徽章

信息提示框

.alert 信息提示框基础类
.alert-heading 提示头
.alert-link 提示中的链接部分
.alert-dismissible 可关闭的提示

进度条

.progress 进度条容器
.progress-bar 进度条，使用百分比的width属性控制进度条的位置
.progress-bar-striped 进度条的条纹
.progress-bar-animated 带有动画的进度条，配合条纹使用

多媒体

.media 多媒体容器
.media-body 多媒体主体

列表组

.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 无左右边框

模态框

.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

轮播

.carousel 轮播基础类
.carousel-inner 轮播内部容器
.carousel-item 轮播项
.carousel-item-next 下一个轮播项
.carousel-item-prev 上一个轮播项
.carousel-fade 轮播淡出
.carousel-item-left
.carousel-item-right
.carousel-control-prev
.carousel-control-next
.carousel-control-prev-icon
.carousel-control-next-icon
.carousel-indicators
.carousel-caption

Spinner

.spinner-border
.spinner-border-sm
.spinner-grow
.spinner-grow-sm

对齐

.align-baseline 基线对齐
.align-top 顶部对齐
.align-middle 垂直居中对齐
.align-bottom 底部对齐
.align-text-bottom 文本底部对齐
.align-text-top 文本顶部对齐

背景

.bg-primary 主色调背景
.bg-secondary 次色调背景
.bg-success 操作成功背景
.bg-info 信息背景
.bg-warning 警告背景
.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-*

嵌入

.embed-responsive
.embed-responsive-item
.embed-responsive-21by9
.embed-responsive-16by9
.embed-responsive-4by3
.embed-responsive-1by1

Flex

.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’属性的限制。

响应式flex布局

可为不同宽度的屏幕指定不同的模式：
576px < 小屏幕(sm) < 768px < 中型屏幕(md) < 992px < 大型屏幕(lg) < 1200px < 超大型屏幕(xl)
以上各属性分别表示为（以sm为例）：
.flex-sm-*
.justify-content-sm-*
.align-items-sm-*
.align-content-sm-*
.align-self-sm-*

定位和布局

.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 定位在窗口底部
.sticky-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 继承父元素的颜色

辅助类

.focus 选中状态
.active 活动状态
.disabled 禁用状态
.close 右侧关闭
.show 淡入
.fade 淡出
.jumbotron 超大屏幕，灰色背景框
.jumbotron-fluid 超大屏幕，无内边距和边框圆角
.sr-only
.sr-only-focusable
.shadow-sm 较小的元素阴影
.shadow 元素阴影
.shadow-lg 较大的元素阴影
.shadow-none 无元素阴影