En son web geliştirme öğreticiler
 

Bootstrap Tables


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 Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

Çizgili Satırlar

.table-striped sınıfı bir tabloya zebra çizgileri ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

bordered Tablo

.table-bordered sınıf masa ve hücrelerin her tarafta sınırları ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

Vurgusu Satırlar

.table-hover sınıf tablo satırları üzerinde fareyle üzerine gelme durumu sağlar:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

yoğunlaştırılmış Tablo

.table-condensed sınıfı bir tablo daha kompakt devre hücre dolgusu keserek yapar:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

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 Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Kendin dene "

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:

Örnek

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Kendin dene "

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 .