Sunday, 19 April 2015

Bootstrap Pagination



Basic Pagination:
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
A basic pagination in Bootstrap looks like this:

To create a basic pagination, add the .pagination class to an <ul> element:
<ul class="pagination">
  
<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>
</ul>

 

 

Active State:

The active state shows what is the current page:
Add class .active to let the user know which page he/she is on:
<ul class="pagination">
  
<li><a href="#">1</a></li>
  
<li class="active"><a href="#">2</a></li>
  
<li><a href="#">3</a></li>
  
<li><a href="#">4</a></li>
  
<li><a href="#">5</a></li>
</ul>

 

 

Disabled State:

A disabled link cannot be clicked:
Add class .disabled if a link for some reason is disabled:
<ul class="pagination">
  
<li><a href="#">1</a></li>
  
<li><a href="#">2</a></li>
  
<li><a href="#">3</a></li>
  
<li class="disabled"><a href="#">4</a></li>
  
<li><a href="#">5</a></li>
</ul>

 

 

Pagination Sizing:

Pagination blocks can also be sized to a larger size or a smaller size:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
<ul class="pagination pagination-lg">
  
<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>
</ul>

<ul class="pagination pagination-sm">
  
<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>
</ul>



No comments:

Post a Comment