Documentazione obsoleta

Questa documentazione non è più mantenuta, ma è stata ripristinata per chi ne avesse ancora bisogno in vecchi progetti.

La versione più attuale di Bootstrap Italia è la versione 2.x, inizia un nuovo progetto sfruttando il codice sorgente aggiornato.

Thumbnav

Componente di navigazione con immagini thumbnail

Il componente Thumbnav consiste in una lista <ul> con classe .thumb-nav contenente tanti elementi <li> quante sono i link/thumbnail richiesti.

Ogni elemento <li> deve contenere un resizer come da esempio per mantenere le corrette proporzioni di 3:2 a prescindere dalle dimensioni dell’immagine utilizzata per la thumbnail. Il file SVG a cui punta il resizer è fornito con la distribuzione nella cartella “assets”.

Per indicare il link/thumbail attivo applicare la classe .active al relativo tag <a>.

Accessibilità

Per ragioni di accessibilità è importante indicare all’interno dell’attributo alt="" dell’immagine thumbnail l’azione associata al link relativo.

<ul class="thumb-nav">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Versione small

Applicando la classe .thumb-nav-small al contenitore .thumb-nav si otterranno thumbnail di dimensione ridotta.

<ul class="thumb-nav thumb-nav-small">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Stati hover

Applicando delle classi predefinite al contenitore .thumb-nav è possibile customizzare l’effetto di hover.

Hover senza zoom

Utilizzare la classe .thumb-nav-nozoom per disabilitare l’effetto di zoom sull’immagine.

<ul class="thumb-nav thumb-nav-nozoom">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Hover con layer nero

Utilizzare la classe .thumb-nav-black per ottenere un effetto di overlay nero trasparente sull’immagine.

<ul class="thumb-nav thumb-nav-black">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Hover con layer primary

Utilizzare la classe .thumb-nav-primary per ottenere un effetto di overlay di colore primary sull’immagine.

<ul class="thumb-nav thumb-nav-primary">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Thumbnav verticale

Applicando la classe .thumb-nav-vertical al contenitore .thumb-nav si ottiene una versione verticale della Thumbnav.

<ul class="thumb-nav thumb-nav-vertical">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
</ul>

Posizione in overlay

La Thumbnav può essere inserita in overlay all’interno di un contenitore come ad esempio una galleria immagini. Il contenitore dovrà utilizzare la classe di Bootstrap .position-relative per posizionare correttamente la Thumbnav al proprio interno. Alla Thumbnav dovrà essere applicata una classe a scelta fra:

.thumb-nav-bottom per posizonarla nella parte inferiore
.thumb-nav-top per posizonarla nella parte superiore
.thumb-nav-left per posizonare una thumbnav vertical nella parte sinistra
.thumb-nav-right per posizonare una thumbnav vertical nella parte destra

Overlay orizzontale inferiore

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/1280/720?image=1056" class="test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-small thumb-nav-bottom">
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay orizzontale top

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/1280/720?image=1056" class="test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-small thumb-nav-top">
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay verticale a sinistra

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/720/720?image=1056" class="d-md-none test-image" alt="Descrizione immagine"/>
  <img src="https://picsum.photos/1280/720?image=1056" class="d-none d-md-block test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-vertical thumb-nav-small thumb-nav-left">
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Overlay verticale a destra

<div class="test-gallery position-relative">
  <img src="https://picsum.photos/720/720?image=1056" class="d-md-none test-image" alt="Descrizione immagine"/>
  <img src="https://picsum.photos/1280/720?image=1056" class="d-none d-md-block test-image" alt="Descrizione immagine"/>
  <ul class="thumb-nav thumb-nav-vertical thumb-nav-small thumb-nav-right">
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#" class="active"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
      </li>
      <li>
        <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
        <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
      </li>
  </ul>
</div>

Griglia a larghezza fissa

Applicando la classe .thumb-nav-fixed alla Thumbnav le thumbnail avranno una larghezza fissa di 240px oppure di 120px se è stata utilizzata anche la classe .thumb-nav-small.

<ul class="thumb-nav thumb-nav-fixed">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/240/160?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>

Griglia a larghezza automatica

Applicando la classe .thumb-nav-auto alla Thumbnav le thumbnail occuperanno automaticamente l’intera larghezza del contenitore. È necessario indicare il numero degli elementi presenti su ogni riga con una delle seguenti classi aggiuntive:

.thumb-nav-auto-2 per ottenere 2 thumb per riga
.thumb-nav-auto-3 per ottenere 3 thumb per riga
.thumb-nav-auto-4 per ottenere 4 thumb per riga
.thumb-nav-auto-5 per ottenere 5 thumb per riga

Esempio: 3 thumbnail per riga

<ul class="thumb-nav thumb-nav-auto thumb-nav-auto-3">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>

Esempio: 5 thumbnail per riga

<ul class="thumb-nav thumb-nav-auto thumb-nav-auto-5">
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1056" alt="Visualizza immagine 1"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1050" alt="Visualizza immagine 2"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1044" alt="Visualizza immagine 3"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1057" alt="Visualizza immagine 4"></a>
    </li>
    <li>
      <img src="/bootstrap-italia/dist/assets/resizer-3x2.svg" class="thumb-nav-resizer" aria-hidden="true"/>
      <a href="#"><img src="https://picsum.photos/480/320?image=1037" alt="Visualizza immagine 5"></a>
    </li>
</ul>