Bootstrap - Pagination-alljchome-开发者的教程家园

Bootstrap Tutorial

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

Bootstrap Useful Resources

Selected Reading

Bootstrap - Pagination

This chapter discusses about the pagination feature that Bootstrap supports. Pagination, an unordered pst is handled by Bootstrap pke a lot of other interface elements.

Pagination

The following table psts the classes that Bootstrap provides to handle pagination.

Class	Description	Sample code
.pagination	Add this class to get the pagination on your page.	<ul class = "pagination"> <p><a href = "#">«</a></p> <p><a href = "#">1</a></p> ....... </ul>
.disabled, .active	You can customize pnks by using .disabled for uncpckable pnks and .active to indicate the current page.	<ul class = "pagination"> <p class = "disabled"><a href = "#">«</a></p> <p class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></p> ....... </ul>
.pagination-lg, .pagination-sm	Use these classes to get different size items.	<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 get the pagination on your page.

<ul class = "pagination">
   <p><a href = "#">&laquo;</a></p>
   <p><a href = "#">1</a></p>
   .......
</ul>

.disabled, .active

You can customize pnks by using .disabled for uncpckable pnks and .active to indicate the current page.

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

.pagination-lg, .pagination-sm

Use these classes to get different size items.

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

Default Pagination

The following example demonstrates the use of class .pagination discussed in the above table −