Bootstrap Tabelul Basic
O bază Bootstrap de masă are o căptușeală de lumină și numai separatoare orizontale.
.table clasa adaugă stil de bază la un tabel:
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Rânduri Striped
.table-striped clasa adaugă zebra dungi la o masă:
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabelul Învecinați
.table-bordered clasa adaugă frontiere pe toate laturile mesei și celule:
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Rânduri Hover
.table-hover clasa permite o stare Hover pe rânduri de masă:
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabelul Condensed
.table-condensed clasa face o masă mai compactă prin tăierea padding de celule in jumatate:
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
clasele Contextual
Clase contextuală pot fi folosite pentru rânduri tabel culori ( <tr> ) sau celule de tabel ( <td> ) :
Exemplu
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Clasele contextuale care pot fi utilizate sunt:
| Clasă | Descriere |
|---|---|
.active | Aplică culoarea planare la rândul din tabel sau celulă de masă |
.success | Indică o acțiune de succes sau pozitiv |
.info | Indică o schimbare informativă neutră sau acțiune |
.warning | Indică un avertisment care ar putea avea nevoie atenție |
.danger | Indică o acțiune periculoasă sau potențial negativ |
Tabele Responsive
.table-responsive clasa creează un tabel receptiv. Tabelul se va derula pe orizontală , apoi pe dispozitive mici (under 768px) . Atunci când vizualizați pe ceva mai mare decât 768px larg, nu există nici o diferență:
Exemplu
<div class="table-responsive">
<table class="table">
...
</table>
</div> Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»
complet Bootstrap Table Reference Bootstrap Table Reference
Pentru o referință completă a tuturor claselor de masă, du - te pentru a completa nostru Bootstrap de referință Mese .