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

本文共 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

你可能感兴趣的文章
RedHat 6 安装配置Apache 2.2
查看>>
Openstack 安装部署指南翻译系列 之 Manila服务安装(Share Storage)
查看>>
underscore.js学习笔记
查看>>
windows下常用命令
查看>>
1.5编程基础之循环控制_29:数字反转
查看>>
组策略 之 设备安装设置
查看>>
人工智能还能干这些?这8种AI应用你可能意想不到
查看>>
实现Hyper-V 虚拟机在不同架构的处理器间迁移
查看>>
简单使用saltstack
查看>>
针对web服务器容灾自动切换方案
查看>>
突破媒体转码效率壁垒 阿里云首推倍速转码
查看>>
容器存储中那些潜在的挑战和机遇
查看>>
R语言的三种聚类方法
查看>>
55%受访企业将物联网战略视为有效竞争手段
查看>>
深入理解Python中的ThreadLocal变量(上)
查看>>
如果一切即服务,为什么需要数据中心?
查看>>
《游戏开发物理学(第2版)》一导读
查看>>
Erlang简史(翻译)
查看>>
深入实践Spring Boot2.4.2 节点和关系实体建模
查看>>
信息可视化的经典案例:伦敦地铁线路图
查看>>