amazeui学习笔记--css(常用组件11)--分页Pagination
一、总结
1、分页使用:还是ul包li的形式: 分页组件,<ul>
/ <ol>
添加 .am-pagination
class, 包含一系列 <li>
。
2、居中对齐:在默认样式的基础上添加 .am-pagination-centered
class。<ul class="am-pagination am-pagination-centered">各种li</ul>
3、右对齐:在默认样式的基础上添加 .am-pagination-right
class。
4、左右分布:添加 .am-pagination-prev
及 .am-pagination-next
到 <li>
,创建一个仅包含 上一页
和 下一页
的分页组件。
5、结合图标使用:将文字部分用图标替换即可。 <li><a href=""><span class="am-icon-angle-double-left"></span></a></li>
二、分页Pagination
Pagination
目录
分页组件,<ul>
/ <ol>
添加 .am-pagination
class, 包含一系列 <li>
。
在 <li>
上添加状态 class:
.am-disabled
- 禁用(不可用).am-active
- 激活
基本样式
对齐方式
默认为左对齐。
居中对齐
在默认样式的基础上添加 .am-pagination-centered
class。
右对齐
在默认样式的基础上添加 .am-pagination-right
class。
左右分布
添加 .am-pagination-prev
及 .am-pagination-next
到 <li>
,创建一个仅包含 上一页
和 下一页
的分页组件。
结合图标使用
将文字部分用图标替换即可。
- ...
注意: <li>
里面的非链接文字需要使用 <span>
包裹。
Tips: 使用 MongoDB 的同学可以试试 。