3 Bootstrap4样式
3.1 文本
1、标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
h1……h6标签
.text-muted:为副标题设置字体颜色为#6c757d
<small></small>小标题（副标题）小一号
<big></big>副标题 大一号
<div class="container">
<h3>
Bootstrap
<small class="text-muted">v4.0</small>
</h3>
<h3>
Bootstrap
<big class="text-muted">v4.0</big>
</h3>
</div>
效果：
.display-*:在h标签中添加该类会为标题添加更大型、鲜明的标题样式，有.dispay-1到.dispay-4四种鲜明的标题样式代码如下：
<div class="container">
<h3 class="display-1">Bootstrap</h3>
<h3 class="display-3">Bootstrap</h3>
<h3 class="display-4">Bootstrap</h3>
<h3 class="display-5">Bootstrap</h3>
</div>
效果：
2、内联文本元素
Bootstrap为了达到一些统一风格，美观的目的，可能会对如下表所示的元素进行强化，但是在使用方法上并没有什么区别。
| 标签 | 说明 |
|---|---|
|<del>和<s> |
删除 |
<ins>和<u> |
下划线 |
<strong>和<b> |
加粗 |
<em>和<i> |
斜体 |
<small>或<big> |
加小一号字或加大一号字 |
<abbr> |
表示缩略语，鼠标悬停在它上面时会显示出title的属性值 |
<address> |
表示地址 |
|<blockquote> |
引用块，长引用 |
<code> |
计算机代码 |
<kbd> |
键盘输入文本 |
<samp> |
程序输出文本 |
<pre> |
预格式化文本，其中所有格式将会保留，如空格等 |
<var> |
定义变量 |
<footer>和<cite> |
出处 |
3、文本对齐方式
.text-left：左对齐
.text-right：右对齐
.text-center：居中对齐
.text-justify：两端对齐
.text-nowrap：不换行
4、英文大小写
.text-lowercase：英文全小写
.text-uppercase：英文全大写
.text-capitalize：英文单词首字母大写
3.2 列表
HTML提供了3种列表默认样式，如下所述：
◆ 无序列表：使用ul-li来定义
◆ 有序列表：使用ol-li来定义
◆ 定义列表：使用dl-dt-dd来定义
为了达到统一风格、美观的目的，Bootsrap对这3种列表默认样式做了一些改动，但是在使用方法上并不有什么区别。同时Bootstrap提供了以下两种样式来实现特定的列表项。
◆ .list-unstyled：无样式列表，可以删除列表前面的列表序号或列表符号
◆ .list-inline：行内样式列表，列表项会被放在同一行中。值得注意的是，在Bootstrap4中，需要对列表项设置为".list-inline-item"才会生效。代码：
<div class="container">
<p>普通列表</p>
<ul>
<li>炸酱面</li>
<li>刀削面</li>
<li>担担面</li>
<li>臊子面</li>
</ul>
<p>无样式列表</p>
<ul class="list-unstyled">
<li>炸酱面</li>
<li>刀削面</li>
<li>担担面</li>
<li>臊子面</li>
</ul>
<p>行内样式</p>
<ul class="list-inline">
<li><b>面</b></li>
<li class="list-inline-item">炸酱面</li>
<li class="list-inline-item">刀削面</li>
<li class="list-inline-item">担担面</li>
<li class="list-inline-item">臊子面</li>
</ul>
</div>
效果：
3.3 表格
1、表格样式
Bootstrap提供了一系列表格样式，通过这些样式可以快速开发出样式美观的表格。
.table：表格的一个基类，为每行增加水平分割线和少量的padding
.table-bordered：边框表格，为表格的每一个单元格添加边框线
.table-hover：鼠标高亮，鼠标悬停效果
.table-striped：条纹表格，斑马线效果，隔行换色
2、响应式表格
.table-responsive 响应式表格，给表格父元素设置响应式，小于768出现边框
以移动设备为优先，如果内容不能完全的显示，会出现滚动条
3、状态类
//可以单独设置每一行的背景样式
<tr class=’active’></tr>
.table-active 鼠标悬停在行或单元格上
.table-success 标识成功或积极的动作
.table-info 标识普通的提示信息或动作
.table-warning 标识警告或需要用户注意
.table-danger 表示危险或潜在的带来负面影响的动作
.sr-only 隐藏行
3.4 图片
1、图片的样式
bootstrap提供了一些丰富的图片样式供开发者使用，在Bootstrap4中提供了以下类设置图片的样式：
.rounded 类：圆角图片（在Bootstrap4以前使用.img-rounded类）
<img src="…" class="rounded" >
.rounded-circle 类：椭圆图片（在Bootstrap4以前使用.img-circle类）
<img src="…" class="rounded-circle" >
2、缩略图处理
在Bootstrap4提供了.img-thumbnail 类用于设置图片缩略图(图片有边框)。
<img src="…" class="img-thumbnail" >
3、图片对齐处理
在Bootstrap4中提供了以下两个类设置图片的对齐方式：
◆ .float-right 类来设置图片右对齐
◆ .float-left 类设置图片左对齐
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
4、响应式图片
在Bootstrap4中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。而在Bootstrap4以前是给图片添加.img-responsive样式。
Bootstrap4中的代码：
<img src="..." class="img-fluid">
Bootstrap3中的代码：
<img src="..." class="img-responsive">
3.5 公共样式
3.5.1 边框
使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或任何其他元素。
1、基本边框
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
效果：
2、清除边框
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
<span class=""></span>
3、边框颜色
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
效果：
4、圆角边框
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
效果：
3.5.2 颜色
1、文本颜色
代码：
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
效果：
使用我们提供的悬停和焦点状态（情景）样式，在链接上也能正常使用（呈现）， 注意：e .text-white、 .text-muted这两个 class样式不支持链接上使用（没有链接样式）。
2、背景颜色
代码：
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
效果：
3.6 表单
3.6.1 表单布局
1、基础表单样式
基础表单的样式是堆叠表单 (全屏宽度)，表单控件从上到小显示。
<form>
<label>用户名</label>
<input class="form-control" type="text">
<label>密码</label>
<input class="form-control" type="password">
</form>
2、行内表单
当表单控年数量较少时，可以使用行内表单，行内表单会让所有表单控件表现为inline-block级别的控件，通常用于viewport宽度大于576px的情况下，如果viewport宽度小于576px，则表单样式会自动变回基础表单样式。
<div class="container">
<p>屏幕宽度在大于等于 576px 时才会水平显示。如果小于 576px 则会生成堆叠表单。</p>
<form class="form-inline">
<label>用户名</label>
<input class="form-control" type="text">
<label>密码</label>
<input class="form-control" type="password">
</form>
</div>
3、水平表单
在Bootstrap4之前，label和表单控件通常不是同一行的，如果想要让label和表单控件在同一行，即生成水平表单，则需要使用“.form-horizontal”类样式。而在Bootstrap4版本中被弃用了。在实现水平表单时，需要通过“.col-xxx”系列样式控制lable或者表单控件所占据的列数，代码如下：
<form role="form" >
<div class="form-group row">
<label class="col-lg-2">用户名:</label>
<div class="col-lg-10"><input type="text" class="form-control col-xs-10" ></div>
</div>
<div class="form-group row">
<label class="col-lg-2">密码:</label>
<div class="col-lg-10"><input type="password" class="form-control"></div>
</div>
</form>
3.6.2 复选框样式
1、基础样式
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">HTML
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">CSS
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>JavaScript
</label>
</div>
效果：
2、水平复选框组
.form-check-inline 类可以让选项显示在同一行上
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">HTML
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">CSS
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>JavaScript
</label>
</div>
效果：
3.7 按钮
<a>、<button> 或 <input> 元素可以作为按钮，为这些元素添加.btn类即作为按钮，也可使用Bootstrap 提供的样式。
使用Bootstrap的自定义按钮样式，并广泛用于表单、对话框等场景中的操作，并支持多种大小、状态等一系列变量定义。
1、预定义样式
Bootstrap4提供了以下几种自定义按钮样式：
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
效果：
2、轮廓按钮
.btn 在引用中，如果需要一个按钮，但不需要带来的巨大的背景颜色，使用.btn-outline-*类。代码如下：
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
效果：
3、按钮尺寸
使用 .btn-lg、 .btn-sm
就可以获得不同尺寸的按钮。
代码：
<button type="button" class="btn btn-success">button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Large button</button>
效果：
.btn-block：通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
4、启用状态
.active
5、禁用状态
.disabled
