Altın Konu BOOTSTRAP 4 – TABLES (TABLOLAR)

[Fauda]

Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!

BOOTSTRAP 4 – TABLES (TABLOLAR)​

Bootstrap 4 ile tablolarımıza stil vermek artık çok kolay. Yapmamız gereken tek şey, öncelikle tablomuzu Html ile yazmak. Daha sonra ise nasıl bir tasarım istiyorsak ona uygun bootstrap table class’larını kullanmak. Bu bootstrap table class’larının neler olduğuna geçmeden önce, sadece Html kullanarak şu şekilde bir tablo oluşturalım.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>joh n@ex ample.c om</td> </tr> <tr> <td>M ary</td> <td>Moe</td> <td>ma ry ple. com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>jul y @ex ample .c om</td> </tr> </tbody> </table>

Tablomuzu oluşturduğumuza göre şimdi bootstrap table class’larını tek tek inceleyelim.

⇒ Bir tabloya diğer class’ları eklemeden önce, en temel gerekli stilleri vermek için <table> etiketinin class’ına table yazıyoruz. Bunu yazdığımızda tablomuza padding değeri vermiş ve yatay çizgileri eklemiş oluruz.

1 2 3 4 5

<table class="table"> /* İçerik */ </table>

Tablomuzun görünümü;
⇒ Tabloya padding değeri verip yatay çizgileri ekledik. Tablonun satırlarının farklı renklerde olması için yani zebra görünümü elde etmek için, <table> etiketinin class’ına table-striped yazıyoruz.

1 2 3 4 5

<table class="table table-striped"> /* İçerik */ </table>

Tablomuzun görünümü;
⇒ Tabloya kenarlık vermek için, <table> etiketinin class’ına table-bordered yazıyoruz.

1 2 3 4 5

<table class="table table-striped table-bordered"> /* İçerik */ </table>

Tablomuzun görünümü;
Not : Tablonun tüm kenarlıklarını kaldırmak için, <table> etiketinin class’ına table-borderless yazıyoruz.
⇒ Tabloda hangi satırın üzerinde olduğumuzu belirgin hale getirmek için hover efektini kullanabiliriz. Bunun için, <table> etiketinin class’ına table-hover yazıyoruz.

1 2 3 4 5

<table class="table table-striped table-bordered table-hover"> /* İçerik */ </table>

Tablomuzun görünümü;

⇒ Tablonun padding değerini azaltarak daha küçük bir tablo elde edebiliriz. Bunun için, <table> etiketinin class’ına table-sm yazıyoruz.

1 2 3 4 5

<table class="table table-striped table-bordered table-sm"> /* İçerik */ </table>

Tablomuzun görünümü;
⇒ Bootstrap 4’te tablolar ile kullanabileceğimiz bazı renk class’ları vardır. Bu class’ları <table>, <tr> veya <td> etiketlerine vererek ister tablonun ister satırın istersek de kolonun arkaplan rengini değiştirebiliriz. Bu renk class’ları şunlardır:

• table-active
• table-primary
• table-secondary
• table-success
• table-danger
• table-warning
• table-info
• table-light
• table-dark

Örneğin siyah renkli arkaplana sahip bir tablo elde etmek için, <table> etiketinin class’ına table-dark yazıyoruz.

1 2 3 4 5

<table class="table table-striped table-bordered table-dark"> /* İçerik */ </table>

Tablomuzun görünümü;
Bu örnekte tablonun tamamının arkaplan rengini değiştirdik. Şimdi de her satıra farklı bir renk class’ı vererek, satırların arkaplan rengini değiştirelim.
⇒ Tablonun başlıklarının bulunduğu satır yani <thead> etiketinin class’ına thead-dark yazarsak siyah bir arkaplan rengi ekler. Eğer <thead> etiketinin class’ına thead-light yazarsak gri bir arkaplan rengi ekler.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<table class="table table-bordered"> <thead class="thead-dark"> </thead> <tbody> </tbody> </table> <table class="table table-bordered"> <thead class="thead-light"> </thead> <tbody> </tbody> </table>

Tablolarımızın görünümü;

BOOTSTRAP 4 İLE RESPONSİVE TABLO NASIL YAPILIR?​

⇒ Responsive bir tablo elde etmek için yapmamız gerekenler:

• Tabloyu içine alacak şekilde bir div oluşturmak.
• Oluşturduğumuz bu div’in class’ına table-responsive yazmak.

Böylece tablo ekrana sığmayacak boyutta olduğunda scroll oluşacak.

1 2 3 4 5 6 7

<div class="table-responsive"> <table class="table"> /* İçerik */ </table> </div>

Tablomuzun görünümü;


Umarım sizin için faydalı bir yazı olmuştur.

 

[Replicant]

Paylaşım için teşekkürler

 

[Fauda]

Rıca ederim

 

[EsatOfficial]

Paylaşım için teşekkürler

 

[Fauda]

Rıca ederim