Spiegazione dettagliata dell'uso della tabella Bootstrap

La tabella seguente elenca alcuni elementi di tabella supportati da Bootstrap:

Classi di tabella:

.table: aggiunge uno stile di base a qualsiasi <table> (solo linee orizzontali di separazione)
.table-striped: aggiunge strisce a forma di zebra all'interno di <tbody> (non supportato da IE8)
.table-bordered: aggiunge bordi a tutte le celle della tabella
.table-hover: abilita lo stato di hover del mouse su qualsiasi riga all'interno di <tbody>
.table-condensed: rende la tabella più compatta

<tr>, <th> e <td> classi:

.active: applica il colore di hover alla riga o alla cella
.success: indica un'operazione di successo
.info: indica un'operazione di cambiamento delle informazioni
.warning: indica un'operazione di avviso
.danger: indica un'operazione pericolosa

<table class="table"> 
 <caption>Layout di tabella di contesto</caption> 
 <thead> 
  <tr> 
   <th>Prodotto</th> 
   <th>Data di pagamento</th> 
   <th>Stato</th></tr> 
 </thead> 
 <tbody> 
  <tr class="active"> 
   <td>Prodotto 1</td> 
   <td>23/11/2013</td> 
   <td>In attesa di spedizione</td></tr> 
  <tr class="success"> 
   <td>Prodotto 2</td> 
   <td>10/11/2013</td> 
   <td>In transito</td></tr> 
  <tr class="warning"> 
   <td>Prodotto 3</td> 
   <td>20/10/2013</td> 
   <td>In attesa di conferma</td></tr> 
  <tr class="danger"> 
   <td>Prodotto 4</td> 
   <td>20/10/2013</td> 
   <td>Restituito</td></tr> 
 </tbody> 
</table> 

Tabella responsive

Inserendo qualsiasi .table all'interno della classe .table-responsive, puoi far scorrere la tabella orizzontalmente per adattarsi ai dispositivi di piccola dimensione (inferiore a 768px). Quando si visualizza su dispositivi di grandi dimensioni (larghezza superiore a 768px), non si vedranno differenze.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.