Bootstrap_分页

时间:2024-06-03 23:07:20

一、带页码的分页导航

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">&raquo;</a></li>
</ul>

Bootstrap_分页

二、翻页分页导航

<ul class="pager">
<li><a href="#">&laquo;上一页</a></li>
<li><a href="#">下一页&raquo;</a></li>
</ul>

Bootstrap_分页

  对齐样式设置:

  默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式:

  ☑ previous:让“上一步”按钮居左

  ☑ next:让“下一步”按钮居右

  具体使用的时候,只需要在li标签上添加对应类名即可:

<ul class="pager">
<li class="previous"><a href="#">&laquo;上一页</a></li>
<li class="next"><a href="#">下一页&raquo;</a></li>
</ul>