Bootstrap中分页导航Pagination组件的用法是什么
导读：这篇文章分享给大家的内容是关于Bootstrap中分页导航Pagination组件的用法是什么，本文介绍得很详细，内容很有参考价值，希望可以帮到有需要的小伙伴，接下来就让小编带领大家一起了解看看吧。 1、简单例子分页导航一般用于文章列表页、...
这篇文章分享给大家的内容是关于Bootstrap中分页导航Pagination组件的用法是什么，本文介绍得很详细，内容很有参考价值，希望可以帮到有需要的小伙伴，接下来就让小编带领大家一起了解看看吧。1、简单例子
分页导航一般用于文章列表页、下载列表、图片列表等，由于数据很多，不可能在一页显示，一般分页导航包括上一页、下一页、数字页码等。 下面是一个简单的例子：
nav aria-label="Page navigation">
ul class="pagination">
li class="page-item">
a class="page-link" href="#">
上一页/a>
/li>
li class="page-item">
a class="page-link" href="#">
1/a>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
li class="page-item">
a class="page-link" href="#">
下一页/a>
/li>
/ul>
/nav>
2、使用图标
使用图标或符号来代替某些分页链接的文本.
nav aria-label="Page navigation example">
ul class="pagination">
li class="page-item">
a class="page-link" href="#" aria-label="Previous">
span aria-hidden="true">
&
laquo;
/span>
/a>
/li>
li class="page-item">
a class="page-link" href="#">
1/a>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
li class="page-item">
a class="page-link" href="#" aria-label="Next">
span aria-hidden="true">
&
raquo;
/span>
/a>
/li>
/ul>
/nav>
3、禁用和活动状态
分页链接可根据不同情况进行自定义。对于显示为不可单击的链接使用disabled，对于显示为当前页的链接使用active。
虽然.disabled类使用pointer-events: none来尝试禁用a的链接功能，但是CSS属性还没有标准化，并且不考虑键盘导航。因此，您应该始终在禁用的链接上添加tabindex="-1"，并使用自定义JavaScript完全禁用其功能。
nav aria-label="...">
ul class="pagination">
li class="page-item disabled">
a class="page-link" href="#" tabindex="-1" aria-disabled="true">
Previous/a>
/li>
li class="page-item">
a class="page-link" href="#">
1/a>
/li>
li class="page-item active" aria-current="page">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
li class="page-item">
a class="page-link" href="#">
Next/a>
/li>
/ul>
/nav>
4、尺寸大小
喜欢更大或更小的分页？加上pagination-lg 或者pagination-sm，或使用其他尺寸。
nav aria-label="...">
ul class="pagination pagination-lg">
li class="page-item active" aria-current="page">
span class="page-link">
1/span>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
/ul>
/nav>
nav aria-label="...">
ul class="pagination">
li class="page-item active" aria-current="page">
span class="page-link">
1/span>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
/ul>
/nav>
nav aria-label="...">
ul class="pagination pagination-sm">
li class="page-item active" aria-current="page">
span class="page-link">
1/span>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
/ul>
/nav>
5、对齐
默认分页导航靠左对齐，老外多习惯靠左，我们中国人喜欢居中，可以使用弹性盒子通用类更改分页组件的对齐方式。将justify-content-center加到ul类中即可。当然你也可以使用justify-content-end靠右对齐，虽然很少见。
nav aria-label="Page navigation example">
ul class="pagination justify-content-center">
li class="page-item disabled">
a class="page-link" href="#" tabindex="-1" aria-disabled="true">
Previous/a>
/li>
li class="page-item">
a class="page-link" href="#">
1/a>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
li class="page-item">
a class="page-link" href="#">
Next/a>
/li>
/ul>
/nav>
nav aria-label="Page navigation example">
ul class="pagination justify-content-end">
li class="page-item disabled">
a class="page-link" href="#" tabindex="-1" aria-disabled="true">
Previous/a>
/li>
li class="page-item">
a class="page-link" href="#">
1/a>
/li>
li class="page-item">
a class="page-link" href="#">
2/a>
/li>
li class="page-item">
a class="page-link" href="#">
3/a>
/li>
li class="page-item">
a class="page-link" href="#">
Next/a>
/li>
/ul>
/nav>
以上就是关于“Bootstrap中分页导航Pagination组件的用法是什么”的介绍了，感谢各位的阅读，希望文本对大家有所帮助。如果想要了解更多知识，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Bootstrap中分页导航Pagination组件的用法是什么
本文地址： https://pptw.com/jishu/653257.html