amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination
一、总结
1、分页使用:还是ul包li的形式: 分页组件,<ul>
/ <ol>
添加 .am-pagination
class, 包含一系列 <li>
。
<ul class="am-pagination">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
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>
,创建一个仅包含 上一页
和 下一页
的分页组件。
<ul class="am-pagination">
<li class="am-pagination-prev"><a href="">« Prev</a></li>
<li class="am-pagination-next"><a href="">Next »</a></li>
</ul>
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
- 激活
基本样式
<ul class="am-pagination">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<hr />
<ul class="am-pagination">
<li><a href="">« Prev</a></li>
<li><a href="">Next »</a></li>
</ul>
对齐方式
默认为左对齐。
居中对齐
在默认样式的基础上添加 .am-pagination-centered
class。
<ul class="am-pagination am-pagination-centered">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
右对齐
在默认样式的基础上添加 .am-pagination-right
class。
<ul class="am-pagination am-pagination-right">
<li class="am-disabled"><a href="#">«</a></li>
<li class="am-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
左右分布
添加 .am-pagination-prev
及 .am-pagination-next
到 <li>
,创建一个仅包含 上一页
和 下一页
的分页组件。
<ul class="am-pagination">
<li class="am-pagination-prev"><a href="">« Prev</a></li>
<li class="am-pagination-next"><a href="">Next »</a></li>
</ul>
结合图标使用
将文字部分用图标替换即可。
- ...
<ul class="am-pagination">
<li><a href=""><span class="am-icon-angle-double-left"></span></a></li>
<li><span>...</span></li>
<li><a href=""><span class="am-icon-angle-double-right"></span></a></li>
</ul>
注意: <li>
里面的非链接文字需要使用 <span>
包裹。
Tips: 使用 MongoDB 的同学可以试试 mongoose-paginater。
amazeui学习笔记--css(常用组件11)--分页Pagination的更多相关文章
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
随机推荐
- 在 Snoop 中使用 PowerShell 脚本进行更高级的 UI 调试
原文:在 Snoop 中使用 PowerShell 脚本进行更高级的 UI 调试 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布, ...
- 【Henu ACM Round#17 D】Hexagons!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 题目的图吓人. 找下规律就会发现从内到外是1,6,12,18 即1,16,26,36... 即1+6(1+2+3+...) 等差求和 ...
- Java 实现有序链表
有序链表: 按关键值排序. 删除链头时,就删除最小(/最大)的值,插入时,搜索插入的位置. 插入时须要比較O(N),平均O(N/2),删除最小(/最大)的在链头的数据时效率为O(1), 假设一个应用须 ...
- Cocos2dx 小技巧(十二) 一种可行的系列动画播放方式
今早发生了一件事让我感觉特气愤!去年的这个时候,我和小伙伴们一起在操场上拍毕业照,之后有个当地报纸的记者来我们学校取材,看到我们后打算给我们拍几张创意张扬点的毕业照.之后呢,照片出来了,拍的效果大伙都 ...
- AVEVA PDMS 三维文字工具
AVEVA PDMS 三维文字工具 eryar@163.com 网上有个文字工具插件,可以在PDMS中创建三维的字母和数字,且字体样式只有一种,其下载地址为:http://www.plantcon.d ...
- python爬虫之『入门基础』
HTTP请求 1.首先需要了解一下http请求,当用户在地址栏中输入网址,发送网络请求的过程是什么? 可以参考我之前学习的时候转载的一篇文章一次完整的HTTP事务过程–超详细 2.还需要了解一下htt ...
- JavaScript学习总结(9)——JS常用函数(一)
本文中,收集了一些比较常用的Javascript函数,希望对学习JS的朋友们有所帮助. 1. 字符串长度截取 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 ...
- aop 中joinpoint的使用方法
一.簡述下joinpoint在不同情況下的不同: 1.在around中可以用,此時可以執行被包裹的代碼,可以根據情況來判斷是否執行被包裹的代碼,以實現控制的作用. public void around ...
- 洛谷——T1725 探险
http://codevs.cn/problem/1725/ 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Descri ...
- mvc定时执行任务(获取气象台的气象数据,定时新增)
1.定时任务: gloabl.asax文件Application_Start()方法注册: System.Timers.Timer t = new System.Timers.Timer(theInt ...