Bootstrap4(十四)
来源:互联网 发布:linux 重启机器 编辑:程序博客网 时间:2024/04/29 10:48
Bootstrap4 分页
网页开发过程,如果碰到内容过多,一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类::
实例
<ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
尝试一下 »
当前页页码状态
当前页可以使用 .active 类来高亮显示:
实例
<ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
尝试一下 »
不可点击的分页链接
.disabled 类可以设置分页链接不可点击:
实例
<ulclass="pagination"><liclass="page-item disabled"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
尝试一下 »
分页显示大小
可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目,.pagination-sm 类设置小字体的分页条目:
实例
<ulclass="pagination pagination-lg"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul><ulclass="pagination pagination-sm"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul>
尝试一下 »
面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航:
实例
<ulclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Photos</a></li><liclass="breadcrumb-item"><ahref="#">Summer 2017</a></li><liclass="breadcrumb-item"><ahref="#">Italy</a></li><liclass="breadcrumb-item active">Rome</li></ul>
尝试一下 »
阅读全文
0 0
- Bootstrap4(十四)
- Bootstrap4(二十四)
- Bootstrap4
- Bootstrap4(一)
- Bootstrap4(二)
- Bootstrap4(三)
- Bootstrap4(四)
- Bootstrap4(五)
- Bootstrap4(六)
- Bootstrap4(七)
- Bootstrap4(八)
- Bootstrap4(九)
- Bootstrap4(十)
- Bootstrap4(十一)
- Bootstrap4(十二)
- Bootstrap4(十三)
- Bootstrap4(十五)
- Bootstrap4(十六)
- 关于android的OOM和内存溢出的出现与避免简单总结
- python刷题笔记1--Two Sum
- Bootstrap4(十三)
- Java并发编程:volatile关键字解析
- 设计模式之装饰设计模式
- Bootstrap4(十四)
- 最大子序列问题求解
- 【caffe】loss function、cost function和error
- 洛谷P3178 [HAOI2015]树上操作
- list方法总结
- 关于JBOSS记录
- 可编程串口接口芯片8251A
- Spark 在反作弊聚类场景的实践
- Codeforces Round #452 (Div. 2) D. Shovel Sale