- Bulma 教程
- Bulma - 首頁
- Bulma - 介紹
- Bulma - 概述
- Bulma - 修飾符
- Bulma - 列
- Bulma - 佈局
- Bulma - 表單
- Bulma - 元素
- Bulma - 元件
- Bulma 有用資源
- Bulma - 快速指南
- Bulma - 資源
- Bulma - 討論
Bulma - 分頁
說明
分頁元件提供跨多頁的一系列相關連結。它包括以下元素 -
pagination-previous 和 pagination-next - 這些元素可用於連結到上一頁和下一頁。
pagination-list - 它提供頁面項的數量。
pagination-link - 它指定頁碼的數量。
pagination-ellipsis - 它用於指定範圍選擇器。
下面的示例演示了使用分頁元件的上述元素 -
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
Pagination
</span>
<br>
<br>
<nav class = "pagination" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next page</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
<br>
<br>
<span class = "is-size-5">
Disabled link
</span>
<br>
<br>
<nav class = "pagination" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous" title = "This is the first page" disabled>Previous</a>
<a class = "pagination-next">Next page</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link is-current" aria-label = "Page 1" aria-current = "page">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 3">3</a>
</li>
</ul>
</nav>
<br>
<br>
<span class = "is-size-5">
Centered Pagination
</span>
<br>
<br>
<nav class = "pagination is-centered" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next page</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
<br>
<br>
<span class = "is-size-5">
Right Pagination
</span>
<br>
<br>
<nav class = "pagination is-right" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next page</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
它顯示以下輸出 -
分頁大小
你可以透過對pagination元件使用is-small, is-medium和is-large這3個修飾符來指定分頁的大小。
以下示例介紹瞭如何以不同大小顯示分頁 -
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Pagination Sizes
</span>
<br>
<br>
<span class = "is-size-5">
Small Pagination
</span>
<br>
<br>
<nav class = "pagination is-centered is-small" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
<br>
<br>
<span class = "is-size-5">
Medium Pagination
</span>
<br>
<br>
<nav class = "pagination is-centered is-medium" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
<br>
<br>
<span class = "is-size-5">
Large Pagination
</span>
<br>
<br>
<nav class = "pagination is-centered is-large" role = "navigation" aria-label = "pagination">
<a class = "pagination-previous">Previous</a>
<a class = "pagination-next">Next</a>
<ul class = "pagination-list">
<li>
<a class = "pagination-link" aria-label = "Goto page 1">1</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 2">2</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 25">25</a>
</li>
<li>
<a class = "pagination-link is-current" aria-label = "Page 26" aria-current = "page">26</a>
</li>
<li>
<span class = "pagination-ellipsis">…</span>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 49">49</a>
</li>
<li>
<a class = "pagination-link" aria-label = "Goto page 50">50</a>
</li>
</ul>
</nav>
</div>
</section>
</body>
</html>
執行以上程式碼，你將獲得以下輸出 -
bulma_components.htm
廣告