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 .