Bootstrap 分頁
本章將說明 Bootstrap 支援的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其他介面元素一樣處理分頁。
分頁（Pagination）
下表列出了 Bootstrap 提供的處理分頁的 class。
| Class | 描述 | 範例程式碼 |
|---|---|---|
| 新增該class 來在頁面上顯示分頁。 | ||
| 您可以自訂鏈接，透過使用 | .disabled 來定義不可點擊的鏈接，透過使用.active 來指示當前的頁面。 | |
| #使用這些 class 來取得不同大小的項。 |
.pagination 的用法：
實例
#執行實例»點擊"運行實例" 按鈕查看線上實例
分頁的狀態下面的實例示範了上表中所討論的class <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>
#執行實例»點擊"運行實例" 按鈕查看線上實例
.disabled、.active 的用法：
# #實例<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 分页的状态</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
</body>
</html>
運行實例»點擊"運行實例"按鈕查看線上實例
##分頁的大小
.pagination-*
的用法：實例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 分页的大小</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <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><br> <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><br> <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> </body> </html>
運行實例»
點擊"運行實例"按鈕查看線上實例
#翻頁（Pager）
| 範例程式碼 | ##.pager | |
|---|---|---|
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> | .previous, .next | |
| 把連結向左對齊，使用 | .next 把連結向右對齊。 <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> | .disabled |
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> | 預設的翻頁下面的實例示範了上表中所討論的class .pager 的用法： ##實例 對齊的連結下面的實例示範了上表所討論的class <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的翻页</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/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> 運行實例»點擊"運行實例"按鈕查看在線實例 .previous、.next 的用法： 實例 ##運行實例» |
