`

Bootstrap--分页

 
阅读更多
标准分页
优点:容易扩展,具有非常大的点击区域。非常适合app和搜索结果的展示。

    li添加disabled类:标明链接不可点击
    li添加active类:标明当前页
    div添加pagination-large、pagination-small或pagination-mini类:可以改变分页尺寸
    div添加pagination-centered 和 pagination-right类:改变分页的对齐方式
<div class="bs-docs-example">
  <div class="pagination pagination-centered pagination-small">
    <ul>
      <li class="disabled"><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><a href="#">&raquo;</a></li>
    </ul>
  </div>
</div>

翻页
优点:用更少的标记和样式来创建简单的“前一页”和“后一页”。适用于简单的网站,比如博客或者杂志网站。
      默认情况翻页中的链接居中显示,li添加previous和next类:两个链接放置于两侧
      li添加disabled类:让链接处于禁用状态
<div class="bs-docs-example">
  <ul class="pager">
    <li class="previous">
      <a href="#">&larr;前一页</a>
    </li>
    <li class="next">
      <a href="#">后一页&rarr;</a>
    </li>
  </ul>
</div>


  • 大小: 23.7 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics