IMG-TABELLE

01. Immagini reattive

Documentazione ed esempi per le immagini in un comportamento reattivo (quindi non diventano mai più grandi dei loro genitore)
con aggiunta di stili leggeri, tutto attraverso le classi.

Le immagini in Bootstrap sono rese sensibili con .img-fluid. max-width: 100%; e height: auto; e vengono applicati all'immagine in modo che si riduca in scala con l'elemento genitore.

  
<img src="..." class="img-fluid" alt="Responsive image">

02. Miniature di immagini

E' possibile utilizzare .img-thumbnail per dare all'immagine un bordo arrotondato di 1 pixel.

  
<img src="..." class="img-fluid" alt="...">

03. Allineare le immagini

Allineare le immagini con le classi di allineamento ordinarie e del testo.

  
      <img class="float-left" src="..." alt="...">
      <img class="float-right" src="..." alt="...">
      <p style="clear: both;"> </p>

04. Figure

Per la visualizzazione di immagini e testo correlati con il componente figure in Bootstrap.

  
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-center">Descrizione immagine.</figcaption>
</figure>

05. Tabelle

Usando il markup della tabella di base, ecco le .table tabelle basate su come appaiono in Bootstrap

N°	PRIMO	SECONDO	TERZO
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

Codice tabella


<table class="table">
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">PRIMO</th>
      <th scope="col">SECONDO</th>
      <th scope="col">TERZO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

06. Tabelle-nere

Si può anche invertire i colori, con testo chiaro su sfondi scuri, con .table .table-dark

N°	PRIMO	SECONDO	TERZO
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

Codice tabella


<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">PRIMO</th>
      <th scope="col">SECONDO</th>
      <th scope="col">TERZO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

07. Tabelle-scure

Simile alle tabelle e alle tabelle scure, utilizzare le classi di modifica
.thead-light .thead-dark per <thead> e farle apparire in grigio chiaro o scuro.

N°	Primo	Secondo	Terzo
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

N°	Primo	Secondo	Terzo
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

Codice tabella


<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">N°</th>
      <th scope="col">Primo</th>
      <th scope="col">Secondo</th>
      <th scope="col">Terzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">N°</th>
      <th scope="col">Primo</th>
      <th scope="col">Secondo</th>
      <th scope="col">Terzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

08. Tabelle a striscie

Utilizzare .table-striped per aggiungere strisce zebra a qualsiasi riga della tabella all'interno di <tbody>.

N°	PRIMO	SECONDO	TERZO
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

Codice tabella


<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">PRIMO</th>
      <th scope="col">SECONDO</th>
      <th scope="col">TERZO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

09. Tutte le alternative

Tutte le altre alternative Tabelle

table table-striped table-dark

table table-bordered

table table-bordered table-dark

table table-borderless

table table-borderless table-dark

table table-hover

table table-hover table-dark

table table-sm

table table-sm table-dark

Codice tabella


<table class="table table-striped table-dark">     
<table class="table table-bordered">     
<table class="table table-bordered table-dark">     
<table class="table table-borderless">     
<table class="table table-borderless table-dark">     
<table class="table table-hover">
<table class="table table-hover table-dark">
<table class="table table-sm">
<table class="table table-sm table-dark">

10. Tabelle colorate

Utilizzare le classi contestuali per colorare le righe della tabella o le singole celle.

Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3

Codice tabella


<table class="table">
<tr class="table-active">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>

<tr class="table-primary">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-secondary">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>

</tr>
<tr class="table-success">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-danger">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-warning">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-info">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-light">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="table-dark">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
</table>

11. Colorare le celle

Volendo si possono colare anche le singole celle

nome-1

nome-2

nome-3

nome-4

nome-5

Codice tabella


<table class="table">
  <tr>
    <td class="bg-primary">nome-1</td>
    <td class="bg-success">nome-2</td>
    <td class="bg-warning">nome-3</td>
    <td class="bg-danger">nome-4</td>
    <td class="bg-info">nome-5</td>
  </tr>     
</table>

12. Colorare le righe

Volendo si possono colare anche le singole righe

Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3
Nome-1	Nome-2	Nome-3

Codice tabella


<table class="table">
<tr class="bg-active">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-primary">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-secondary">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>

</tr>
<tr class="bg-success">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-danger">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-warning">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-info">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-light">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
<tr class="bg-dark">
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
</tr>
</table>

13. Didascalie

<caption> funziona come un'intestazione per una tabella.
Aiuta gli utenti con screen reader a trovare una tabella e capire di cosa si tratta e decidere se vogliono leggerla

Lista Utente
N°	PRIMO	SECONDO	TERZO
1	Nome-1	Nome-2	Nome-3
2	Cognome-1	Cognome-2	Cognome-3
3	Indirizzo-1	Indirizzo-2	Indirizzo-3

Codice tabella


<table class="table">
  <caption>Lista Utente</caption>
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">PRIMO</th>
      <th scope="col">SECONDO</th>
      <th scope="col">TERZO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome-1</td>
      <td>Nome-2</td>
      <td>Nome-3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome-1</td>
      <td>Cognome-2</td>
      <td>Cognome-3</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo-1</td>
      <td>Indirizzo-2</td>
      <td>Indirizzo-3</td>
    </tr>
  </tbody>
</table>

14. Tabelle Reattive

Tabelle Reattive

Le tabelle reattive consentono di scorrere le tabelle orizzontalmente con facilità.
Rendi qualsiasi tabella reattiva attraverso tutte le finestre avvolgendo un .table con .table-responsive

