Source

Paginazione

A documentazione è l'esempii per mostrà a paginazione per indicà una seria di cuntenutu ligatu esiste in parechje pagine.

Panoramica

Utilizemu un grande bloccu di ligami cunnessi per a nostra paginazione, facendu i ligami difficiuli di miss è facilmente scalabili - tuttu mentre furnisce grandi spazii di successu. A paginazione hè custruita cù elementi HTML di lista per chì i lettori di u screnu ponu annunzià u numeru di ligami dispunibili. Aduprate un <nav>elementu di imballaggio per identificà cum'è una sezione di navigazione per i lettori di schermu è altre tecnulugia di assistenza.

Inoltre, cum'è e pagine prubabilmente anu più di una sezione di navigazione, hè cunsigliu di furnisce un descrittivu aria-labelper <nav>riflette u so scopu. Per esempiu, se u cumpunente di paginazione hè utilizatu per navigà trà un settore di risultati di ricerca, una etichetta adatta puderia esse aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">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>

U travagliu cù l'icone

Circate à utilizà un icona o simbulu in u locu di testu per qualchi ligami di paginazione? Assicuratevi di furnisce un supportu propiu di lettore di schermu cù ariaattributi è .sr-onlyutilità.

<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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Stati disattivati ​​è attivi

I ligami di paginazione sò persunalizabili per diverse circustanze. Aduprà .disabledper i ligami chì pareanu micca cliccà è .activeper indicà a pagina attuale.

Mentre a .disabledclassa usa pointer-events: noneper pruvà à disattivà a funziunalità di u ligame di <a>s, quella pruprietà CSS ùn hè ancu standardizzata è ùn conta micca a navigazione di u teclatu. Comu tali, duvete sempre aghjunghje tabindex="-1"i ligami disattivati ​​è aduprà JavaScript persunalizatu per disattivà cumplettamente a so funziunalità.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></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>

Pudete eventualmente scambià l'ancore attive o disattivate per <span>, o omette l'ancora in u casu di e frecce prev/next, per caccià a funziunalità di cliccà è impedisce u focus di u teclatu mantenendu i stili previsti.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </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>

Misure

Vulete una paginazione più grande o più chjuca? Aggiungi .pagination-lgo .pagination-smper dimensioni supplementari.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Allineamentu

Cambia l'allineamentu di i cumpunenti di paginazione cù l'utilità flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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">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>