Bootstrap < Fundamentals 19 > pagination

Original: Bootstrap < basic 19 > pagination

The paging feature supported by Bootstrap. Paging (pagination), which is an unordered list that handles pagination as if it were another interface element Bootstrap. Paging (pagination)

The following table lists the classes provided by Bootstrap to handle paging.

Class	Description	Sample Code
. pagination	Add the class to display the pagination on the page.	<ulClass="pagination"><li><ahref="#">& laquo; </a></li><li><ahref="#">1</a></li> ....... </ul>
. Disabled,. Active	You can customize the link by using . Disabled to define a non-clickable link by using . Active to indicate the current page.	<ul Class="Pagination"> <li Class= "disabled" ><a href = "#" >&laquo; </a></li> <li class= "active" ><a href< Span class= "pun" >= "#" >1<span class= "sr-only" ></span></a></li></UL>
. PAGINATION-LG,. pagination-sm	Use these classes to get items of different sizes.	<ulClass="pagination pagination-lg">... </ul><ulclass="pagination">... </ul><ulclass="pagination pagination-sm">... </ul>

The default paging

The following example demonstrates the use of the class . Pagination As discussed in the previous table:

<! DOCTYPE html>
The results are as follows:
Status of the paging
The following example shows the use of Class . Disabled,. Active, as discussed in the previous table:
<! DOCTYPE html>
The results are as follows:
The size of the paging
 The following example shows the class  discussed in the previous table; . pagination-*    Usage: 
 
<! DOCTYPE html>
The results are as follows:
Page Flip (Pager)
If you want to create a simple paging link to provide navigation to the user, you can do so by flipping the page. As with paging links, page flipping is also an unordered list. By default, links are displayed centered. The following table lists the class that Bootstrap handles for paging.

 
   

  
    
 
     
 
      
Class
 
      
Description
 
      
Sample Code
 
     
 
     
 
      
. Pager
 
      
Add the class to get the page flipping link.
 
      
<ulClass="Pager"><li><ahref="#">Previous </a></li><li><ahref="#">Next</a></li ></ul>               
 
     
 
     
 
      
. Previous,. Next
 
      
Use the class . Previous to align the links to the left, using . Next to align the links to the right.
 
      
<ul Class= "pager" > <li Span class= "ATN" >class= "previous" ><a  href= "#" > &larr; Older</a></li> <li class= "Next" ><a href= "#" >newer &rarr ; </a></li></UL>       
 
     
 
     
 
      
. Disabled
 
      
Add the class to get a color-dimmed look.
 
      
<ul Class= "pager" > <li Span class= "ATN" >class= "previous disabled" ><a href= "#" > &larr; Older</a></li> <li class= "Next" ><a href= "#" >newer &rarr ; </a></li></UL>       
 
     
 
    
 
   
The default page turn
The following example demonstrates the use of the class . Pager As discussed in the previous table:
<! DOCTYPE html>
The results are as follows:
Aligned links
The following example shows the use of class . Previous,. Next, as discussed in the previous table:
<! DOCTYPE html>
The results are as follows:
The state of the page turn
The following example demonstrates the use of the class . Disabled As discussed in the previous table:
<! DOCTYPE html>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
Bootstrap < Fundamentals 19 > pagination