时间:2021-05-28
几乎所有网站内容都需要分页显示,一个用户体验良好的分页组件会得到访问用户的良好评价。
//源码.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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
当前组件依赖bootstrap样式,使用前请先引用相关css。Vue.component('pagination',{template:`...1{{pageN
分页(Pagination),是一种无序列表,Bootstrap像处理其他界面元素一样处理分页。bootstrap-table介绍bootstrap-table
pagination使用起来非常的方便。第一步:引入分页需要的js(jquery.pagination.js)和css(pagination.css)pagin
我主要讲此代码用于MVC的分布页。先看最终效果最终效果:样式为bootstrap3中的分页“pagination”,如果不使用bootstrap单独提出来并不大
本文实例讲述了Vue开发之封装分页组件与使用。分享给大家供大家参考,具体如下:使用elementui中的el-pagination来封装分页组件paginati