Bootstrap

Bootstrap Tablolar

Temel Tablo

Bootstrap tablolar ile verilerimizi düzenli ve tasarımsal olarak güzel bir sıraya sokabiliriz. Bunun için table yi kullanacağız farklı tablolar tasarlayarak bunları nasıl responsive hale getireceğimizi öğreneceğiz. Hem masaüstü cihazımızda hemde mobil cihazımızda düzgün bir şekilde gösterilen tablolar tasarlamayı öğreneceğiz.

Temel bootstrap tablolarında hafif bir iç boşluk ve sadece hayat ayraçlar mevcuttur.

.table classı temel sitili tabloya uygular.

<h4>Dersler</h4>
<table class="table table-striped table-hover table-condensed">
<!--
hover: hangi satıra gelirsen o satırı seçer
striped:tablonun her satırını farklı renk yapar
condensed: satın aralığını azaltır
bordered: kenaralık ekler
-->
<thead>
<tr>
<th>Ders Kodu</th>
<th>Ders Adı</th>
<th>Kredi</th>
</tr>
</thead>
<tbody>
<tr>
<td>111111</td>
<td>İnetnet Programcılıgı</td>
<td>5</td>
</tr>
<tr>
<td>111111</td>
<td>Görsel Programlama</td>
<td>5</td>
</tr>
<tr>
<td>111111</td>
<td>Nesne Tabanlı Programlama</td>
<td>5</td>
</tr>
<tr>
<td>111111</td>
<td>Ağ Sistemleri</td>
<td>5</td>
</tr>
</tbody>
</table>

Çizgili Satırlar /  Zebra sitil

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

cizgili-tablo

Kenarlık Çizgilerine Sahip Tablolar

.table-bordered sınıfı tabloların ve hücrelerin tüm kenarlarına kenarlık ekler.

kenarlikli-tablo

Hover Rows

.table-hover sınıfı tablo satırları üzerine işaretçi geldiğinde o satıra hover sitili uygular.

hover-talo

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

.table-condensed classı uygulandığı tablonun cell padding ölçülerini yarıya indirerek daha kompakt hale getirir.

consensed-tablo

 

Tabloların İçeriksel Renk Classları ile Kullanımı

İçeriksel renk classları <tr> etiketlerine veya <td> etiketlerine uygulanabilir.

iceriksek-tablo

 

Responsive Tablolar

.table-responsive classı tabloya responsive özelliği kazandırır.

<div class="table-responsive">
<table class="table">

Aşağıdaki yer alan şekillerde responsive tablonun genişlik 768px altına indiğinde nasıl göründüğü yer almaktadır.

Yorum Yap