# 分页 轻松创建一个美观的分页导航来浏览网页。 ## 用法 分页组件由类似按钮风格的链接并排排列组成。 | 类 | 概述 | | --- | --- | | `.uk-pagination` | 将这个类添加到一个 `&lt;ul&gt;` 元素，定义分页导航组件。使用 `&lt;a&gt;` 元素作为分页导航列表中的项目。 | | `.uk-active` | 将这个类添加到一个列表项，对其应用选中的状态，使用 `&lt;span&gt;` 替代 `&lt;a&gt;` 元素。 | | `.uk-disabled` | 将这个类添加到一个列表项，对其应用禁用状态，使用 `&lt;span&gt;` 替代 `&lt;a&gt;` 元素。 | 要应用一个无样式的省略号，只需使用 `&lt;span&gt;` 来替代 `&lt;a&gt;` 元素。 ### 示例  ### Code. ``` <ul class="uk-pagination"> <li><a href="">...</a></li> <li class="uk-active"><span>...</span></li> <li class="uk-disabled"><span>...</span></li> <li><span>...</span></li> </ul> ``` * * * ## 对齐修饰类 向页码添加 `.uk-pagination-left` 或 `.uk-pagination-right` 类使其向左或者向右对齐。 #### 示例  ### Code. ``` <ul class="uk-pagination uk-pagination-left"> <li>...</li> </ul> ``` ``` <ul class="uk-pagination uk-pagination-right"> <li>...</li> </ul> ``` * * * ## 上一页与下一页 创建一个简单上一页和下一页分页导航是非常容易的。只需添加 `.uk-pagination-previous` 或 `.uk-pagination-next` 类到一个 `&lt;li&gt;` 元素，其向左或者向右对齐。 #### 示例  #### Code. ``` <li class="uk-pagination-previous"><a href="">...</a></li> <li class="uk-pagination-next"><a href="">...</a></li> ``` * * * ## 带图标的分页导航 使用 [图标组件](icon.html) 中的图标增强分页导航效果。添加一个 `.uk-icon-*` 类到分页导航链接里的 `&lt;i&gt;` 或 `&lt;span&gt;` 元素中。 ### 示例  ### Code. ``` <li><a href=""><i class="uk-icon-angle-double-left"></i></a></li> <li><a href=""><i class="uk-icon-angle-double-right"></i></a></li> ``` * * * ## JavaScript 你可以应用附加组件中的[分页组件](pagination-js.html)来自动计算页码，例如在由Ajax支持的列表视图中触发一个事件，动态地加载新的列表项。