閱讀(7.5k) 書簽贊(1) 我要糾錯

Bootstrap4 分頁

2018-05-29 10:49 更新

在做網頁開發(fā)時，遇到內容很多的情況下，一般會使用分頁來進行處理。在Bootstrap4中，我們可以通過.pagination類和.page-item來實現分頁功能。

分頁：

要創(chuàng)建一個基本的分頁可以在 <ul> 元素上添加 .pagination 類。然后在 <li> 元素上添加 .page-item 類：:

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>分頁</h2>
  <p>要創(chuàng)建一個基本的分頁可以在 ul 元素上添加 .pagination 類。然后在 li 元素上添加 .page-item 類：</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

當前頁頁碼狀態(tài)

當前頁可以使用 .active 類來高亮顯示：

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>當前頁頁碼狀態(tài)</h2>
  <p>當前頁可以使用 .active 類來高亮顯示：</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

效果如下：

QQ截圖20180529104522

不可點擊的分頁鏈接

.disabled 類可以設置分頁鏈接不可點擊:

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>不可點擊的分頁鏈接</h2>
  <p>.disabled 類可以設置分頁鏈接不可點擊:</p>                  
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

分頁顯示大小

可以將分頁條目設置為不同的大小。

.pagination-lg 類設置大字體的分頁條目，.pagination-sm 類設置小字體的分頁條目:

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>分頁顯示大小</h2>
  <p>.pagination-lg 類設置大字體的分頁條目，.pagination-sm 類設置小字體的分頁條目:</p>                  
  <ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
  <ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>
</body>
</html>

面包屑導航

.breadcrumb 和 .breadcrumb-item 類用于設置面包屑導航：

實例：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 實例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>面包屑導航</h2>
  <p>.breadcrumb 和 .breadcrumb-item 類用于設置面包屑導航：</p>                  
  <ul class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Photos</a></li>
    <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
    <li class="breadcrumb-item"><a href="#">Italy</a></li>
    <li class="breadcrumb-item active">Rome</li>
  </ul>
</div>
</body>
</html>

以上內容是否對您有幫助：

← Bootstrap4 進度條

Bootstrap4 列表組 →

寫筆記

我要補充