Bootstrap分页

来源:互联网 发布:java输入输出流 编辑:程序博客网 时间:2024/05/16 15:19

默认分页

受 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>

这里写图片描述


原创粉丝点击