本次知识点：
1.分页
2.标签
3.徽章
4.巨幕
5.页头
6.缩略图
7.警告框
1.分页
（1）默认的分页
-
<ul class="pagination">
-
<li>
<a href="">«
</a>
</li>
-
<li>
<a href="">1
</a>
</li>
-
<li>
<a href="">2
</a>
</li>
-
<li>
<a href="">3
</a>
</li>
-
<li>
<a href="">»
</a>
</li>
-
</ul>
（2）禁用和激活的状态
-
<ul class="pagination">
-
<li class="disabled">
<a href="">«
</a>
</li>
-
<li class="active">
<a href="">1
</a>
</li>
-
<li>
<a href="">2
</a>
</li>
-
<li>
<a href="">3
</a>
</li>
-
<li>
<a href="">»
</a>
</li>
-
</ul>
（3）分页的尺寸
pagination-lg 、 pagination-sm
-
<ul class="pagination pagination-lg">
-
<li>
<a href="#">«
</a>
</li>
-
<li>
<a href="#">1
</a>
</li>
-
<li>
<a href="#">2
</a>
</li>
-
<li>
<a href="#">3
</a>
</li>
-
<li>
<a href="#">4
</a>
</li>
-
<li>
<a href="#">5
</a>
</li>
-
<li>
<a href="#">»
</a>
</li>
-
</ul>
-
<ul class="pagination pagination-sm">
-
<li>
<a href="#">«
</a>
</li>
-
<li>
<a href="#">1
</a>
</li>
-
<li>
<a href="#">2
</a>
</li>
-
<li>
<a href="#">3
</a>
</li>
-
<li>
<a href="#">4
</a>
</li>
-
<li>
<a href="#">5
</a>
</li>
-
<li>
<a href="#">»
</a>
</li>
-
</ul>
（4）翻页
Pager
-
<ul class="pager">
-
<li>
<a href="">previous
</a>
</li>
-
<li>
<a href="">next
</a>
</li>
-
</ul>
（5）对齐的链接
-
<ul class="pager">
-
<li class="previous">
<a href="">← previous
</a>
</li>
-
<li class="next">
<a href="">next →
</a>
</li>
-
</ul>
（6）可选的禁用状态
-
<ul class="pager">
-
<li class="previous disabled">
<a href="">← previous
</a>
</li>
-
<li class="next">
<a href="">next →
</a>
</li>
-
</ul>
2.标签
-
<span class="label label-default">Default</span>
-
<span class="label label-primary">Primary
</span>
-
<span class="label label-success">Success
</span>
-
<span class="label label-info">Info
</span>
-
<span class="label label-warning">Warning
</span>
-
<span class="label label-danger">Danger
</span>
3.徽章
badge
-
<a href="">Messages <span class="badge">20</span></a>
-
<button class="btn btn-default">Messages
<span class="badge">20
</span>
</button>
4.巨幕
jumbotron
-
<div class="jumbotron">
-
<div class="container">
-
<h1>hello world!!!
</h1>
-
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
-
content or information.
</p>
-
<p>
<a class="btn btn-primary" href="">Learn more
</a>
</p>
-
</div>
-
</div>
5.页头
page-header
-
<div class="page-header">
-
<h1>Example page header
-
<small>Subtext for header
</small>
-
</h1>
-
</div>
6.缩略图
（1）默认样式
-
<div class="col-md-3 col-sm-6">
-
<a class="thumbnail" href="">
-
<img src="images/kittens.jpg" alt=""/>
-
</a>
-
</div>
（2）自定义内容
-
<div class="col-md-3 col-sm-6">
-
<div class="thumbnail">
-
<img src="images/kittens.jpg" alt=""/>
-
<div class="caption">
<!--text-center-->
-
<h3>缩略图标签
</h3>
-
<p>一些示例文本。一些示例文本。
</p>
-
<p>
-
<a href="#" class="btn btn-primary" role="button">按钮
</a>
-
<a href="#" class="btn btn-default" role="button">按钮
</a>
-
</p>
-
</div>
-
</div>
-
</div>
7.警告框
（1）基本默认样式
-
<div class="alert alert-success">成功！很好地完成了提交。</div>
-
<div class="alert alert-info">信息！请注意这个信息。
</div>
-
<div class="alert alert-warning">警告！请不要提交。
</div>
-
<div class="alert alert-danger">错误！请进行一些更改。
</div>
（2）可关闭的警告框
<button type="button" class="close" data-dismiss="alert">×</button>（3）警告中的链接
-
<div class="alert alert-success">
-
<a href="#" class="alert-link">成功！很好地完成了提交。
</a>
-
</div>
原文发布时间：2018年06月13日 09:21:52
原文作者：Roger_CoderLife
本文来源CSDN，如需转载请联系原作者
