Il miglior tutorial Modulo bootstrap Nel 2024, in questo tutorial puoi imparare La forma di base,Esempi,Classe Modulo opzionale,Esempi,Esempi,Esempi,Esempi,classe Context,Esempi,tavolo responsive,Esempi,
Bootstrap fornisce una chiara tabella di layout creato. La seguente tabella elenca alcuni elementi della tabella di supporto Bootstrap:
etichetta | descrizione |
---|---|
<Table> | Aggiungendo a formare la base di stile. |
<Thead> | contenitore Tabella fila elemento di intestazione (<tr>), utilizzato per identificare le colonne della tabella. |
<Tbody> | Tabella elemento contenitore nel corpo della riga della tabella (<tr>). |
<Tr> | Un gruppo appaiono su una sola riga nella elemento contenitore della cella della tabella (<td> o <th>). |
<Td> | La cella di una tabella predefinita. |
<Th> | cella speciale, utilizzato per identificare la colonna o riga (a seconda dell'estensione e della localizzazione). È necessario utilizzare il <thead> all'interno. |
<Caption> | Circa il deposito tabella di descrizione dei contenuti o di sintesi. |
Le seguenti tabelle stile tabella possono essere usate:
categoria | descrizione | Esempi |
---|---|---|
.table | Arbitraria <table> Aggiungi stile di base (solo separatore orizzontale) | provare |
.table-strisce | Nel <tbody> all'interno del modulo per aggiungere strisce zebra (IE8 non supporta) | provare |
.table-delimitato | Aggiungere un bordo per tutte le celle della tabella | provare |
.table-hover | Nel <tbody> all'interno di qualsiasi fila abilitare stato hover | provare |
.table-condensato | Fare più forma compatta | provare |
l'uso congiunto di tutte le classi di forme | provare |
Classi La seguente tabella possono essere utilizzati per formare una riga o cella:
categoria | descrizione | Esempi |
---|---|---|
.active | L'applicazione del colore hover on line o cellulare | provare |
.success | Indica un'operazione di successo | provare |
.info | Informazioni che rappresenta operativo variabile | provare |
.warning | Esso rappresenta un'operazione di avviso | provare |
.danger | Esso rappresenta un'operazione pericolosa | provare |
Se si desidera solo con una imbottitura (imbottitura) e base suddivisi livello di tabella, aggiungereclasse.table, come mostrato nei seguenti esempi:
I risultati sono i seguenti:
Oltre alla marcatura tabella semplice e categoria .table, e alcuni possono essere utilizzati come marker per definire le classi di stile. Di seguito vi introdurrà a queste classi.
Con l'aggiunta diclasse .table a righe,potrete vedere le striature sulla linea <tbody> all'interno, come nell'esempio seguente:
I risultati sono i seguenti:
Con l'aggiunta diclasse .table-delimitato,vedrete che ogni elemento ha un bordo intorno, e il totale è arrotondato forma, come mostrato nel seguente esempio:
I risultati sono i seguenti:
Aggiungendoclasse .table-hover,quando il puntatore è sopra la riga quando ci sarà un fondo grigio chiaro, come illustrato nei seguenti esempi:
I risultati sono i seguenti:
Aggiungendoclasse .table-condensato,in linea padding (padding) vengono tagliate a metà, in modo che la tabella è più compatta, come mostrato nel seguente esempio. Queste informazioni sono utili quando si vuole guardare più compatto.
I risultati sono i seguenti:
classe Context elencati nella seguente tabella permette di cambiare il colore delle righe di tabella o celle singole sfondo.
类 | 描述 |
---|---|
.active | 对某一特定的行或单元格应用悬停颜色 |
.success | 表示一个成功的或积极的动作 |
.warning | 表示一个需要注意的警告 |
.danger | 表示一个危险的或潜在的负面动作 |
Queste classi possono essere applicati al <tr> <td> o <th>.
I risultati sono i seguenti:
Da qualsiasi.tableavvolto inclasse .table-reattivo,si può avere il tavolo per scorrere orizzontalmente per accogliere dispositivi di piccole dimensioni (meno di 768px). Durante la visualizzazione su un impianto su larga scala è più grande di 768px di larghezza, non si vedrà alcuna differenza.
I risultati sono i seguenti: