Maison > Article > interface Web > Comment implémenter la pagination bootstrap
Comment implémenter la pagination bootstrap
- (*-*)浩original
- 2019-07-19 09:54:172220parcourir
Dans n'importe quelle page Web, nous pouvons voir la pagination. Qu'il s'agisse d'un terminal mobile ou d'un terminal PC, qu'il s'agisse d'une liste déroulante vers la page suivante ou d'un bouton vers la page suivante, la pagination est nécessaire pour prendre en charge votre site Web. De cette façon, vous pouvez tout d'abord améliorer l'efficacité d'accès de votre site Web. De plus, l'affichage de la page sera plus beau, sinon des millions et des millions de données ne montreront pas l'effet même si elles sont affichées pour un ou plusieurs. deux heures.
Comment utiliser bootstrap pour implémenter la pagination ?(Apprentissage recommandé : Tutoriel vidéo Bootstrap)
Il existe deux types de pagination dans bootstrap, l'un est la pagination normale, le deuxième type est le changement de page. Il a l'effet d'affichage de la page précédente et de la page suivante
Pagination : Avec l'effet de la pagination. page, vous pouvez le définir en fonction de votre site Web. Par exemple, ce n'est pas du texte, mais quelques icônes, ce qui est également possible. Mais les chiffres sont mieux visibles Utiliser le style : .pagination
.Pagination, Une liste non ordonnée, Bootstrap gère la pagination comme n'importe quel autre élément d'interface.
Avec effet de changement de page des éléments précédents et suivants, de la manière la plus simple Style.pager
( Pager), si vous. souhaitez créer un simple lien de pagination pour permettre la navigation aux utilisateurs, vous pouvez le faire en tournant les pages. Comme les liens de pagination, la pagination est également une liste non ordonnée.
La mise en œuvre des deux méthodes nécessite l'utilisation de balises ul, et le lien utilise a. Il existe également certains états, par exemple, j'ai sélectionné un certain élément Utiliser. statiquement.
Exemple de pagination
<!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>
Exemple de tournage de page
<!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>
Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap. étude!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!