Bootstrap Tabel Dasar
Sebuah dasar Bootstrap meja memiliki bantalan ringan dan hanya pembagi horizontal.
The .table kelas menambahkan styling dasar untuk tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Baris bergaris
The .table-striped kelas menambahkan zebra-garis ke meja:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
berbatasan Tabel
The .table-bordered kelas menambahkan perbatasan di semua sisi dari meja dan sel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Baris Hover
The .table-hover kelas memungkinkan negara hover pada baris tabel:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tabel kental
The .table-condensed kelas membuat meja lebih kompak dengan memotong bantalan sel setengah:
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kelas kontekstual
Kelas kontekstual dapat digunakan untuk baris tabel warna ( <tr> ) atau sel tabel ( <td> ):
Contoh
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Kelas yang kontekstual yang dapat digunakan adalah:
| Kelas | Deskripsi |
|---|---|
.active | Berlaku warna melayang ke baris tabel atau sel tabel |
.success | Menunjukkan tindakan berhasil atau positif |
.info | Menunjukkan perubahan informatif netral atau tindakan |
.warning | Menunjukkan peringatan yang mungkin memerlukan perhatian |
.danger | Menunjukkan tindakan yang berbahaya atau berpotensi negatif |
Tabel responsif
The .table-responsive kelas membuat tabel responsif. Meja kemudian akan gulir horizontal pada perangkat kecil (di bawah 768px). Saat melihat pada apa pun lebih besar dari 768px lebar, tidak ada perbedaan:
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»
lengkap Bootstrap Table Reference Bootstrap Table Reference
Untuk referensi yang lengkap dari semua kelas meja, pergi ke lengkap kami Bootstrap Referensi Tables .