Ritaglio / troncamento verticale

Le tabelle reattive utilizzano overflow-y: hidden e rimuovono qualsiasi contenuto che vada oltre i bordi inferiore o superiore della tabella. In particolare, questo può bloccare i menu a discesa e altri widget di terze parti.

Sempre reattivo

In tutti i punti di interruzione, utilizzare .table-responsive per le tabelle a scorrimento orizzontale.

Punto di rottura specifico

Utilizzare .table-responsive{-sm|-md|-lg|-xl} secondo le necessità per
creare tabelle reattive fino a un punto di interruzione particolare.
Da quel punto di interruzione in su, la tabella si comporterà normalmente e non scorrerà orizzontalmente.

esempio:

  
<div class="table-responsive-sm">
<table class="table">

N°	PRIMO	SECONDO	TERZO	QUARTO	QUINTO	SESTO	SETTIMO	OTTAVO	NONO
1	Nome1	Nome2	Nome3	Nome4	Nome5	Nome6	Nome7	Nome8	Nome9
2	Cognome1	Cognome2	Cognome3	Cognome4	Cognome5	Cognome6	Cognome7	Cognome8	Cognome9
3	Indirizzo1	Indirizzo2	Indirizzo3	Indirizzo4	Indirizzo5	Indirizzo6	Indirizzo7	Indirizzo8	Indirizzo9
4	Nome1	Nome2	Nome3	Nome4	Nome5	Nome6	Nome7	Nome8	Nome9
5	Cognome1	Cognome2	Cognome3	Cognome4	Cognome5	Cognome6	Cognome7	Cognome8	Cognome9
6	Indirizzo1	Indirizzo2	Indirizzo3	Indirizzo4	Indirizzo5	Indirizzo6	Indirizzo7	Indirizzo8	Indirizzo9

Codice tabella


<div class="table-responsive">
  <table class="table">
  <thead>
    <tr>
      <th scope="col">N°</th>
      <th scope="col">PRIMO</th>
      <th scope="col">SECONDO</th>
      <th scope="col">TERZO</th>
      <th scope="col">QUARTO</th>
      <th scope="col">QUINTO</th>
      <th scope="col">SESTO</th>
      <th scope="col">SETTIMO</th>
      <th scope="col">OTTAVO</th>
      <th scope="col">NONO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Nome1</td>
      <td>Nome2</td>
      <td>Nome3</td>
      <td>Nome4</td>
      <td>Nome5</td>
      <td>Nome6</td>
      <td>Nome7</td>
      <td>Nome8</td>
      <td>Nome9</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Cognome1</td>
      <td>Cognome2</td>
      <td>Cognome3</td>
      <td>Cognome4</td>
      <td>Cognome5</td>
      <td>Cognome6</td>
      <td>Cognome7</td>
      <td>Cognome8</td>
      <td>Cognome9</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Indirizzo1</td>
      <td>Indirizzo2</td>
      <td>Indirizzo3</td>
      <td>Indirizzo4</td>
      <td>Indirizzo5</td>
      <td>Indirizzo6</td>
      <td>Indirizzo7</td>
      <td>Indirizzo8</td>
      <td>Indirizzo9</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Nome1</td>
      <td>Nome2</td>
      <td>Nome3</td>
      <td>Nome4</td>
      <td>Nome5</td>
      <td>Nome6</td>
      <td>Nome7</td>
      <td>Nome8</td>
      <td>Nome9</td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Cognome1</td>
      <td>Cognome2</td>
      <td>Cognome3</td>
      <td>Cognome4</td>
      <td>Cognome5</td>
      <td>Cognome6</td>
      <td>Cognome7</td>
      <td>Cognome8</td>
      <td>Cognome9</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Indirizzo1</td>
      <td>Indirizzo2</td>
      <td>Indirizzo3</td>
      <td>Indirizzo4</td>
      <td>Indirizzo5</td>
      <td>Indirizzo6</td>
      <td>Indirizzo7</td>
      <td>Indirizzo8</td>
      <td>Indirizzo9</td>
    </tr>
  </tbody>
  </table>
</div>

15. Una buona TABELLA

Questa volendo potrebbe essere considerata una buona tabella da implementare.

N°	Elemento	Descrizione
1	Nome1	funzione di nome1
2	Nome1	funzione di nome1
3	Nome1	funzione di nome1
5	Nome1	funzione di nome1
5	Nome1	funzione di nome1

Codice


<table class="table table-bordered table-striped">
 <thead>
  <tr class="text-center">
   <th scope="col">N°</th>
   <th scope="col">Elemento</th>
   <th scope="col">Descrizione</th>
  </tr>
 </thead>
 <tbody> 
  <tr class="text-center">
   <th scope="row">1</th>
   <td>Nome1</td>
   <td>funzione di nome1</td>
  </tr>
  <tr class="text-center">
   <th scope="row">2</th>
   <td>Nome1</td>
   <td>funzione di nome1</td>
  </tr>
  <tr class="text-center">
   <th scope="row">3</th>
   <td>Nome1</td>
   <td>funzione di nome1</td>
  </tr>
  <tr class="text-center">
   <th scope="row">5</th>
   <td>Nome1</td>
   <td>funzione di nome1</td>
  </tr>
  <tr class="text-center">
   <th scope="row">5</th>
   <td>Nome1</td>
   <td>funzione di nome1</td>
  </tr>
 </tbody>
</table>