Bootstrap ile tabloların tercihli stiline (JavaScript eklentilerinde yaygın kullanımları göz önüne alındığında) ilişkin belgeler ve örnekler.
Örnekler
Takvimler ve tarih seçiciler gibi üçüncü taraf widget'larda tabloların yaygın kullanımı nedeniyle, tablolarımızı isteğe bağlı olacak şekilde tasarladık . Temel sınıfı .tableherhangi birine ekleyin <table>, ardından özel stiller veya dahil edilen çeşitli değiştirici sınıflarımızla genişletin.
En temel tablo işaretlemesini kullanarak, .tableBootstrap'ta tabanlı tabloların nasıl göründüğü aşağıda açıklanmıştır. Tüm tablo stilleri Bootstrap 4'te devralınır , yani iç içe geçmiş tablolar üst öğeyle aynı şekilde stillendirilir.
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
Renkleri, koyu arka planlar üzerinde açık metinle birlikte, ile de tersine çevirebilirsiniz .table-dark.
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
Masa başı seçenekleri
Tablolara ve koyu tablolara benzer şekilde, değiştirici sınıfları .thead-lightveya s'nin açık veya koyu gri görünmesini .thead-darksağlamak için kullanın.<thead>
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
Çizgili satırlar
.table-stripediçindeki herhangi bir tablo satırına zebra çizgileri eklemek için kullanın <tbody>.
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
bordürlü masa
.table-borderedTablonun ve hücrelerin her tarafında kenarlıklar ekleyin .
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
Kenarlıksız masa
.table-borderlessKenarlıksız bir tablo için ekleyin .
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
.table-borderlesskaranlık masalarda da kullanılabilir.
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
gezinebilir satırlar
.table-hoveriçindeki tablo satırlarında fareyle üzerine gelme durumunu etkinleştirmek için ekleyin <tbody>.
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
Küçük masa
.table-smHücre dolgusunu yarıya indirerek tabloları daha kompakt hale getirmek için ekleyin .
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Kuş Larry
@twitter
bağlamsal sınıflar
Tablo satırlarını veya tek tek hücreleri renklendirmek için bağlamsal sınıfları kullanın.
Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .sr-onlysınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.
.tableHerhangi birini ile sararak, tablonun sırasıyla 576px, 768px, 992px ve 1120px'e kadar (ancak dahil değil) .table-responsive{-sm|-md|-lg|-xl}her kesme noktasında yatay olarak kaydırılmasını sağlayarak duyarlı tablolar oluşturun .max-width
Tarayıcılar şu anda aralık bağlamı sorgularını desteklemediğinden , bu karşılaştırmalar için daha yüksek hassasiyete sahip değerler kullanarak kesirli genişliklere sahip (örneğin yüksek dpi cihazlarda belirli koşullar altında ortaya çıkabilir ) sınırlamalar min-ve max-önekler ve görünüm pencereleri üzerinde çalıştığımızı unutmayın. .
Altyazılar
A <caption>, bir tablonun başlığı gibi işlev görür. Ekran okuyucuları olan kullanıcıların bir tablo bulmasına ve neyle ilgili olduğunu anlamasına ve onu okumak isteyip istemediğine karar vermesine yardımcı olur.
Kullanıcı listesi
#
Öncelikle
Son
Üstesinden gelmek
1
İşaret
Otto
@mdo
2
Yakup
Thornton
@yağ
3
Larry
kuş
@twitter
Duyarlı tablolar
Duyarlı tablolar, tabloların kolaylıkla yatay olarak kaydırılmasını sağlar. .tableile sararak herhangi bir tabloyu tüm görünüm alanlarında duyarlı hale getirin .table-responsive. Veya kullanarak yanıt veren bir tabloya sahip olmak için maksimum bir kesme noktası seçin .table-responsive{-sm|-md|-lg|-xl}.
Dikey kırpma/kesme
Duyarlı tablolar overflow-y: hidden, tablonun alt veya üst kenarlarının ötesine geçen herhangi bir içeriği kesen öğesini kullanır. Özellikle, bu, açılır menüleri ve diğer üçüncü taraf widget'larını kırpabilir.
Her zaman duyarlı
Her kesme noktasında, .table-responsiveyatay olarak kayan tablolar için kullanın.
#
Başlık
Başlık
Başlık
Başlık
Başlık
Başlık
Başlık
Başlık
Başlık
1
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
2
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
3
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Hücre
Kesme noktasına özgü
.table-responsive{-sm|-md|-lg|-xl}Belirli bir kesme noktasına kadar duyarlı tablolar oluşturmak için gerektiği gibi kullanın . Bu kesme noktasından itibaren, tablo normal şekilde davranacak ve yatay olarak kaydırılmayacaktır.
Bu tablolar, duyarlı stilleri belirli görünüm alanı genişliklerinde uygulanana kadar bozuk görünebilir.