Impaginazione di base
Se si dispone di un sito web con un sacco di pagine, si potrebbe desiderare di aggiungere una sorta di impaginazione per ogni pagina.
Un impaginazione base in Bootstrap si presenta così:
Per creare una impaginazione di base, aggiungere il .pagination classe per un <ul> elemento:
Esempio
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Prova tu stesso " Stato attivo
Lo stato attivo mostra ciò che è la pagina corrente:
Aggiungere classe .active per permettere all'utente di sapere quale pagina lui / lei è su:
Esempio
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Prova tu stesso " Disabled State
Un link disabile non può essere cliccato:
Aggiungi classe .disabled se un link per qualche motivo è disattivato:
Esempio
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Prova tu stesso " Pagination Sizing
Blocchi di impaginazione possono anche essere dimensionati a una dimensione più grande o una dimensione più piccola:
Aggiungi classe .pagination-lg per i blocchi più grandi o .pagination-sm per i blocchi più piccoli:
Esempio
<ul class="pagination
pagination-lg">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<ul class="pagination pagination-sm">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> Prova tu stesso " Briciole di pane
Un'altra forma di impaginazione, è il pangrattato:
Il .breadcrumb classe indica la posizione della pagina corrente all'interno di una gerarchia di navigazione:
Esempio
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Completare Bootstrap Navigazione di riferimento
Per un riferimento completo di tutte le classi di navigazione, vai alla nostra completa Bootstrap Navigazione di riferimento .