W3.CSS 分頁
基本分頁
如果您的網站有很多頁面，您可能需要使用某種分頁。
要建立基本分頁，請在條形（w3-bar）中使用按鈕（w3-button）。
示例
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
要刪除按鈕之間的空格，請新增 w3-bar-item 類
示例
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
分頁箭頭
使用 HTML 實體或圖示庫中的圖示來新增分頁箭頭
示例
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
活動/當前連結
使用 w3-color 類之一來指示使用者當前所在的頁面
示例
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
懸停顏色
預設情況下，當您將滑鼠移到分頁連結上時，它們會獲得灰色背景。使用任何 w3-hover-color 類來更改懸停顏色
示例
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">«</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">»</a>
</div>
分頁大小
使用 w3-tiny、w3-small、w3-large、w3-xlarge、w3-xxlarge 或 w3-xxxlarge 來調整分頁大小
居中分頁
要居中分頁，請將“w3-bar”元素放入“w3-center”元素中
示例
<div class="w3-center">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
帶邊框的分頁
新增 w3-border 類來建立帶邊框的分頁
圓角邊框
在 w3-border 旁邊新增 w3-round 類以獲得圓角邊框
其他分頁示例
w3-bar 類也可以用來建立下一頁/上一頁按鈕
下一頁/上一頁示例
<div class="w3-bar w3-border w3-round">
<a href="#" class="w3-button">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</a>
</div>
內聯選單示例
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a href="#" class="w3-bar-item w3-button">連結 1</a>
<a href="#" class="w3-bar-item w3-button">連結 2</a>
<a href="#" class="w3-bar-item w3-button">連結 3</a>
</div>
</div>
