Bootstrap教程 分页

默认分页

  1.  <nav>
  2.   <ul class="pagination">
  3.     <li>
  4.       <a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
  5.     </li>
  6.     <li><a href="#">1</a></li>
  7.     <li><a href="#">2</a></li>
  8.     <li><a href="#">3</a></li>
  9.     <li><a href="#">4</a></li>
  10.     <li><a href="#">5</a></li>
  11.     <li>
  12.       <a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span> </a>
  13.     </li>
  14.   </ul>
  15. </nav>

禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

  1. <nav>
  2.   <ul class="pagination">
  3.     <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
  4.     <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  5.     ...
  6.   </ul>
  7. </nav>

你还可以将 activedisabled 状态应用于 标签,或者在向前/向后的箭头处省略<a> 标记,即替换<a> 标签,这样就可以让其保持需要的样式而不能被点击。

  1. <nav>
  2.   <ul class="pagination">
  3.     <li class="disabled">
  4.       <span>
  5.         <span aria-hidden="true">&laquo;</span>
  6.       </span>
  7.     </li>
  8.     <li class="active">
  9.       <span>1 <span class="sr-only">(current)</span></span>
  10.     </li>
  11.     ...
  12.   </ul>
  13. </nav>

分页的大小尺寸

想要更小或更大的分页?.pagination-lg .pagination-sm 类提供了额外可供选择的尺寸。

  1.   <ul class="pagination pagination-lg">
  2.   <li><a href="#">&laquo;</a></li>
  3.   <li><a href="#">1</a></li>
  4.   <li><a href="#">2</a></li>
  5.   <li><a href="#">3</a></li>
  6.   <li><a href="#">4</a></li>
  7.   <li><a href="#">5</a></li>
  8.   <li><a href="#">&raquo;</a></li>
  9. </ul>
  10. <ul class="pagination">
  11.   <li><a href="#">&laquo;</a></li>
  12.   <li><a href="#">1</a></li>
  13.   <li><a href="#">2</a></li>
  14.   <li><a href="#">3</a></li>
  15.   <li><a href="#">4</a></li>
  16.   <li><a href="#">5</a></li>
  17.   <li><a href="#">&raquo;</a></li>
  18. </ul>
  19. <ul class="pagination pagination-sm">
  20.  <li><a href="#">&laquo;</a></li>
  21.   <li><a href="#">1</a></li>
  22.   <li><a href="#">2</a></li>
  23.   <li><a href="#">3</a></li>
  24.   <li><a href="#">4</a></li>
  25.   <li><a href="#">5</a></li>
  26.   <li><a href="#">&raquo;</a></li>
  27. </ul>

翻页

用简单的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。与分页链接一样,翻页也是无序列表。
默认的翻页
在默认的翻页中,链接居中对齐。

  1.  <nav>
  2.   <ul class="pager">
  3.     <li><a href="#">Previous</a></li>
  4.     <li><a href="#">Next</a></li>
  5.   </ul>
  6. </nav>

对齐的链接
你还可以把链接向两端对齐:

  1. <nav>
  2.   <ul class="pager">
  3.     <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
  4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  5.   </ul>
  6. </nav>

翻页的状态
.disabled 类也可用于翻页中的链接。

  1. <nav>
  2.   <ul class="pager">
  3.     <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
  4.     <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  5.   </ul>
  6. </nav>

发布日期:

所属分类: BootStrap, 前端 标签: