博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
amazeui学习笔记--css(常用组件11)--分页Pagination
阅读量:4688 次
发布时间:2019-06-09

本文共 1438 字,大约阅读时间需要 4 分钟。

amazeui学习笔记--css(常用组件11)--分页Pagination

一、总结

1、分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>

1 

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 - 激活

基本样式

 Copy

对齐方式

默认为左对齐。

居中对齐

在默认样式的基础上添加 .am-pagination-centered class。

 Copy

右对齐

在默认样式的基础上添加 .am-pagination-right class。

 Copy

左右分布

添加 .am-pagination-prev 及 .am-pagination-next 到 <li>,创建一个仅包含 上一页 和 下一页 的分页组件。

 Copy

结合图标使用

将文字部分用图标替换即可。

 Copy
  • ...
  • ...

注意: <li> 里面的非链接文字需要使用 <span> 包裹。

Tips: 使用 MongoDB 的同学可以试试 。

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9012018.html

你可能感兴趣的文章
pip 警告!The default format will switch to columns in the future
查看>>
Arrays类学习笔记
查看>>
实验吧之【天下武功唯快不破】
查看>>
2019-3-25多线程的同步与互斥(互斥锁、条件变量、读写锁、自旋锁、信号量)...
查看>>
win7-64 mysql的安装
查看>>
dcm4chee 修改默认(0002,0013) ImplementationVersionName
查看>>
maven3在eclipse3.4.2中创建java web项目
查看>>
发布时间 sql语句
查看>>
黑马程序员 ExecuteReader执行查询
查看>>
记一些从数学和程序设计中体会到的思想
查看>>
题目1462:两船载物问题
查看>>
POJ 2378 Tree Cutting(树形DP,水)
查看>>
第二冲刺阶段个人博客5
查看>>
UVA 116 Unidirectional TSP (白书dp)
查看>>
第三方测速工具
查看>>
MySQL 网络访问连接
查看>>
在aws ec2上使用root用户登录
查看>>
数据访问 投票习题
查看>>
CIO知识储备
查看>>
cnblog!i'm coming!
查看>>