Bootstrap基础学习笔记

【网格系统】

.row	定义一行
.col	均分列数，最多一行12列。每列左右间隙各15px
.col-{1到12}	定义在所有屏幕下的列宽
.col-{sm|md|lg|xl}-{1到12}	定义在指定屏幕下该列占据的列宽，sm:屏幕>=576px、md:屏幕>=720px、lg:屏幕>=960px、xl:屏幕>=1200px
.offset-{1到11}	在所有屏幕下的列偏移
.offset-{sm|md|lg|xl}-{1到11}	在指定屏幕下的列偏移

【显示隐藏】

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

【常用背景颜色】

.bg-primary	重要的背景颜色
.bg-success	执行成功背景颜色
.bg-info	信息提示背景颜色
.bg-warning	警告背景颜色
.bg-danger	危险背景颜色
.bg-secondary	副标题背景颜色
.bg-dark	深灰背景颜色
.bg-light	浅灰背景颜色

【文字常用标签】 

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>	标题类标签，h1字体最大以次类推
<small>	更小、颜色更浅的字号。
<mark>	黄色背景及有一定的内边距的文本
<abbr>	简要标签, 结合title使用,示例: <abbr title="移上去显示这里的文字">Add:</abbr>
<blockquote>	引用标签，可结合.blockquote 类，及footer标签、blockquote-footer 示例：<blockquote class="blockquote">内容 <footer class="blockquote-footer">脚底</footer> </blockquote>
<dl>、<dt>、<dd>	在bootstrap中，dt、dd默认为块级元素。其中dt为粗体字。
<code>	内联代码样式
<pre>	块级代码样式
<kbd>	内联样式，黑色圆角边框，白字样式。

【文字常用样式】

.display-{1到4}	标题类，显示更大的字号，值为1-4，display-1字号最大。
.small	更小、颜色更浅的字号。
.font-weight-bold	粗体
.font-weight-normal	普通文本
.font-weight-light	更细的文本
.font-italic	斜体文本
.lead	让段落更突出
.text-left	左对齐
.text-right	右对齐
.text-center	居中对齐
.text-justify	两端对齐
.text-nowrap	段落中超出屏幕部分不换行
.text-lowercase	设定文本小写
.text-uppercase	设定文本大写
.text-capitalize	设定单词首字母大写
.initialism	显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字
.list-unstyled	移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline	内联列表样式。将所有列表项放置同一行
.pre-scrollable	使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

【文字颜色样式】

.text-muted	柔和的文本
.text-primary	重要的文本
.text-success	执行成功的文本
.text-info	代表一些提示信息的文本
.text-warning	警告文本
.text-danger	危险操作文本
.text-secondary	副标题
.text-white	白色文本（白色背景上看不清楚）
.text-dark	深灰色文字
.text-light	浅灰色文本（白色背景上看不清楚）

【表格标签】
<table>	定义一个表格
<thead>	表格表头
<tbody>	表格主体内容
<tr>	行
<th>	表头列
<td>	单元格
<caption>	表格标题
【table样式】
.table	基类，以下样式均应用于<table...
.table-striped	定义条纹表格,示例：<table class="table table-striped">
.table-bordered	定义带有边框的条件,示例: <table class="table table-bordered">
.table-hover	为表格的每一行添加鼠标悬停效果（灰色背景）,示例：<table class="table table-hover">
.table-dark	定义黑色背景的表格,示例：<table class="table table-dark">
.table-responsive	创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）,示例: <table class="table table-responsive">
.table-responsive-{sm|md|lg|xl}	定义在指定屏幕尺寸下响应式表格
.table-lg	较大的表格,示例：<table class="table table-lg">
.table-sm	较小的表格,示例：<table class="table table-sm">
【tr、thead样式】
.table-primary	指定tr或thead行的颜色，下同
.table-success	同上
.table-info	同上
.table-danger	同上
.table-warning	同上
.table-active	同上
.table-secondary	同上
.table-light	同上
.table-dark	同上

【图形】

.rounded	图片显示圆角效果
.rounded-circle	设置椭圆形图片
.img-thumbnail	设置图片缩略图(图片有边框)
.img-fluid	响应式图片
.float-right	图片右对齐
.float-left	图片左对齐

 【容器类】

.container	居中容器类，最大宽度默认为1200px。左右间隙15px
.container-fluid	全屏容器类。
.jumbotron	创建一个大的灰色的圆角背景框
.jumbotron-fluid	创建全屏的没有圆角的背景框

【信息提示】

.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">&times;</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">&times;</button> </div>

按钮样式
.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	小号按钮组

菜单触发样式
.dropdown-toggle	下拉基类，定义一个触发下拉的元素。要和data-toggle="dropdown"属性结合使用
.dropdown-toggle-split	菜单分割线，作用未知
菜单列表样式
.dropdown-menu	定义一个下拉菜单容器
.dropdown-menu-right	下拉菜单容器右对齐。默认是左对齐
.dropdown-header	下拉菜单标题
.dropdown-item	下拉菜单列表项目
.dropdown-divider	在下拉菜单中创建一个水平的分割线
.active	启用指定下拉菜单列表项目
.disabled	禁用指定下拉菜单列表项目

【徽章】

.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}	定义进度条的颜色

【分页】

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

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

.breadcrumb	容器类
.breadcrumb-item	链接类
.active	当前项

【列表: 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-{...}不是理想的配色方案，不建议使用。

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

.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}	定义卡片的背景色,定义在卡片容器上

 【边框】

.border	含有边框
.border-{primary | second | dark | light | warning | danger | success | info | white}	边框的颜色
.border-0	四条边都不含边框
.border-{top | right | bottom | left }-0	指定哪一条边不含边框

【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同时设置

 【折叠】可以很容易的实现内容的显示与隐藏。

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>

宽度百分比样式：

.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%