Bootstrap <基礎十九>分頁

時間 2019-12-07

標籤 bootstrap 基礎十九分頁欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 支持的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其餘界面元素同樣處理分頁。

分頁（Pagination）

下表列出了 Bootstrap 提供的處理分頁的 class。css

Class	描述	示例代碼
.pagination	添加該 class 來在頁面上顯示分頁。	<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul>
.disabled, .active	您能夠自定義連接，經過使用 .disabled 來定義不可點擊的連接，經過使用 .active 來指示當前的頁面。	<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul>
.pagination-lg, .pagination-sm	使用這些 class 來獲取不一樣大小的項。	<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul>

Class

描述

示例代碼

.pagination

添加該 class 來在頁面上顯示分頁。

<ul class="pagination"> <li><a href="#">&laquo;</a></li> <li><a href="#">1</a></li> ....... </ul>

.disabled, .active

您能夠自定義連接，經過使用 .disabled 來定義不可點擊的連接，經過使用 .active 來指示當前的頁面。

<ul class="pagination"> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul>

.pagination-lg, .pagination-sm

使用這些 class 來獲取不一樣大小的項。

<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul>

默認的分頁

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 默認的分頁</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：jquery

分頁的狀態

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 分頁的狀態</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：網絡

分頁的大小

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 分頁的大小</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：post

翻頁（Pager）

若是您想要建立一個簡單的分頁連接爲用戶提供導航，可經過翻頁來實現。與分頁連接同樣，翻頁也是無序列表。默認狀況下，連接是居中顯示。下表列出了 Bootstrap 處理翻頁的 class。字體

Class	描述	示例代碼
.pager	添加該 class 來得到翻頁連接。	<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
.previous, .next	使用 class .previous 把連接向左對齊，使用 .next把連接向右對齊。	<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
.disabled	添加該 class 來得到一個顏色變淡的外觀。	<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>

Class

描述

示例代碼

.pager

添加該 class 來得到翻頁連接。

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

.previous, .next

使用 class .previous 把連接向左對齊，使用 .next把連接向右對齊。

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

.disabled

添加該 class 來得到一個顏色變淡的外觀。

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

默認的翻頁

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 默認的翻頁</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：插件

對齊的連接

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 翻頁中對齊的連接</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：

翻頁的狀態

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 翻頁的狀態</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/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>

結果以下所示：