这里可以使用.disabled 样式来实现. 如图所示, 让上一页不能点击. 在不想让单击的样式上加上.disabled 即可.
五、在分页里面, 定义了除了默认的样式大小之外, 还定义了另外两种样式.
1 .pagination-lg 比默认样式大的样式
2 .pagination-sm 比默认样式小的样式
实现代码对比效果. 左侧是放大的样式, 右侧是缩小的样式.
六、这里给出的样式都是最简单的样式, 如果需要其他样式的, 比方说, 不喜欢这个颜色. 等等, 那就需要自己自定义样式来实现.
END
bootstrap的翻页
1、用简单的标记和样式,就能做个上一页和下一页的简单翻页。比方说博客和文章类的网站, 就很多使用了这样的样式. 样式使用.pager, 效果和代码如图, 这里更加简单的显示了上一页和下一页. 样式是居中在页面上. 那如何把上一项和下一项放在页面的两端呢. 继续往下看.
2、如何让按钮在两端显示呢? 这里使用对齐链接. 样式分别为: .previous 和 .next
实现代码如图. 需要注意的是, 这个样式里面默认不支持, 使用分页样式, 如果想两种同时使用, 需要自己另外写代码.
3、在翻页这个样式里面, 也可以让上一篇或者下一篇禁用, 禁用方法和分页一样, 使用样式.disabled
4、这两种样式, 基本上都能够支持大多少我们遇到的分页问题. 还有一种就是移动端的, 这个的话, 就可以使用一个链接按钮, 然后异步获得数据就可以了.
以上就是bootstrap怎么实现分页技术的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《bootstrap》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者