本次知识点：1.分页2.标签3.徽章4.巨幕5.页头6.缩略图7.警告框1.分页（1）默认的分页...
本次知识点：
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，如需转载请联系原作者
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：数据分析那点事儿（四） 下一篇：Web前端 — Bootstrap（7）
