BootstrapBootstrap分页

日前的话

  分页导航大概在各类网站都可知,好的分页能给用户带来好的用户体验。本文将详细介绍Bootstrap分页

 

翻页

  Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。那种分页导航平常在有的粗略的网站上看看,比如说个人博客,杂志网站等。那种分页导航是看不到具体的页码,只会提供二个“上一页”和“下一页”的按钮

【暗中同意用法】

  在事实上行使中,翻页分页导航和带页码的分页导航类似,为ul标签进入pager

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

【对齐设置】

  私下认可景况之下,翻页分页导航是居中呈现,但有个别时候我们必要2个居左,二个居右。Bootstrap框架提供了多少个样式:

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

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

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

  实现原理很简单,正是三个进行了左浮动,一个进展了右浮动

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

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

【状态设置】

  和带页码分页导航一样,假诺在li标签上添加了disabled类名的时候,分页按钮处于禁止使用状态,但同样不可能禁止其点击作用。能够由此js来处理,或将a标签换成span标签

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}

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

 

页码分页

  带页码的分页导航,也许是最普遍的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的领航格局

【暗中认可分页】

  平日比比皆是人喜好用div>adiv>span组织来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a如此的组织,在ul标签上投入pagination方法:

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

【状态】

  链接在分化情状下得以定制。能够给不可能点击的链接添加 .disabled 类、给当下页添加 .active 类

  最好将 active 或 disabled
状态的链接(即 <a> 标签)替换为 ` 标签,或者在向前/向后的箭头处省略` 标签,那样就足以让其维持要求的样式而不可能被点击

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">

        &laquo;

    </li>
    <li class="active">1</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">
        &raquo;
      </a>
    </li>
  </ul>
</nav>

【尺寸】

  在Bootstrap框架中,能够经过三种不相同的情况来设置其尺寸,类似于按钮一样:

  壹 、通过“pagination-lg”让分页导航变大

  贰 、通过“pagination-sm”让分页导航变小

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

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

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

 

概述

  在Bootstrap框架中提供了二种分页导航:

     ☑   带页码的分页导航

     ☑   带翻页的分页导航

 

相关文章