Bootstrap 菜鳥教程

Bootstrap 插件

Bootstrap 分頁(yè)

本章將講解 Bootstrap 支持的分頁(yè)特性。分頁(yè)(Pagination)，是一種無(wú)序列表，Bootstrap 像處理其他界面元素一樣處理分頁(yè)。

分頁(yè)(Pagination)

下表列出了 Bootstrap 提供的處理分頁(yè)的 class。

Class	描述	示例代碼
.pagination	添加該 class 來(lái)在頁(yè)面上顯示分頁(yè)。	<ul> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul>
.disabled, .active	您可以自定義鏈接，通過(guò)使用 .disabled 來(lái)定義不可點(diǎn)擊的鏈接，通過(guò)使用 .active 來(lái)指示當(dāng)前的頁(yè)面。	<ul> <li><a href="#">«</a></li> <li><a href="#">1<span>(current)</span></a></li> ....... </ul>
.pagination-lg, .pagination-sm	使用這些 class 來(lái)獲取不同大小的項(xiàng)。	<ul>...</ul> <ul>...</ul> <ul>...</ul>

默認(rèn)的分頁(yè)

下面的示例演示了上表中所討論的 class .pagination 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 默認(rèn)的分頁(yè)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

分頁(yè)的狀態(tài)

下面的示例演示了上表中所討論的 class .disabled、.active 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 分頁(yè)的狀態(tài)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
	<li><a href="#">&laquo;</a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><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="#">&raquo;</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

分頁(yè)的大小

下面的示例演示了上表中所討論的 class .pagination-* 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 分頁(yè)的大小</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination pagination-lg">
	<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
	<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
	<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

翻頁(yè)(Pager)

如果您想要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的分頁(yè)鏈接為用戶提供導(dǎo)航，可通過(guò)翻頁(yè)來(lái)實(shí)現(xiàn)。與分頁(yè)鏈接一樣，翻頁(yè)也是無(wú)序列表。默認(rèn)情況下，鏈接是居中顯示。下表列出了 Bootstrap 處理翻頁(yè)的 class。

Class	描述	示例代碼
.pager	添加該 class 來(lái)獲得翻頁(yè)鏈接。	<ul> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
.previous, .next	使用 class .previous 把鏈接向左對(duì)齊，使用 .next 把鏈接向右對(duì)齊。	<ul> <li><a href="#">← Older</a></li> <li><a href="#">Newer →</a></li> </ul>
.disabled	添加該 class 來(lái)設(shè)置對(duì)應(yīng)按鈕禁止使用。	<ul> <li><a href="#">← Older</a></li> <li><a href="#">Newer →</a></li> </ul>

默認(rèn)的翻頁(yè)

下面的示例演示了上表中所討論的 class .pager 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 默認(rèn)的翻頁(yè)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

對(duì)齊的鏈接

下面的示例演示了上表中所討論的 class .previous、.next 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 翻頁(yè)中對(duì)齊的鏈接</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li class="previous"><a href="#">&larr; Older</a></li>
	<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

翻頁(yè)的狀態(tài)

下面的示例演示了上表中所討論的 class .disabled 的用法：

在線示例

示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 示例 - 翻頁(yè)的狀態(tài)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
	<li class="previous disabled"><a href="#">&larr; Older</a></li>
	<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
</body>
</html>

測(cè)試看看 ?/?

結(jié)果如下所示：

分頁(yè)更多示例

類	描述	示例
.pager	一個(gè)簡(jiǎn)單的分頁(yè)鏈接，鏈接居中對(duì)齊。	嘗試一下
.previous	.pager 中上一頁(yè)的按鈕樣式，左對(duì)齊	嘗試一下
.next	.pager 中下一頁(yè)的按鈕樣式，右對(duì)齊	嘗試一下
.disabled	禁用鏈接	嘗試一下
.pagination	分頁(yè)鏈接	嘗試一下
.pagination-lg	更大尺寸的分頁(yè)鏈接	嘗試一下
.pagination-sm	更小尺寸的分頁(yè)鏈接	嘗試一下
.disabled	禁用鏈接	嘗試一下
.active	當(dāng)前訪問(wèn)頁(yè)面鏈接樣式	嘗試一下

Bootstrap 標(biāo)簽 Bootstrap 面包屑導(dǎo)航