Bootstrap pagination and bootstrap pagination plugin

Bootstrap pagination and bootstrap pagination plugin
Previous

Paging navigation is visible to almost every website. Good paging brings a good user experience. This article will detail the Bootstrap pagination

 

Overview

The Bootstrap framework provides two types of paging Navigation:

Page navigation

Page navigation

 

Page number

Page navigation with page numbers may be the most common paging navigation, especially when there are too many page content in the list, you will be given a paging Navigation Method

[Default Page]

Most people usually like to usediv>aAnddiv>spanStructure to create paging navigation with page numbers. However, what is used in the Bootstrap framework isul>li>aAdd the pagination Method to the ul label for this structure:

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

[Status]

Links can be customized under different circumstances. You can add a link that cannot be clicked..disabledClass, add to the current page.activeClass

It is best to link the active or disabled status (that is<a>Label)<span>Label, or omitted at the forward/backward arrow<a>Label, so that it can maintain the desired style instead of being clicked

<nav aria-label="Page navigation">  <ul class="pagination">    <li class="disabled">      <span aria-label="Previous">        <span aria-hidden="true">&laquo;</span>      </span>    </li>    <li class="active"><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 aria-hidden="true">&raquo;</span>      </a>    </li>  </ul></nav>

[Size]

In the Bootstrap framework, you can set the size in two different cases, similar to the button:

1. Use pagination-lg to enlarge the paging navigation

2. Use pagination-sm to make paging navigation smaller

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

 

Flip

In addition to paging navigation with page numbers, the Bootstrap framework also provides paging navigation. This type of paging navigation is often seen on some simple websites, such as personal blogs and magazine websites. This type of paging navigation does not see the specific page number. Only the buttons for "Previous Page" and "next page" are provided.

[Default usage]

In actual use, paging navigation is similar to paging navigation with page numbers.pagerClass

<Ul class = "pager"> <li> <a href = "#"> & laquo; previous Page </a> </li> <a href = "#"> next page & raquo; </a> </li> </ul>

Align settings]

By default, the paging navigation is centered, but sometimes we need a left-to-right navigation. The Bootstrap framework provides two styles:

Previous: place the previous button to the left

Next: Set the "next" button to the right

For specific use, you only needliAdd the corresponding class name to the tag.

The implementation principle is very simple, that is, a float on the left and a floating on the right.

.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; previous Page </a> </li> <li class = "next"> <a href = "#"> next page & rarr; </a> </li> </ul>

[Status settings]

Like paging navigation with page numbers, if the disabled class name is added to the li label, the paging button is disabled, but cannot be clicked. It can be processed through js, oraReplace tagsspanTag

.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"> <span> & laquo; previous Page </span> </li> <a href = "#"> next page & raquo; </a> </li> </ul>