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">❮ 上一页</a>
<a href="#" class="w3-button w3-right">下一页 ❯</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">首页</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>
