Bootstrap podstawowej tabeli
Podstawowym Bootstrap tabela ma lekką wyściółkę i tylko przegród poziomych.
.table Klasy podstawowej stylizacji dodaje do tabeli:
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Striped Wiersze
.table-striped Klasa dodaje Zebra paski do tabeli:
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
graniczy Tabela
.table-bordered klasy dodaje granice na wszystkich stronach stołu i komórek:
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Wiersze Hover
.table-hover klasa umożliwia stanu aktywowanych w wierszach tabeli:
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Skrócone Tabela
.table-condensed klasy sprawia, że stół bardziej zwarty przez cięcie dopełnienie komórek na pół:
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Klasy kontekstowe
Klasy kontekstowe mogą być wykorzystane do wierszy tabeli kolorów ( <tr> ) lub komórki tabeli ( <td> ):
Przykład
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Klasy kontekstowych, które mogą być stosowane to:
| Klasa | Opis |
|---|---|
.active | Dotyczy koloru najechania na wiersz tabeli lub komórki tabeli |
.success | Wskazuje udane lub pozytywnych działań |
.info | Wskazuje neutralną zmianę lub akcję informacyjną |
.warning | Wskazuje ostrzeżenia, które mogą wymagać uwagi |
.danger | Wskazuje niebezpieczne lub potencjalnie negatywnego działania |
reagujących Stoły
.table-responsive klasy tworzy elastyczne tabeli. Tabela będzie przewijać w poziomie na małych urządzeniach (poniżej 768px). Podczas oglądania na coś większego niż 768px szerokości, nie ma różnicy:
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»
Kompletna Bootstrap Table Reference Bootstrap Table Reference
Pełną odniesienia wszystkich klas stołowych, przejdź do naszej pełnej Bootstrap tabelach informacyjnych .