Learn more about the pagination component in Bootstrap

Paging navigation can be seen on almost every website. Good paging can bring a good user experience to users. This article will give you a detailed introduction to Bootstrap pagination. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Overview

There are two types of paging navigation provided in the Bootstrap framework:

☑ Paging navigation with page numbers

☑ Paging navigation with page turning

Paging with page numbers

Paging with page numbers Navigation may be the most common type of paging navigation. Especially when the list page contains a lot of content, users will be provided with a paging navigation method

[Default paging]

Usually many people like to use the p>a and p>span structures to create paging navigation with page numbers. However, the Bootstrap framework uses a structure like ul>li>a, and adds the pagination method to the ul tag:

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

##Related recommendations: "

bootstrap Tutorial"

[Status]

Links can be customized under different circumstances. You can add the

.disabled class to links that cannot be clicked, and the .active class to the current page.

It is best to add active or disabled state links (i.e.

tag) with the tag, or omit the tag on the forward/backward arrows, so that It maintains the required style and cannot be clicked

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">
      <span aria-label="Previous">
        <span aria-hidden="true">«</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">»</span>
      </a>
    </li>
  </ul>
</nav>

[Size]

In the Bootstrap framework, you can pass two different Set its size according to the situation, similar to the button:

1. Use "pagination-lg" to make the paging navigation larger

2. Use "pagination-sm" to make the paging navigation smaller.

  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  


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


  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  

Page turning

In addition to providing paging navigation with page numbers, the Bootstrap framework also provides Page navigation. This kind of paginated navigation is often seen on some simple websites, such as personal blogs, magazine websites, etc. This kind of paging navigation cannot see the specific page number, but only provides a "previous page" and "next page" button

[Default usage]

In actual use, page-turning paging navigation is similar to paging navigation with page numbers. Add the

pager class to the ul tag

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

【 Alignment settings】

By default, the page navigation is displayed in the center, but sometimes we need one to be on the left and the other on the right. The Bootstrap framework provides two styles:

☑ Previous: Let the "Previous" button be on the left

☑ Next: Let the "Next" button be on the right

Specific use At this time, you only need to add the corresponding class name to the

li tag

The implementation principle is very simple, that is, one floats to the left and the other floats to 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;上一页</a></li>
   <li class="next"><a href="#">下一页&rarr;</a></li>
</ul>

[Status Settings]

Same as paging navigation with page numbers, if the disabled class name is added to the li tag, the paging button is disabled , but its click function cannot be disabled either. It can be processed through js, or replace the tag with spantag

.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;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Learn more about the pagination component in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!