3.6Bootstrap学习组件篇之分页、徽章

电玩女神 2022-08-27 03:49 193阅读 0赞

**分页**

1、默认分页

代码段：

预览：

![Center][]

激活和禁用

链接在不同情况下可以定制。给不能点击的链接用`.disabled` 并且用`.active`显示是当前页。

你还可以将active或disabled应用于``标签，这样就可以让其保持需要的样式并移除点击功能。

<ul class="pagination">
 <li class="disabled">«</li>
 <li class="active">1 (current)</li>
 ...
 </ul>

### 尺寸 ###

想要更小或更大的分页？要得到更多尺寸，加上`.pagination-lg`或`.pagination-sm`吧。

**2、翻页**

用轻便的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

默认案例：

代码：

<ul class="pager">
 		<li><a href="#">Previous</a></li>
 		<li><a href="#">Next</a></li>
 	 </ul>

预览：

![Center 1][]

**对齐连接**

您可以把链接向两端对齐作为替代。

<ul class="pager"><li class="previous"><a href="\#">&larr; Older</a></li><li class="next"><a href="\#">Newer &rarr;</a></li></ul>

![10114540-7c14a9cb1694484298d5f24f097b4178.png][]

### 可选的禁用状态 ###

翻页链接也用分页中的`.disabled`工具类。

**徽章**

给链接，Bootstrap导航等等加入``，可以容易地高亮新的或未读的条目。

代码：<a href="\#">Inbox 42</a>

![10120032-e650e838dcae48118ab9977f612346df.png][]

#### 自动消失（self colapsing） ####

当没有新的或未读的条目时，里面没有内容的徽章会消失（通过CSS的`:empty`选择器实现）。

#### 跨浏览器兼容性 ####

徽章在Internet Explorer 8中不会自动消失，因为它需要对`:empty`选择器的支持。

#### 适应导航的激活状态 ####

在胶囊式导航和列表式导航中的徽章有内置的样式。

<ul class="nav nav-pills nav-stacked">
 <li class="active">
 <a href="#">
 42
 Home
 </a>
 </li>
 <li><a href="#">School</a></li>
 <li><a href="#">School</a></li>
 <li><a href="#">School</a></li>
 </ul>

![10120735-82087a37e7c34b66aad0f7d45729bfcf.png][]

[Center]: /images/20220824/466484f95fb1472296a23d0b3675d45f.png
[Center 1]: /images/20220824/eea740338b204c0d9d40f31c4dedfa5d.png
[10114540-7c14a9cb1694484298d5f24f097b4178.png]: /images/20220824/394b2442df084dc7ac0319c3297a822f.png
[10120032-e650e838dcae48118ab9977f612346df.png]: /images/20220824/279208287f2f4354a5abe634d8503b30.png
[10120735-82087a37e7c34b66aad0f7d45729bfcf.png]: /images/20220824/f31e0db2586b441b876d13434eafc6ab.png