Bootstrap pagination

This chapter will explain the paging features supported by Bootstrap. Pagination is an unordered list. Bootstrap handles pagination like other interface elements.

Pagination

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

##.disabled, .activeYou can customize the link to be non-clickable by using

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  .......
</ul>

.pagination-lg, .pagination-smUse these classes to get items of different sizes.

<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

Class	Description	Sample Code
.pagination	Add this class to display pagination on the page.	<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul>
	.disabled Links indicate the current page by using .active.

Default Pagination

The following example demonstrates the classes discussed in the above table

.pagination Usage:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的分页</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
  <li><a href="#">«</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="#">»</a></li>
</ul>


</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Paging status

The following example demonstrates the usage of the classes

.disabled and .active discussed in the above table:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 分页的状态</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><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="#">»</a></li>
</ul>


</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

Paging size

The following example demonstrates the usage of class

.pagination-* discussed in the above table:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 分页的大小</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination pagination-lg">
  <li><a href="#">«</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="#">»</a></li>
</ul><br>
<ul class="pagination">
  <li><a href="#">«</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="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
 <li><a href="#">«</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="#">»</a></li>
</ul>

</body>
</html>

Run instance»Click the "Run instance" button to view the online instance

Page (Pager)

If you want to create a simple The paginated links provide navigation for the user, which can be achieved by turning pages. Like pagination links, paging is also an unordered list. By default, links are centered. The following table lists Bootstrap classes that handle page turning.

ClassDescriptionSample Code.pagerAdd this class to get the page turning link.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

.previous, .nextUse class

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

.disabledAdd this class to get a faded appearance.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Default page turning

The following example demonstrates the usage of class .pager discussed in the above table:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的翻页</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Aligned links

below The example demonstrates the usage of class .previous, .next discussed in the above table:

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 翻页中对齐的链接</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
  <li class="previous"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Paging status

The following example demonstrates the class discussed in the above table # Usage of ##.disabled:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 翻页的状态</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
  <li class="previous disabled"><a href="#">← Older</a></li>
  <li class="next"><a href="#">Newer →</a></li>
</ul>

</body>
</html>

Run Instance»Click "Run Instance" Button to view online examples

← Bootstrap breadcrumb navigation

Bootstrap tag →

submit

php.cn



	.previous To align the link to the left, use .next Align the link to the right.