12网格系统
文字排版
<h1> - <h6>
Display 标题类
<small>
<mark>
<abbr>
<blockquote>引用
<dl><dd><dt>定义列表
<code>代码片段
<kbd>键盘键
颜色
text-muted 柔和的文本
primary重要的 背景bg-..<br>
success执行成功
info提示信息
warning警告
danger危险操作
secondary副标题
dark深灰色
light浅灰色
white白色
表格table
table-hover鼠标悬停变灰
table-striped条纹 table-bordered边框
table-dark 黑色背景 table-info表示内容已变更
表头颜色thead-dark
table-sm较小的表格
table-responsive 响应式表格<br>
图像形状
圆角图片rounded 椭圆形.rounded-circle
有边框缩略图.img-thumbnail
图片对齐方式.float-right
响应式图片 img-fluid
Jumbotron
.jumbotron-fluid
信息提示框 alert
alert-success...
alert-link匹配提示框颜色的链接
关闭提示框.alert-dismissible
fade,show 设置提示框在关闭时的淡出和淡入效果<br>
按钮btn
颜色：btn-primary...
边框：btn-outline-primary
大小：btn-lg/sm
块级：btn-block
状态：active/disabled
按钮组btn-group
大小：btn-group-lg|sm
垂直：.btn-group-vertical
内嵌按钮组及下拉菜单
拆分按钮下拉菜单
垂直按钮组及下拉菜单
徽章badge<br>
颜色：badge-primary
药丸：badge-pill
徽章插入到元素内：
进度条progress progress-bar style="width:70%"
高度:style="height:20px;"
标签:<br><div class="progress"><br> <div class="progress-bar" style="width:70%">70%</div><br></div><br>
颜色： bg-success（可混合色彩）
条纹： progress-bar-striped
动画进度条：progress-bar-animated
分页ul:pagination、li:page-item、a:page-link
高亮：active、禁言：disabled
大小:.pagination-lg、sm
列表组ul:.list-group、li:.list-group-item
链接列表组<div> ， <a>.list-group-item-action（鼠标悬停变灰）
active、disabled<br>
卡片card -> .card-body
card-header、footer
card-title、card-text、card-link
<img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom
图片要设置为背景，可以使用 .card-img-overlay（图片以外的部分使用该类）
下拉菜单dropdown/dropup(向上弹)
<font color="#fdb813">按钮或链接</font>需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单
然后在下拉菜单的选项中添加 .dropdown-item 类
dropdown-divider 水平的分割线
dropdown-header 添加标题
定位：dropdown-menu-right
按钮中设置下拉菜单
折叠collapse
<a> 或 <button> 元素上添加 data-toggle="collapse" 属性
data-target="#id" 属性是对应折叠的内容
show 类让内容默认显示
手风琴
导航nav
<ul> .nav类， <li> .nav-item 类，链接上 .nav-link 类
对齐方式：justify-content-center /end（右对齐）<br>
垂直：flex-column
选项卡：nav-tabs
胶囊：nav-pills
等宽：nav-justified
胶囊下拉菜单
选项卡下拉菜单
动态选项卡
胶囊状动态选项卡
导航栏navbar
响应式：navbar-expand-xl|lg|md|sm
ul/li/a:navbar-nav/item/link
垂直：删除响应式<br>
Logo：navbar-brand <br>
折叠导航栏
导航栏使用下拉菜单
导航栏的表单与按钮
小标签<span class="input-group-addon">@</span>
导航栏文本：navbar-text
固定在顶部：fixed-top
面包屑导航Breadcrumb
ol/nav：breadcrum、li/a:breadcrumb-item
表单form-group
表单元素：form-control
checkbox：label->form-check、input->form-check-input
内联表单：form-inline（左对齐）
表单控件
input：form-control
textarea:form-control
checkbox
radio:radio/radio-inline
select
输入框组input-group
前面加信息：input-group-prepend
后：input-group-append
大小：input-group-sm|lg
文本：input-group-text
输入框添加按钮组
设置下拉菜单
自定义表单
自定义复选框
div:custom-control 和 .custom-checkbox
input:custom-control-input
label:custom-control-label
自定义单选框
div:custom-control 和 .custom-radio
显示在同一行custom-control-inline
自定义选择菜单：custom-select-sm
自定义滑块控件：custom-range、type=range
自定义文件上传控件：
div:custom-file
input :type="file" class="custom-file-input"
label :class="custom-file-label"
轮播
div:class="carousel slide" data-ride="carousel"
指示符:ul class="carousel-indicators"><br> <li data-target="#demo" data-slide-to="0
轮播图片:carousel-inner->carousel-item active->img
左右切换按钮:<a class="carousel-control-prev/next" href="#demo" data-slide="prev"><br> <span class="carousel-control-prev-icon"></span><br> </a><br>
轮播图片上添加描述:item里添加div:carousel-caption
模态框Modal
大小:modal-sm放在modal-dialog
提示框
data-toggle="tooltip"
提示内容：title
jquery
位置：data-placement：top/...
弹出框
data-toggle="popover"
title
data-content
jquery
关闭:data-trigger="focus"、data-trigger="hover"
滚动监听(Scrollspy)
监听的元素（通常是 body）添加 data-spy="scroll"
data-target 属性，它的值为导航栏的 id 或 class (.navbar)
可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （<a href="#section1">
可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px
position 属性设置为 "relative"
小工具
添加或移除边框border border-top-0
边框颜色 border-primary
边框圆角：rounded-left、circle、0
清除浮动：clearfix
响应式浮动：float-sm|lg|md|xs-right/0
居中对齐mx-auto
宽度：w-25/高度h-25
Flex（弹性）布局
容器d-flex 子元素：p-2
同一行：d-inline-flex
水平显示：flex-row flex-row-reverse右对齐
垂直：flex-column/翻转：flex-column-reverse
内容排列：justify-content-start (默认), end, center, between 或 around:
等宽：flex-fill
扩展：flex-grow-1 用于设置子元素使用剩下的空间
排序：order 从 .order-1 到 .order-12，数字越低权重越高
外边距：mr-auto、ml-auto
包裹：flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse 单行、多行、反多行<br>
内容对齐：align-content-* 来控制在垂直方向上如何去堆叠子元素
align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
子元素对齐;.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认
指定子元素对齐align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)
多媒体对象media
子容器：media-body
定位多媒体图片位置：align-self-*
