【信息提示】

样式	说明
.alert	基类
.alert-{success、info、warning、danger、primary、secondary、light、dark}	各种类型的配色样式
.fade、.show	设置提示框在关闭时的淡出和淡入效果,要求二个同时调用，示例： <div class="alert alert-success fade show"> <button class="close" data-dismiss="alert">×</button> </div>
.alert-link	提示框内带链接样式,示例: <div class="alert alert-success"> <a href="#" class="alert-link">这条信息</a> </div>
.alert-dismissible	带关闭功能的提示，示例： <div class="alert alert-success alert-dismissible"> <button class="close" data-dismiss="alert">×</button> </div>

【隐藏、显示】

样式	说明
.d-none	在较小屏幕下隐藏
.d-{sm | md | lg | xl}-none	在指定屏幕大小下隐藏
.d-block	在较小屏幕下显示
.d-{sm | md | lg | xl}-block	在指定屏幕大小下显示

【按钮】

按钮样式

样式	说明
.btn	按钮基类
.btn-{primary | secondary | success | info | warining | danger | dark | light | link }	各种类型按钮样式
.active	按钮激活状态样式
.disabled	按钮禁用状态样式
.btn-outline-{primary | secondary | success | info | warning | danger | dark | light }	按钮边框样式

按钮大小

样式	说明
.btn-block	块级按钮
.btn-lg	大号按钮
.btn-sm	小号按钮

按钮组

样式	说明
.btn-group	水平按钮组
.btn-group-vertical	垂直按钮组

按钮组大小

样式	说明
.btn-group-lg	大号按钮组
.btn-group-sm	小号按钮组

【徽章】

【徽章】主要用于突出显示新的或未读的项

样式	说明
.badge	基类，默认样式为四角圆角6像素
.badge-pill	药丸形状徽章
.bg-{primary | secondary | info | success | warning | danger | dark | light}	定义背景色
.text-white	定义字体颜色

【进度条】

样式	说明
.progress	进度条容器类，用height来定义进度条的高度
.progress-bar	定义一个进度条，用width百分比值来定义进度条的长度
.progress-bar-striped	定义带条纹的进度条
.progress-bar-animated	动画显示进度条，必需和progress-bar-striped结合使用，不然看不到动画效果
.bg-{primary、secondary、success、warning、danger、info、dark、light}	定义进度条的颜色

进度条示例：

<div class="progress" style="height: 40px;">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%;">当前进度：75%</div>
</div>

【分页】

样式	说明
.pagination	定义分类容器类,一般使用ul来定义：<ul class="pagination"></ul>
.pagination-{lg|sm}	定义页码大小
.page-item	页码容器类，一般使用li来定义：<li class="page-item">...
.page-link	定义分页连接
.active	高亮显示该页码，深蓝色背景，白字
.disabled	禁用该页码，不可点击状态

【面包屑导航】

类似当前位置导航，它会自动在每项后面加上 /

样式	说明
.breadcrumb	容器类
.breadcrumb-item	链接类
.active	当前项

【卡片】

卡片用于定义一块带圆角的区域。

样式	说明
.card	定义卡片容器
.card-body	卡片主体内容部份
.card-header	卡片头
.card-footer	卡片尾
.card-title	卡片标题
.card-text	卡片文本区域
.card-link	卡片链接
.card-img-top	卡片中图片位于文字顶部
.card-img-bottom	卡片中图片位于文字底部
.card-img-overlay	卡片中图片做为背景
.bg-{primary、secondary、success、warning、danger、info、dark、light}	定义卡片的背景色,定义在卡片容器上

例子：

<div class="card bg-success">
    <div class="card-header">...</div>
    <div class="card-body">
        <div class="card-title">...</div>
        <div class="card-text">
            <a href="#" class="card-link">链接</a>
            <img class="card-img-{top|bottom|overlay}" src="..." width="" height=""/>
        </div>
    </div>
    <div class="card-footer">...</div>
</div>

【margin、padding】

分别采用m与p的简写方式

margin间距样式：

样式	说明
.m-{0 | 1 | 2 | 3 | 4 | auto}	定义四周间距
.m-0	等价于{margin:0 !important}
.m-1	等价于{margin:0.25rem !important}
.m-2	等价于{margin:0.5rem !important}
.m-3	等价于{margin:1rem !important}
.m-4	等价于{margin:1.5rem !important}
.m-auto	等价于{margin:auto !important}
.mt-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-top设置
.mr-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-right设置
.mb-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-bottom设置
.ml-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-left设置
.mx-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-left与margin-right同时设	置
.my-{0 | 1 | 2 | 3 | 4 | auto}	表示margin-top与margin-bottom同时设置

