Bootstrap Temel Tablo
Temel bir Bootstrap tablo hafif dolgu ve tek yatay bölücüler vardır.
.table sınıf bir tabloya temel stil ekler:
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Çizgili Satırlar
.table-striped sınıfı bir tabloya zebra çizgileri ekler:
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
bordered Tablo
.table-bordered sınıf masa ve hücrelerin her tarafta sınırları ekler:
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Vurgusu Satırlar
.table-hover sınıf tablo satırları üzerinde fareyle üzerine gelme durumu sağlar:
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
yoğunlaştırılmış Tablo
.table-condensed sınıfı bir tablo daha kompakt devre hücre dolgusu keserek yapar:
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Bağlamsal Sınıflar
Bağlamsal sınıfları renk tablosu satır için kullanılabilir ( <tr> ) ya da masa hücreleri ( <td> ) :
Örnek
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
kullanılabilecek bağlamsal sınıfları şunlardır:
| Sınıf | Açıklama |
|---|---|
.active | tablo satır veya tablo hücresine vurgulu rengi uygular |
.success | Başarılı ya da pozitif eylemi gösterir |
.info | nötr bilgilendirici bir değişiklik veya eylemi belirtir |
.warning | dikkat gerekebilir bir uyarı gösterir |
.danger | tehlikeli veya olumsuz etkisini gösterir |
duyarlı Tablolar
.table-responsive sınıf duyarlı bir tablo oluşturur. Tablo daha sonra küçük cihazlarda kaydırılabilir olacaktır (under 768px) . Geniş 768px daha büyük bir şey üzerinde görüntülerken, hiçbir fark yoktur:
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»
Komple Bootstrap Table Reference Bootstrap Table Reference
Tüm tablo sınıfların tam referans için lütfen tüm gidin Bootstrap Tabloları Referans .