Bootstrap 4教程-Bootstrap 4 Pagination - 书目录

Bootstrap 4教程-Bootstrap 4 Pagination

Create “Previous/Next” or “Next n” controls with Bootstrap’s pagination classes.

Bootstrap’s .pagination class does just that — provides pagination.

Pagination is typically where you have navigation that links to multiple pages within a series. For example, search results that return many pages will have pagination that enables the user to navigate to the next page or even jump forward several pages.

Default Pagination

To create default pagination, add class="pagination" to the <ul> element that represents the list of pages.

Also add .page-item to each <li> element and .page-link to each <a> element.




Bootstrap 4 vs Bootstrap 3

Bootstrap 3 only requires the .pagination class.

Bootstrap 4, in addition to the .pagination class, also requires the .page-item class to be added to each <li> element and .page-link to each <a> element.

Active State for Current Page

Add the .active class to the <li> element that represents the current page (the page that the user is currently on).

Disabling an Option

Add the .disabled class to the <li> element to disable that option.

Pagination Size

Add either the .pagination-lg or .pagination-sm to the <ul> element to increase or decrease the size of the pagination controls.

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 supports pagers (for providing previous/next functionality).

Pagers have been dropped in Bootstrap 4.

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_pagination.cfm 由工具自动翻译,由书目录整理