1、分页
- 示例
<nav>
<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="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
-
效果图
2、翻页
- (1)、居中对齐(默认)
- 示例
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
-
效果图
(2)、两端对齐
示例
<nav>
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</nav>
-
效果图
3、徽章
-
释义：给链接、导航等元素嵌套
<span class="badge">元素，可以很醒目的展示新的或未读的信息条目 - 示例
<button class="btn btn-primary" type="button">Messages
<span class="badge">4</span>
</button>
-
效果图
- Note
如果没有新的或未读的信息条目，也就是说不包含任何内容，徽章组件能够自动隐藏*（通过CSS的:empty选择符实现) *
4、页头
-
释义：页头组件能够为
h1标签增加适当的空间 - 示例
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
-
效果图
5、缩略图
- 示例
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="a.jpg" style="height: 180px; width: 100%;">
</a>
</div> ...
</div>
-
效果图
- Note
可以给图片设置固定大小，图片大小不同，样式排版会乱
6、面版
释义：默认的
.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容示例
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div> //为面板加入一个标题容器
<div class="panel-body">
<p>Panel content</p>
</div>
<div class="panel-footer">Panel footer</div>
</div>
-
效果图
- Note
- 也可以通过添加设置了
.panel-title类的<h1>-<h6>标签，添加一个预定义样式的标题 - 把按钮或次要的文本放入
.panel-footer容器内（注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容）
