国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Chinesisches Bootstrap-Handbuch / Bootstrap 分頁(yè)

Bootstrap 分頁(yè)

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

分頁(yè)(Pagination)

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

Class描述示例代碼
.pagination添加該 class 來(lái)在頁(yè)面上顯示分頁(yè)。
<ul class="pagination">
  <li><a href="#">&laquo;</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 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 來(lái)獲取不同大小的項(xiàng)。
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

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

下面的實(shí)例演示了上表中所討論的 class .pagination 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 默認(rèn)的分頁(yè)</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

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

下面的實(shí)例演示了上表中所討論的 class .disabled、.active 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 分頁(yè)的狀態(tài)</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

分頁(yè)的大小

下面的實(shí)例演示了上表中所討論的 class .pagination-* 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 分頁(yè)的大小</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

翻頁(yè)(Pager)

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

Class描述示例代碼
.pager添加該 class 來(lái)獲得翻頁(yè)鏈接。
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next使用 class .previous 把鏈接向左對(duì)齊,使用 .next 把鏈接向右對(duì)齊。
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled添加該 class 來(lái)獲得一個(gè)顏色變淡的外觀。
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

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

下面的實(shí)例演示了上表中所討論的 class .pager 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 默認(rèn)的翻頁(yè)</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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

對(duì)齊的鏈接

下面的實(shí)例演示了上表中所討論的 class .previous、.next 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 翻頁(yè)中對(duì)齊的鏈接</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 class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

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

下面的實(shí)例演示了上表中所討論的 class .disabled 的用法:

實(shí)例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 翻頁(yè)的狀態(tài)</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 class="previous disabled"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例