padding间距样式：

样式	说明
.p-{0 | 1 | 2 | 3 | 4 | auto}	定义四周间距	\
.p-0	等价于{padding:0 !important}
.p-1	等价于{padding:0.25rem !important}
.p-2	等价于{padding:0.5rem !important}
.p-3	等价于{padding:1rem !important}
.p-4	等价于{padding:1.5rem !important}
.p-auto	等价于{padding!important}
.pt-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-top设置
.pr-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-right设置
.pb-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-bottom设置
.pl-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-left设置
.px-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-left与padding-right同时设置
.py-{0 | 1 | 2 | 3 | 4 | auto}	表示padding-top与padding-bottom同时设置

【宽度百分比样式】

样式	说明
.w-25	宽度25%
.w-50	宽度50%
.w-75	宽度75%
.w-100	宽度100%
.mw-100	最大宽度100%

【高度百分比样式】

样式	说明
.h-25	高度25%
.h-50	高度50%
.h-75	高度75%
.h-100	高度100%
.mh-100	最大高度100%

【折叠】

可以很容易的实现内容的显示与隐藏。

样式	说明
data-toggle="collapse"	折叠触发对象必需属性
data-target="#id" | href="#id"	折叠触发对象必需属性
.collapse	折叠目标对象样式
data-parent="#id"	属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。

触发元素要设置以下属性：

data-toggle = "collapse"
data-target = "#id" 或者链接的href代替此属性 href="#id"

触发下拉元素代码示例：

<!-- 要折叠的容器ID：lists -->
<button data-toggle="collapse" data-target="#lists">折叠</button>
<!-- 或者 -->
<a data-toggle="collapse" href="#lists">折叠</a>

折叠元素设置样式为: collapse，代码示例：

<div id="lists" class="collapse">
    这里是折叠显示的内容
</div>

完整代码：

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary" >折叠</button>
<div id="lists" class="collapse">
  这里是折叠显示的内容
</div>

默认折叠内容是隐藏的，如果要默认显示，需要加上show样式，如下：

<button data-toggle="collapse" data-target="#lists" class="btn btn-primary">折叠</button>
<div id="lists" class="collapse show">
  这里是折叠显示的内容
</div>

如果想使某一对象显示时，其它对象隐藏，需要使用 data-parent="#id" 属性
data-parent ="#id" 属性来实现父元素下，某一个折叠选项显示时其他选项就隐藏。代码示例：

<div class="container">
  <div id="area">
    <a href="#con-1" data-toggle="collapse" class="d-block">列表一</a>
    <div class="collapse" data-parent="#area" id="con-1">
       列表一内容
    </div>
    <a href="#con-2" data-toggle="collapse" class="d-block">列表二</a>
    <div class="collapse" data-parent="#area" id="con-2">
       列表二内容
    </div>
    <a href="#con-3" data-toggle="collapse" class="d-block">列表三</a>
    <div class="collapse" data-parent="#area" id="con-3">
       列表三内容
    </div>
  </div>
</div>

【列表: ul/ol/dl】

列表默认样式为垂直样式，一个项目占据一行。带灰色圆角边框。

样式	说明
.list-group	定义列表容器类
.list-group-item	定义列表项目类
.active	[列表项目]激活状态下的列表项，蓝色背景，白色字
.disabled	[列表项目]禁用状态下的列表项，白色背景，浅灰色字
.list-group-item-action	[列表项目]鼠标移上去列表背景变成灰色
.list-group-item-{primary、secondary、success、danger、warning、info、dark、light}	定义列表项的背景色。注意使用bg-{...}不是理想的配色方案，不建议使用。

[ol/ul/dl列表示例]

<ul class="list-group">
    <li class="list-group-item">默认选项样式</li>
    <li class="list-group-item active">激活状态下样式</li>
    <li class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</li>
    <li class="list-group-item disabled">禁用样式</li>
</ul>

也可以使用链接代替ul/ol/dl，示例:

<div class="list-group">
    <a href="#" class="list-group-item">默认样式</a>
    <a href="#" class="list-group-item active">激活状态下样式</a>
    <a href="#" class="list-group-item list-group-item-action">鼠标称外去显示灰色背景</a>
    <a href="#" class="list-group-item disabled">禁用样式</a>
</div>