En savoir plus sur le composant de pagination dans Bootstrap

La navigation par pagination est visible sur presque tous les sites Web. Une bonne pagination peut apporter une bonne expérience utilisateur aux utilisateurs. Cet article vous donnera une introduction détaillée à la pagination Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Vue d'ensemble

Deux types de navigation par pagination sont fournis dans le framework Bootstrap :

☑ Navigation par pagination avec numéros de page

☑ Navigation par pagination avec changement de page

Numérotation des pages

Pagination avec numéros de page La navigation est probablement le type de navigation par pagination le plus courant. Surtout lorsque la page de liste contient beaucoup de contenu, les utilisateurs disposeront d'une méthode de navigation par pagination

[Pagination par défaut]

Beaucoup de gens aiment généralement utiliser les structures p>a et p>span pour créer une navigation paginée avec des numéros de page. Cependant, le framework Bootstrap utilise une structure comme ul>li>a, et ajoute la méthode de pagination à la balise ul :

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

Recommandations associées : "tutoriel bootstrap》

[Statut]

Les liens peuvent être personnalisés dans différentes situations. Vous pouvez ajouter la classe .disabled au lien sur lequel on ne peut pas cliquer et ajouter la classe .active

à la page actuelle

Il est préférable de remplacer le lien dans l'état actif ou désactivé (c'est-à-dire. , la balise <a>) avec la balise <span>, ou Omettez les balises <a> sur les flèches avant/arrière afin qu'elles restent dans le style souhaité et ne puissent pas être cliquées

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="disabled">
      <span aria-label="Previous">
        <span aria-hidden="true">«</span>
      </span>
    </li>
    <li class="active"><span>1</span></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="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

[Taille]

Dans le framework Bootstrap, vous pouvez définir sa taille dans deux situations différentes, similaires aux boutons :

1 Faire la pagination. navigation plus grande via "pagination-lg"

2. Utilisez "pagination-sm" pour réduire la navigation par pagination

  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  


<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>


  

    

      
        «
      
    
    
1
    
2
    
3
    
4
    
5
    

      
        »
      
    
  

Tournage de page

En plus de fournir une navigation par pagination avec des numéros de page, le framework Bootstrap fournit également une navigation par changement de page. Ce type de navigation paginée est souvent observé sur certains sites Web simples, tels que les blogs personnels, les sites Web de magazines, etc. Ce type de navigation par pagination ne peut pas voir le numéro de page spécifique, mais fournit uniquement un bouton "page précédente" et "page suivante"

[Utilisation par défaut]

En réalité utilisation, la navigation par pagination qui tourne les pages est similaire à la navigation par pagination avec des numéros de page Ajouter pagerclass

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

[Paramètres d'alignement]

Par défaut, la navigation par pagination est affichée au centre, mais parfois nous avons besoin qu'une soit à gauche et l'autre à droite. Le framework Bootstrap propose deux styles :

☑ précédent : laissez le bouton "Étape précédente" être à gauche

☑ Suivant : laissez le bouton "Suivant" être à droite

Utilisation spécifique A ce stade, il suffit d'ajouter le nom de classe correspondant à la balise li

Le principe de mise en œuvre est très simple, c'est-à-dire que l'un flotte vers la gauche et l'autre flotte vers la à droite

.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous > a,
.pager .previous > span {
float: left;
}

<ul class="pager">
   <li class="previous"><a href="#">&larr;上一页</a></li>
   <li class="next"><a href="#">下一页&rarr;</a></li>
</ul>

[Paramètres d'état]

Identique à la navigation par pagination avec les numéros de page, si le nom de la classe désactivée est ajouté au li, le bouton de pagination est désactivé, mais il ne peut pas non plus désactiver sa fonction de clic. Il peut être traité via js, ou remplacer la balise a par la balise span

.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}

<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>

Pour plus de connaissances liées à la programmation, veuillez visiter : Programmation Vidéo ! !

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!