Bootstrap 5.2 / Componenten

Pagination

Documentatie en voorbeelden voor paginering, om aan te geven dat een reeks samenhangende content over meerdere pagina's verdeeld is.

Overzicht

We gebruiken een groot blok aaneengesloten links voor onze paginering, waardoor links moeilijk te missen en goed schaalbaar zijn — met bovendien grote klikvlakken. Paginering is gebouwd met HTML-lijstelementen, zodat schermlezers het aantal beschikbare links kunnen aankondigen. Gebruik een omhullend <nav>-element om het voor schermlezers en andere hulptechnologieën als navigatiesectie te markeren.

Omdat pagina's waarschijnlijk meer dan één zo'n navigatiesectie hebben, is het bovendien verstandig een beschrijvend aria-label voor de <nav> op te geven dat het doel ervan weergeeft. Wordt het paginering-component bijvoorbeeld gebruikt om door zoekresultaten te navigeren, dan zou een passend label aria-label="Pagina's met zoekresultaten" kunnen zijn.

HTML

<nav aria-label="Voorbeeld van paginanavigatie">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Vorige</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="#">Volgende</a></li>
  </ul>
</nav>

Werken met iconen

Wil je bij sommige pagineringslinks een icoon of symbool in plaats van tekst gebruiken? Zorg dan met aria-attributen voor goede ondersteuning voor schermlezers.

HTML

<nav aria-label="Voorbeeld van paginanavigatie">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Vorige">
        <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="Volgende">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Disabled- en active-states

Pagineringslinks zijn aan te passen voor verschillende situaties. Gebruik .disabled voor links die er niet-aanklikbaar uitzien en .active om de huidige pagina aan te geven.

Hoewel de klasse .disabled pointer-events: none gebruikt om de linkfunctionaliteit van <a>s te proberen uit te schakelen, is die CSS-eigenschap nog niet gestandaardiseerd en houdt hij geen rekening met toetsenbordnavigatie. Voeg daarom altijd tabindex="-1" toe aan uitgeschakelde links en gebruik eigen JavaScript om hun functionaliteit volledig uit te schakelen.

HTML

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link">Vorige</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="#">Volgende</a>
    </li>
  </ul>
</nav>

Je kunt actieve of uitgeschakelde ankers desgewenst vervangen door een <span>, of het anker bij de vorige/volgende-pijlen weglaten, om de klikfunctionaliteit te verwijderen en toetsenbordfocus te voorkomen terwijl de beoogde stijlen behouden blijven.

HTML

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

Afmetingen

Zin in grotere of kleinere paginering? Voeg .pagination-lg of .pagination-sm toe voor extra formaten.

HTML

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

HTML

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

Uitlijning

Wijzig de uitlijning van paginering-componenten met flexbox-utilities. Bijvoorbeeld met .justify-content-center:

HTML

<nav aria-label="Voorbeeld van paginanavigatie">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link">Vorige</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="#">Volgende</a>
    </li>
  </ul>
</nav>

Of met .justify-content-end:

HTML

<nav aria-label="Voorbeeld van paginanavigatie">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link">Vorige</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="#">Volgende</a>
    </li>
  </ul>
</nav>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruikt paginering nu lokale CSS-variabelen op .pagination, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_pagination.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Sass-mixins

Standaardwaarden: zie scss/mixins/_pagination.scss in de Bootstrap-broncode.