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.

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.

Tablomuzun görünümü;

bootstrap-table-kullanimi

 ⇒  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.

Tablomuzun görünümü;

bootstrap-table-striped-kullanimi ⇒  Tabloya kenarlık vermek için, <table> etiketinin class’ına table-bordered yazıyoruz.

Tablomuzun görünümü;

bootstrap-table-bordered-kullanimi

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.

Tablomuzun görünümü;

bootstrap-table-hover-kullanimi

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

Tablomuzun görünümü;

bootstrap-table-sm-kullanimi

 ⇒  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. 

Tablomuzun görünümü;

bootstrap-table-dark-kullanimi

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.

bootstrap-table-color-kullanimi

 ⇒  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.

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

bootstrap-thead-dark-light-kullanimi

Bootstrap 4 ile Responsive Tablo Nasıl Yapılır?

 ⇒  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.

Tablomuzun görünümü;

bootstrap-table-responsive-kullanimi

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

Farklı bir yazımda görüşmek üzere.

Leave a Reply