Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Paginatore

Paginatore

Il Paginatore è una componente utile per indicare una serie di contenuti correlati tra più pagine.
Tendenzialmente si trova nella parte in basso a destra o al centro della pagina.

Default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<nav class="pagination-wrapper" aria-label="Esempio di navigazione della pagina">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" aria-current="page" 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="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  
</nav>

Variante con “more”

. . .
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
  <span class="page-link">...</span>
</li>
<li class="page-item"><a class="page-link" href="#">24</a></li>
. . .

Variante con jump page

. . . 
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Vai a.." id="jumpToPage28" maxlength="3" />
    <label for="jumpToPage28"><span class="visually-hidden">Indica la pagina desiderata</span></label>
  </div>
</nav>

Variante semplificata

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<nav class="pagination-wrapper" aria-label="Esempio di navigazione simple mode">
  <ul class="pagination" aria-label="Pagina 1 di 5">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-hidden="true">
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-left"></use></svg>
        <span class="visually-hidden">Pagina precedente</span>
      </a>
    </li>
    <li class="page-item"><span class="page-link" aria-current="page">1</span></li>
    <li class="page-item"><span class="page-link">/</span></li>
    <li class="page-item"><span class="page-link">5</span></li>
    <li class="page-item visually-hidden">
      <a class="page-link" href="#" aria-current="page">Pagina 1 di 5</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="visually-hidden">Pagina successiva</span>
        <svg class="icon icon-primary"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use></svg>
      </a>
    </li>
  </ul>
</nav>