浅谈Bootstrap5怎么使用分页导航Pagination组件

发布时间:2022-05-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅谈Bootstrap5怎么使用分页导航Pagination组件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本篇文章给大家介绍一下Bootstrap5中分页导航pagination组件用法,希望对大家有所帮助

浅谈Bootstrap5怎么使用分页导航Pagination组件

【相关推荐:《bootstrap教程》】

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>

浅谈Bootstrap5怎么使用分页导航Pagination组件

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">&amp;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>

浅谈Bootstrap5怎么使用分页导航Pagination组件

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>

浅谈Bootstrap5怎么使用分页导航Pagination组件

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>

浅谈Bootstrap5怎么使用分页导航Pagination组件

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>

浅谈Bootstrap5怎么使用分页导航Pagination组件

如果这篇文章对你有帮助,记得随手点赞哦!

更多编程相关知识,请访问:编程视频!!

以上就是浅谈Bootstrap5怎么使用分页导航Pagination组件的详细内容,更多请关注脚本宝典其它相关文章!

脚本宝典总结

以上是脚本宝典为你收集整理的浅谈Bootstrap5怎么使用分页导航Pagination组件全部内容,希望文章能够帮你解决浅谈Bootstrap5怎么使用分页导航Pagination组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。