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 类也可以用来创建 Next/previous 按钮:
Next/previous 实例
<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">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
