Eine kurze Diskussion zur Verwendung der Paginierungskomponente von Bootstrap5

In diesem Artikel erfahren Sie, wie Sie die Paginierungskomponente in Bootstrap5 verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

【Verwandte Empfehlung: „Bootstrap-Tutorial“】

1. Einfaches Beispiel

Seitennavigation wird im Allgemeinen für Artikellistenseiten, Downloadlisten, Bildlisten usw. verwendet. Aufgrund der großen Datenmenge , es ist unmöglich, dies an einer Stelle zu tun Seitenanzeige, allgemeine Seitennavigation umfasst vorherige Seite, nächste Seite, digitale Seitennummer usw. Hier ist ein einfaches Beispiel:

      <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. Verwenden Sie Symbole oder Symbole, um den Text bestimmter Paginierungslinks zu ersetzen.

<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. Deaktivierte und aktive Zustände

Paginierungslinks können je nach Situation angepasst werden. Verwenden Sie „deaktiviert“ für Links, die scheinbar nicht anklickbar sind, und „aktiv“ für Links, die sich scheinbar auf der aktuellen Seite befinden.

Obwohl die .disabled-Klasse pointer-events:none verwendet, um zu versuchen, die Link-Funktionalität von a zu deaktivieren, sind die CSS-Eigenschaften noch nicht standardisiert und die Tastaturnavigation wird nicht berücksichtigt. Daher sollten Sie bei deaktivierten Links immer tabindex="-1" hinzufügen und benutzerdefiniertes JavaScript verwenden, um deren Funktionalität vollständig zu deaktivieren.

<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. Größe

Bevorzugen Sie eine größere oder kleinere Seitenzahl? Fügen Sie pagination-lg oder pagination-sm hinzu oder verwenden Sie eine andere Größe.

      <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>

Die standardmäßige Paging-Navigation ist normalerweise eine zentrierte Ausrichtung. Fügen Sie einfach justify-content-center zur ul-Klasse hinzu. Natürlich können Sie auch justify-content-end verwenden, um rechtsbündig auszurichten, obwohl dies selten vorkommt.

<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>

Wenn dieser Artikel für Sie hilfreich ist, denken Sie bitte daran, ihn zu liken!

Weitere Programmierkenntnisse finden Sie unter:

Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zur Verwendung der Paginierungskomponente von Bootstrap5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!