BootStrap--CSS组件--分页(pagination)和翻页(pager)

最新推荐文章于 2025-11-25 03:38:11 发布

原创最新推荐文章于 2025-11-25 03:38:11 发布 · 6.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#pagination #BootStrap #CSS组件

BootStrap 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了BootStrap中用于页面内容分页显示的组件，包括普通分页及其状态如disabled和active的处理，以及分页大小的调整（pagination-lg和pagination-sm）。同时，还探讨了翻页(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="#">&laquo;</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="#">&raquo;</a></li>
</ul>

分页的状态-disabled active

<ul class="pagination">
    <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

分页的大小-pagination-lg，pagination-sm

<ul class="pagination pagination-lg">
<li><a href="#">&laquo;</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="#">&raquo;</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="#">&larr; Older</a></li>
    <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>