閱讀(826) 書(shū)簽贊(0) 我要糾錯(cuò)

Bootstrap5 分頁(yè)

2023-06-25 16:05 更新

網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程，如果碰到內(nèi)容過(guò)多，一般都會(huì)做分頁(yè)處理。

Bootstrap 5 可以很簡(jiǎn)單的實(shí)現(xiàn)分頁(yè)效果。

要?jiǎng)?chuàng)建一個(gè)基本的分頁(yè)可以在 <ul> 元素上添加 .pagination 類(lèi)。然后在 <li> 元素上添加 .page-item 類(lèi)，<li> 元素的 <a> 標(biāo)簽上添加 .page-link 類(lèi):

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>分頁(yè)</h2>
  <p>要?jiǎng)?chuàng)建一個(gè)基本的分頁(yè)可以在 ul 元素上添加 .pagination 類(lèi)。然后在 li 元素上添加 .page-item 類(lèi)：</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>

當(dāng)前頁(yè)頁(yè)碼狀態(tài)

當(dāng)前頁(yè)可以使用 .active 類(lèi)來(lái)高亮顯示：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>當(dāng)前頁(yè)頁(yè)碼狀態(tài)</h2>
  <p>當(dāng)前頁(yè)可以使用 .active 類(lèi)來(lái)高亮顯示：</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>

不可點(diǎn)擊的分頁(yè)鏈接

.disabled 類(lèi)可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>不可點(diǎn)擊的分頁(yè)鏈接</h2>
  <p>.disabled 類(lèi)可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:</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>

分頁(yè)顯示大小

可以將分頁(yè)條目設(shè)置為不同的大小。

.pagination-lg 類(lèi)設(shè)置大字體的分頁(yè)條目，.pagination-sm 類(lèi)設(shè)置小字體的分頁(yè)條目:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>分頁(yè)顯示大小</h2>
  <p>.pagination-lg 類(lèi)設(shè)置大字體的分頁(yè)條目，.pagination-sm 類(lèi)設(shè)置小字體的分頁(yè)條目:</p>                  
 

  <p>大:</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>

  <p>默認(rèn):</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>

  <p>小:</p>
  <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>

分頁(yè)的對(duì)齊方式

可以使用工具類(lèi)來(lái)設(shè)置分頁(yè)的對(duì)齊方式：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>分頁(yè)的對(duì)齊方式</h2>
  <p>可以使用工具類(lèi)來(lái)設(shè)置分頁(yè)的對(duì)齊方式：</p>                  
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
  </ul>
</div>

</body>
</html>

面包屑導(dǎo)航

.breadcrumb 和 .breadcrumb-item 類(lèi)用于設(shè)置面包屑導(dǎo)航：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  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"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>面包屑導(dǎo)航</h2>
  <p>.breadcrumb 和 .breadcrumb-item 類(lèi)用于設(shè)置面包屑導(dǎo)航：</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>

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

← Bootstrap5 加載效果

Bootstrap5 列表組 →

寫(xiě)筆記

我要補(bǔ)充