Latest web development tutorials

Modulo bootstrap

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.

classe Form

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

classe <tr>, <th> e <td>

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

La forma di base

Se si desidera solo con una imbottitura (imbottitura) e base suddivisi livello di tabella, aggiungereclasse.table, come mostrato nei seguenti esempi:

Esempi

<Tabella class = "tavolo"> <Caption> layout di tabella di base </ caption> <Thead> <Tr> <Th> Nome </ th> <Th> Città </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> </ Tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

La forma di base

Classe Modulo opzionale

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.

tavolo a righe

Con l'aggiunta diclasse .table a righe,potrete vedere le striature sulla linea <tbody> all'interno, come nell'esempio seguente:

Esempi

<Tabella class = "table-strisce tabella" > <Caption> strisce layout di tabella </ caption> <Thead> <Tr> <Th> Nome </ th> <Th> Città </ th> <Th> Password </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

tavolo a righe

bordo della tabella

Con l'aggiunta diclasse .table-delimitato,vedrete che ogni elemento ha un bordo intorno, e il totale è arrotondato forma, come mostrato nel seguente esempio:

Esempi

<Tabella class = "table-delimitato tabella" > <Caption> aspetto di telaio </ caption> <Thead> <Tr> <Th> Nome </ th> <Th> Città </ th> th> Password </ th> </ Tr> </ Thead> tbody> <tr > <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

bordo della tabella

tavolo hover

Aggiungendoclasse .table-hover,quando il puntatore è sopra la riga quando ci sarà un fondo grigio chiaro, come illustrato nei seguenti esempi:

Esempi

<Tabella class = "tavolo da ping-hover" > <Caption> layout di tabella hover </ caption> <Thead> <Tr> <Th> Nome </ th> <Th> Città </ th> <Th> Password </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ Tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

tavolo hover

Forma compatta

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.

Esempi

<Tabella class = "table-condensato tabella" > <Caption> layout di forma snella </ caption> <Thead> <Tr> <Th> Nome </ th> <Th> Città </ th> <Th> Password </ th> </ tr> </ Thead> <Tbody> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411.027 </ td> </ tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

Forma compatta

classe Context

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

Esempi

<Tabella class = "tavolo"> <Caption> layout di tabella di contesto </ caption> <Thead> <Tr> <Th> Prodotti </ th> <Th> Data di pagamento </ th> <Th> Stato </ th> </ tr> </ Thead> <Tbody> <Tr class = "attiva"> <Td> Prodotti 1 </ td> <Td> 23/11/2013 </ td> <Td> per essere spediti </ td> </ tr> <Tr class = "successo"> <Td> Prodotti 2 </ td> <Td> 2013/10/11 </ td> <Td> La consegna </ td> </ tr> <Tr class = "warning"> <Td> Prodotti 3 </ td> <Td> 20/10/2013 </ td> <Td> da confermare </ td> </ tr> <Tr class = "pericolo"> <Td> Prodotti 4 </ td> <Td> 20/10/2013 </ td> <Td> è tornato </ td> </ tr> </ Tbody> </ Table>

Prova »

I risultati sono i seguenti:

classe Context

tavolo responsive

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.

Esempi

<div class = "table-responsive"> <Tabella class = "tavolo"> <Caption> reattivo disposizione della tabella </ caption> <Thead> <Tr> <Th> Prodotti </ th> <Th> Data di pagamento </ th> <Th> Stato </ th> </ tr> </ Thead> <Tbody> <Tr> <Td> Prodotti 1 </ td> <Td> 23/11/2013 </ td> <Td> per essere spediti </ td> </ tr> <Tr> <Td> Prodotti 2 </ td> <Td> 2013/10/11 </ td> <Td> La consegna </ td> </ tr> <Tr> <Td> Prodotti 3 </ td> <Td> 20/10/2013 </ td> <Td> da confermare </ td> </ tr> <Tr> <Td> Prodotti 4 </ td> <Td> 20/10/2013 </ td> <Td> è tornato </ td> </ tr> </ Tbody> </ Table> </ Div>

Prova »

I risultati sono i seguenti:

tavolo responsive