分页
轻松创建美观的分页，以便在页面之间导航。
用法
分页组件由并排对齐的按钮样式链接组成。
| 类 | 描述 |
|---|---|
.uk-pagination |
将此类添加到 <ul> 元素以定义分页组件。使用 <a> 元素作为列表内的分页项。 |
.uk-active |
将此类添加到列表项以应用活动状态，并使用 <span> 而不是 <a> 元素。 |
.uk-disabled |
将此类添加到列表项以应用禁用状态，并使用 <span> 而不是 <a> 元素。 |
要应用没有任何样式的省略号，只需使用 <span> 元素而不是 <a> 元素即可。
示例
标记
<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 类添加到分页以使其向左或向右对齐。
示例
标记
<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 类添加到 <li> 元素，即可将上一页和下一页按钮向左或向右对齐。
示例
标记
<li class="uk-pagination-previous"><a href="">...</a></li>
<li class="uk-pagination-next"><a href="">...</a></li>带有图标的分页
通过将 .uk-icon-* 类之一添加到分页链接内的 <i> 或 <span> 元素，使用 图标组件 中的图标增强您的分页。
示例
标记
<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
您可以应用额外的 动态分页组件 来自动计算页面，例如，触发事件以在 Ajax 驱动的列表视图中动态加载新项目。
