八、bootstrap分页、标签、徽章、巨幕、页头、缩略图、警告
2017-10-26 本文已影响0人
东东丶酱
知识点:
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
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="">
![](images/kittens.jpg)
</a>
</div>
2)自定义内容
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
![](images/kittens.jpg)
<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>