閱讀(5.4k) 書(shū)簽贊(1) 我要糾錯(cuò)

Bootstrap 分頁(yè)

2018-03-04 17:29 更新

在本章節(jié)中顯示如何使用Bootstrap創(chuàng)建分頁(yè)（Pagination）。

分頁(yè)通過(guò)將內(nèi)容分成不同的頁(yè)面來(lái)組織內(nèi)容。

以下代碼顯示如何創(chuàng)建分頁(yè)。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li><a href="#">&amp;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="#">&amp;raquo;</a></li>
    </ul>
</div>
</body>
</html>

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

分頁(yè)里面的鏈接可以定制。

下面的代碼顯示了如何使用類(lèi) .disabled 來(lái)使鏈接不可點(diǎn)擊，使用 .active 來(lái)表示當(dāng)前頁(yè)面。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li class="disabled"><a href="#">&amp;laquo;</a></li>
        <li class="active"><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="#">&amp;raquo;</a></li>
    </ul>
</div>
</body>
</html>

刪除點(diǎn)擊功能

.disabled 類(lèi)僅顯示已禁用的鏈接，并且不會(huì)刪除點(diǎn)擊功能。

要?jiǎng)h除點(diǎn)擊功能，可使用active或disabled的錨點(diǎn)與span交換。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li class="disabled"><span>&amp;laquo;</span></li>
        <li class="active"><span>1</span></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="#">&amp;raquo;</a></li>
    </ul>
</div>
</body>
</html>

更改分頁(yè)的大小

要更改分頁(yè)的大小以增加或減少可點(diǎn)擊區(qū)域，將相關(guān)尺寸的類(lèi)（如.pagination-lg或.pagination-sm）添加到.pagination基類(lèi)中。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <div>
        <ul class="pagination pagination-lg">
            <li><a href="#">&amp;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="#">&amp;raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination">
            <li><a href="#">&amp;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="#">&amp;raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination pagination-sm">
            <li><a href="#">&amp;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="#">&amp;raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>

翻頁(yè)（Pager）

要僅顯示上一個(gè)和下一個(gè)鏈接，請(qǐng)使用類(lèi) .pager 。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>
</body>
</html>

Pager對(duì)齊

默認(rèn)情況下pager是中心對(duì)齊的，使用類(lèi).previous和.next分別將前一個(gè)鏈接左對(duì)齊和下一個(gè)鏈接右對(duì)齊。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li class="previous"><a href="#">&amp;larr; Previous</a></li>
        <li class="next"><a href="#">Next &amp;rarr;</a></li>
    </ul>
</div>
</body>
</html>

禁用Pager

要禁用和標(biāo)記active到pager，請(qǐng)使用 .disabled 和 .active 類(lèi)。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li class="previous disabled"><a href="#">&amp;larr; Previous</a></li>
        <li class="next"><a href="#">Next &amp;rarr;</a></li>
    </ul>
</div>
</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：

← Bootstrap 導(dǎo)航欄

Bootstrap 面板 →

寫(xiě)筆記

我要補(bǔ)充

Bootstrap 分頁(yè)

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

刪除點(diǎn)擊功能

更改分頁(yè)的大小

翻頁(yè)（Pager）

Pager對(duì)齊

禁用Pager

推薦文章

推薦教程

推薦課程