Bootstrap学习日记之分页

分页是什么？

分页是往往一个页面索要显示的内容太多，无法用一页表示，那么我们就会对该页面进行分页，在页面的一个部位，做一个"1-2-3-4"等的连接数字表示页，如果还不明白请直接看例子

创建分页

创建一个带有class="pagination"的无序列表
通过<li><a href="#">1</a></li>来表示带有连接的数字分页
通过class="disabled"来禁用某些数字分页(在<li>中)
通过class="active"里指示当前的数字分页（在<li>中）
通过pagination-lg、pagination-sm来获取不同大小的项

基本分页

  <ul class="pagination">
      <li><a href="#">&laquo;</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="#">&raquo;</a></li>
  </ul>

代码解读：我们创建了一个带有class="pagination"的无序列表，这就是分页了，在<li>中编写数字分页

运行结果

创建<li>带有class的分页

  <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li class="active"><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
  </ul>

代码解读：我们对序号为"1"的数字项添加了class="disabled"禁用此项，对序号为"4"的数字项添加了class="active"表示当前页

运行结果

创建比默认更大或者更小的分页

 <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li class="active"><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
  </ul>
  <ul class="pagination pagination-lg">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li class="active"><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
  </ul>
  <ul class="pagination pagination-sm">
      <li><a href="#">&laquo;</a></li>
      <li class="disabled"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li class="active"><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
  </ul>

代码解读：我们创建了三个大小完全不等的分页，第一个是默认分页，第二个是较大的分页，第三个是小的分页

运行结果

翻页

如果你想创建一个简单的翻页为用户提供导航的话，不如试试翻页功能，简单的来说就是下一页上一页

创建翻页

同样是在无序列表<ul>中，添加class="pager"
同样的class="active"以及class="disabled"使用与翻页
class="next"，用于代表下一页连接
class="previous"，用于上一页连接

  <ul class="pagination pager">
       <li class="previous"><a href="#">previous</a></li>
      <li class="disabled"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li class="active"><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li class="next"><a href="#">next</a></li>
  </ul>

运行结果

注意带有class="previous"的标签是默认左对齐的，带有class="next"是默认右对齐的

注：本篇文章为博主在菜鸟教程学习的日记，菜鸟教程：http://www.runoob.com/