Bootstrap分页

默认分页

受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。

  <nav>
    <ul class="pagination">
      <li>
        <a href="" aria-label="Previous"><span>&laquo;</span></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="" aria-label="Next"><span>&raquo;</span></a>
      </li>
    </ul>
  </nav>

这里写图片描述


尺寸

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

<nav>
    <ul class="pagination pagination-lg">
      <li>
        <a href="" aria-label="Previous"><span>&laquo;</span></a>
      </li>
        <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
      </li>
    </ul>
  </nav>  
  <nav>
    <ul class="pagination">
      <li>
        <a href="" aria-label="Previous"><span>&laquo;</span></a>
      </li>
        <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
      </li>
    </ul>
  </nav> 
   <nav>
    <ul class="pagination pagination-sm">
      <li>
        <a href="" aria-label="Previous"><span>&laquo;</span></a>
      </li>
        <li><span>1</span></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="" aria-label="Next"><span>&raquo;</span></a>
      </li>
    </ul>
  </nav>

这里写图片描述


翻页

用简单的标记和样式,就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

<nav>
    <ul class="pager">
      <li><a href="#">Previous</a></li>
      <li><a href="#">Next</a></li>
    </ul>
  </nav>

这里写图片描述


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值