Bootstrap CSS组件之分页(pagination)和翻页(pager)
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。
//源码
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination > li {
display: inline;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
普通的分页
<ul class="pagination"> <li><a href="#">«</a></li> <li><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>
分页的状态-disabled active
<ul class="pagination"> <li><a href="#">«</a></li> <li class="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 class="disabled"><a href="#">»</a></li> </ul>
分页的大小-pagination-lg，pagination-sm
<ul class="pagination pagination-lg"> <li><a href="#">«</a></li> <li><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>
翻页(pager)
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Jquery 分页插件之Jquery Pagination，包括了Jquery 分页插件之Jquery Pagination的使用技巧和注意事项，需要的朋友参考一下 实用jQuery分页特效插件jquery.pagination.js，基于jQuery实现，可根据pageselectCallback函数callback调用通过ajax调用动态数据，目前的方法是生成JSON数据到JS文
-
引入 import { createApp } from 'vue'; import { Pagination } from 'vant'; const app = createApp(); app.use(Pagination); 代码演示 基础用法 通过 v-model 来绑定当前页码。 <van-pagination v-model="currentPage" :total-items=
-
Pagination 组件主要是基于 Element 的 el-pagination进行了二次封装，并拓展了自动滚动的功能。 使用方式 <template> <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getLi
-
本章讨论Bootstrap支持的分页功能。 分页，无序列表由Bootstrap处理，就像许多其他界面元素一样。 分页(Pagination) 下表列出了Bootstrap提供的用于处理分页的类。 类 描述 示例代码 .pagination 添加此类以获取页面上的分页。 <ul class = "pagination"> <li><a href = "#">«</a></li> <li>
-
当数据量过多时，使用分页分解数据。 基础用法 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。 <div class="block">
-
Pagination 分页 当数据量过多时，使用分页分解数据。 基础用法 :::demo 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为上一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页