Comment utiliser la pagination bootstrap-Tutoriel d'amorçage-php.cn

Comment utiliser la pagination bootstrap

爱喝马黛茶的安东尼

Libérer： 2019-07-17 15:53:31

original

2094 Les gens l'ont consulté

Comment utiliser la pagination bootstrap

Téléchargez bootstrap et décompressez-le dans un répertoire d'ordinateur local, puis créez un nouveau répertoire de test pour stocker les fichiers de test.

Comment utiliser la pagination bootstrap

Créez un nouveau fichier test pagination.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 分页测试</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">  
<script src="../js/jquery-2.0.3.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</body>
</html>

Copier après la connexion

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

Ouvrez le navigateur pour tester l'effet de page

Comment utiliser la pagination bootstrap

Bouton de pagination Il s'affiche normalement, mais n'indique pas sur quelle page il se trouve. L'ajout de class="active" peut mettre en évidence le numéro de page.

Comment utiliser la pagination bootstrap

Si vous devez empêcher chaque page d'être cliquable, vous pouvez ajouter l'attribut class="disabled".

Comment utiliser la pagination bootstrap

Lorsque vous cliquez sur un certain numéro de page, vous devez mettre cette page en surbrillance.

$(&#39;.pagination li&#39;).on(&#39;click&#39;,function () {
      $(&#39;.pagination li&#39;).removeClass(&#39;active&#39;);
      $(this).addClass(&#39;active&#39;);
  });

Copier après la connexion

Ajoutez des événements de clic à toutes les balises li de pagination. Supprimez tous les affichages actifs à chaque fois, puis ajoutez l'actif au li sur lequel vous venez de cliquer. Cela mettra en évidence la page sur laquelle vous avez cliqué.

Comment utiliser la pagination bootstrap

Si vous souhaitez ajuster la taille de la zone de numéro de page, vous pouvez utiliser les propres attributs de bootstrap

class="pagination pagination-sm" 小
class="pagination" 中
class="pagination pagination-lg" 大

Copier après la connexion

Comment utiliser la pagination bootstrap

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!