HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tabelle Bootstrap

❮ Precedente Prossimo ❯

Tavolo base Bootstrap

Un tavolo Bootstrap di base ha un'imbottitura leggera e solo divisori orizzontali.

La .tableclasse aggiunge uno stile di base a un tavolo:

Esempio

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Righe a righe

La .table-stripedclasse aggiunge strisce zebrate a una tabella:

Esempio

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tavolo bordato

La .table-borderedclasse aggiunge i bordi su tutti i lati della tabella e delle celle:

Esempio

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Righe al passaggio del mouse

La .table-hoverclasse aggiunge un effetto al passaggio del mouse (colore di sfondo grigio) sulle righe della tabella:

Esempio

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tavola condensata

La .table-condensedclasse rende un tavolo più compatto tagliando a metà l'imbottitura delle celle:

Esempio

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Classi contestuali

Le classi contestuali possono essere utilizzate per colorare le righe della tabella ( <tr>) o le celle della tabella ( <td>):

Esempio

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Le classi contestuali utilizzabili sono:

Classe Descrizione
.active Applica il colore al passaggio del mouse alla riga della tabella o alla cella della tabella
.success Indica un'azione riuscita o positiva
.info Indica un cambiamento o un'azione informativa neutra
.warning Indica un avviso che potrebbe richiedere attenzione
.danger Indica un'azione pericolosa o potenzialmente negativa

Tabelle reattive

La .table-responsiveclasse crea una tabella reattiva. La tabella scorrerà quindi orizzontalmente su dispositivi di piccole dimensioni (meno di 768 px). Quando si visualizza su qualcosa di più grande di 768px di larghezza, non c'è differenza:

Esempio

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Mettiti alla prova con gli esercizi

Esercizio:

Aggiungi un attributo di classe per definire lo stile della tabella come una tabella Bootstrap di base.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Riferimento completo alla tabella Bootstrap

Per un riferimento completo di tutte le classi di tabelle, vai al nostro completo Bootstrap Tables Reference .


❮ Precedente Prossimo ❯