亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

direktori cari
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類(lèi) Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：手機(jī)、平板電腦、臺(tái)式電腦 Bootstrap 網(wǎng)格系統(tǒng)實(shí)例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實(shí)用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標(biāo)簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對(duì)象（Media Object） Bootstrap 分頁(yè) Bootstrap 徽章（Badges） Bootstrap 進(jìn)度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁(yè)面標(biāo)題（Page Header） Bootstrap 字體圖標(biāo)(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標(biāo)簽頁(yè)（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動(dòng)監(jiān)聽(tīng)（Scrollspy） Bootstrap 過(guò)渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
watak

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 的用法：

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

結(jié)果如下所示：

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

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

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

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

結(jié)果如下所示：

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

分頁(yè)的大小

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

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

結(jié)果如下所示：

分頁(yè)的大小

翻頁(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è)顏色變淡的外觀(guān)。 
<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 的用法：

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

結(jié)果如下所示：

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

對(duì)齊的鏈接

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 翻頁(yè)中對(duì)齊的鏈接</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>

結(jié)果如下所示：

翻頁(yè)中對(duì)齊的鏈接

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

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

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

結(jié)果如下所示：

翻頁(yè)的狀態(tài)
Artikel sebelumnya： Artikel seterusnya：