HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Paginazione

Il componente Pagination serve a realizzare un menu di navigazione tra pagine in siti multi-pagina.

Markup HTML di base

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <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>
  <li><a href="#">&raquo;</a></li>
</ul>

Si parte dalla consueta lista non ordinata e si aggiunge al tag iniziale la classe .pagination. La classe .disabled designa un item disabilitato e non cliccabile. La classe .active designa l'item (pagina) corrente.

Regole CSS per il componente Pagination

Per personalizzare il componente Pagination si può intervenire su queste regole CSS:

/* Contenitore */
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}


/* Formattazione dei singoli item */
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
}


/* Arrotondamento degli angoli sul primo item */
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

/* Arrotondamento degli angoli sull'ultimo item */
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Colore dell'item sull'hover */
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: #eeeeee;
}

/* Colori e bordo dell'item attivo (corrente) */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  cursor: default;
  background-color: #428bca;
  border-color: #428bca;
}

/* Colori e bordo dell'item disabilitato */
.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #999999;
  cursor: not-allowed;
  background-color: #ffffff;
  border-color: #dddddd;
}

Dimensione della paginazione

In aggiunta alla variante standard, possiamo creare una navigazione leggermente più grande aggiungendo alla classe .pagination la classe .pagination-lg.

<ul class="pagination pagination-lg">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <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>
  <li><a href="#">&raquo;</a></li>
</ul>

Esiste anche una variante più piccola, designata con la classe .pagination-sm.

<ul class="pagination pagination-sm">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <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>
  <li><a href="#">&raquo;</a></li>
</ul>

Regole CSS per le varianti large e small

È possibile modificare le impostazioni di default per le varianti large e small partendo da queste regole CSS:

/* Variante large */
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}


/* Variante small */
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

Il componente Pager

Invece che una paginazione numerata, possiamo creare una navgazione con i link 'Precedente' e 'Successivo' ricorrendo al componente Pager.

Markup HTML di base

<ul class="pager">
  <li class="disabled"><a href="#">Precedente</a></li>
  <li><a href="#">Successivo</a></li>
</ul>

Regole CSS per il componente Pager

Si puà modificare l'aspetto del Pager agendo su queste regole:

/* Contenitore */
.pager {
  padding-left: 0;
  margin: 20px 0;
  text-align: center;
  list-style: none;
}

/* Colori e bordo dell'item */
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 15px;
}

/* Colore di sfondo dell'item sull'hover */
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}

/* Colori e bordo dell'item disabilitato */
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #999999;
  cursor: not-allowed;
  background-color: #ffffff;
}