logo Portale zerozetasm.it





Contenuto: 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.

...
Descrizione immagine.
  
<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

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

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.

Primo Secondo Terzo
1 Nome-1 Nome-2 Nome-3
2 Cognome-1 Cognome-2 Cognome-3
3 Indirizzo-1 Indirizzo-2 Indirizzo-3
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>.

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
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">
    

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.

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>