W3.CSS 分页
基本分页
如果您的网站有很多页面，您可能需要使用某种分页功能。
要创建基本分页，请使用按钮 (w3 按钮）在酒吧里（w3-栏).
例子
<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-栏目 班级：
例子
<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-颜色 类来指示用户位于哪个页面：
例子
<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-悬停-颜色 改变悬停颜色的类：
例子
<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-小, w3-大, 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-边框 类来创建带有边框的分页：
圆角边框
添加 w3 回合 w3-border 旁边的类用于圆角边框：
其他分页示例
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>
