1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (2 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00.
Bu yazıya oy vermek ister misiniz?)
Loading...
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.

1 Yorum

  • Ben de hemen hemen 2012 den bu yana Bootstap kullanan freelancer tasarımcılardan biriyim. Bu tip makalelerin yeni başlayanlar adına eğitici ve teşvik edici olduğunu düşünüyorum. Destekleriniz için teşekkürler.

Yorum Yap