Une brève discussion sur la façon d'utiliser le composant Pagination de Bootstrap5

Cet article vous présentera comment utiliser le composant Pagination dans Bootstrap5. J'espère qu'il vous sera utile !

【Recommandation associée : "Tutoriel bootstrap"】

1 Exemple simple

La navigation dans les pages est généralement utilisée pour les pages de liste d'articles, les listes de téléchargement, les listes d'images, etc. En raison du grand nombre de données. , il est impossible de le faire en un seul endroit. Affichage de la page, la navigation générale par page comprend la page précédente, la page suivante, le numéro de page numérique, etc. Voici un exemple simple :

      <nav aria-label="Page navigation">
        <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
        </ul>
        </nav>

2. Utiliser des icônes

Utiliser des icônes ou des symboles pour remplacer le texte de certains liens de pagination.

<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
  <span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
  <span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

3. être personnalisé en fonction de différentes situations. Utilisez désactivé pour les liens qui semblent impossibles à cliquer et actif pour les liens qui semblent se trouver sur la page actuelle.

Bien que la classe .disabled utilise pointer-events: none pour tenter de désactiver la fonctionnalité de lien de a, les propriétés CSS ne sont pas encore standardisées et la navigation au clavier n'est pas prise en compte. Par conséquent, vous devez toujours ajouter tabindex="-1" sur les liens désactivés et utiliser du JavaScript personnalisé pour désactiver complètement leur fonctionnalité.

<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

4. Taille

Vous préférez une pagination plus grande ou plus petite ? Ajoutez pagination-lg ou pagination-sm, ou utilisez une autre taille.

      <nav aria-label="...">
        <ul class="pagination pagination-lg">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        </ul>
       </nav>
       <nav aria-label="...">
        <ul class="pagination">
        <li class="page-item active" aria-current="page">
        <span class="page-link">1</span>
        </li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        </ul>
      </nav>

        <nav aria-label="...">
            <ul class="pagination pagination-sm">
            <li class="page-item active" aria-current="page">
            <span class="page-link">1</span>
            </li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            </ul>
        </nav>

5. Alignement

La navigation de pagination par défaut est alignée à gauche. Nous, les Chinois, aimons être centrés. Vous pouvez utiliser la classe générale de boîte flexible pour modifier l'alignement du composant de pagination. Ajoutez simplement justifier-content-center à la classe ul. Bien sûr, vous pouvez également utiliser justifier-content-end pour vous aligner à droite, bien que cela soit rare.

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

Si cet article vous est utile, n'oubliez pas de l'aimer !

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation

 ! !

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!