Home >Web Front-end >Bootstrap Tutorial >How to implement bootstrap paging
How to implement bootstrap paging
- (*-*)浩Original
- 2019-07-19 09:54:172246browse
We can see pagination in any web page, whether it is mobile or PC, whether it is a drop-down to the next page or a button to the next page, pagination is needed to support your website. In this way, first of all, you can Improve the access efficiency of your website. In addition, the page display will be more beautiful, otherwise, millions and tens of millions of data will not be displayed for an hour or two.
How to use bootstrap to implement paging?(Recommended learning: Bootstrap video tutorial)
There are two types of paging in bootstrap, one is normal Paging, the second type is page turning. It has the display effect of the previous page and the next page.
Paging: With the effect of the page, you can define it according to your website. For example, it is not text, but some icons, which is also possible. But the numbers can better see the effect. Use style: .pagination
Pagination, An unordered list, Bootstrap handles pagination like any other interface element.
With the page turning effect of the previous item and the next item, the simplest way. Style.pager
（ Pager), if you want to create a simple paging link to provide navigation for users, you can do it by turning pages. Like pagination links, paging is also an unordered list.
The implementation of both methods requires the use of ul tags, and the link uses a. There are also some states, for example, I selected a certain item. One of the items Use it statically.
Paging Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的分页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
Paging Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的翻页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column. study!
The above is the detailed content of How to implement bootstrap paging. For more information, please follow other related articles on the PHP Chinese website!