分页

# 分页 轻松创建一个美观的分页导航来浏览网页。 ## 用法 分页组件由类似按钮风格的链接并排排列组成。 | 类 | 概述 | | --- | --- | | `.uk-pagination` | 将这个类添加到一个 `<ul>` 元素，定义分页导航组件。使用 `<a>` 元素作为分页导航列表中的项目。 | | `.uk-active` | 将这个类添加到一个列表项，对其应用选中的状态，使用 `<span>` 替代 `<a>` 元素。 | | `.uk-disabled` | 将这个类添加到一个列表项，对其应用禁用状态，使用 `<span>` 替代 `<a>` 元素。 | 要应用一个无样式的省略号，只需使用 `<span>` 来替代 `<a>` 元素。 ### 示例  ### Code. ```

• ...
• ...
• ...
• ...

``` * * * ## 对齐修饰类 向页码添加 `.uk-pagination-left` 或 `.uk-pagination-right` 类使其向左或者向右对齐。 #### 示例  ### Code. ```

• ...

``` ```

• ...

``` * * * ## 上一页与下一页 创建一个简单上一页和下一页分页导航是非常容易的。只需添加 `.uk-pagination-previous` 或 `.uk-pagination-next` 类到一个 `<li>` 元素，其向左或者向右对齐。 #### 示例  #### Code. ```

...

...

``` * * * ## 带图标的分页导航 使用 [图标组件](icon.html) 中的图标增强分页导航效果。添加一个 `.uk-icon-*` 类到分页导航链接里的 `<i>` 或 `<span>` 元素中。 ### 示例  ### Code. ```

``` * * * ## JavaScript 你可以应用附加组件中的[分页组件](pagination-js.html)来自动计算页码，例如在由Ajax支持的列表视图中触发一个事件，动态地加载新的列表项。