Bootstrap İle Tablo Şekillendirme

Bootstrap İle Tablo Şekillendirme

Bootstrap ile pek çok farklı şekilde tablo oluşturabiliriz. En basit haliyle bir tablo oluşturmak için table sınıfını eklememiz yeterlidir. Bu sayede tablonun satırlarına padding değeri verilir ve yatay çizgilerle birbirinden ayrılır.

Sayfa içerisinde nasıl kullanacağımız yukarıda anlatılmıştır. Oluşturulan tabloya table sınıfı eklenmiş ve bu sayede en basit haliyle bir tablo oluşturulmuştur. Örneğin ekran çıktısı aşağıdaki gibi olur.

bootstrap tablo

Tablo satırlarını çizgili hale getirebiliriz. Bu sayede satırlar zebra çizgili hale gelir ve görünürlükleri biraz daha artar. Bunun için table-striped sınıfını kullanıyoruz.

Örnekte sadece table-striped sınıfının kullanılmadığına dikkat etmelisiniz. Önce table sınıfı ardından şekillendirme için bir başka sınıf kullanılmıştır. Örneğin ekran çıktısı aşağıdaki gibi olur.

bootstrap tablo

border değeri alan ve hem tabloyu hem de tüm hücreleri sınırlandıran table-bordered sınıfı da bulunmakta. Bu tablo ile sütunları da dikey olarak birbirinden ayırmış oluyoruz.

Örneğin ekran çıktısı ise aşağıdaki gibi olur.

bootstrap tablo

Tablodaki satırların üzerine gelindiğinde onları farklı bir renkte göstermek isteyebiliriz. Bunun için hover sınıfını kullanıyoruz. Bu sınıf, basit düzeyde hazırladığımız tabloda kullanıcıya satırın daha belirgin halde gösterilmesini sağlar.

Bunun için tablo içerisindeki sınıf değerini aşağıdaki gibi değiştirmeniz yeterlidir.

Eğer tablo içerisindeki satırları birbirlerine daha yakın olarak göstermek istiyorsanız table-condensed sınıfını kullanmalısınız. Basit haldeki tabloda padding değeri 8px iken table-condensed sınıfı kullanıldığında bu değer 5px‘e düşmektedir. Örnek kullanım aşağıdaki gibi olur.

Satırları içeriklerine göre renklendirebiliriz. Bunun için kullanacağımız sınıflar:

  • active – satıra hover özelliği ekler.
  • success – olumlu bir durum için kullanılır.
  • info – bilgi vermek için kullanılır.
  • warning – uyarılarda bulunmak için kullanılır.
  • danger – olumsuz durumlar için kullanılır.

Burada dikkat etmemiz gereken konu ise bu sınıfları satırlara uygulamamız gerekir. Örneğin bir satırı bilgi vermek için kullanalım.

Son olarak responsive yapıda tablo oluşturmayı açıklayalım. table-responsive sınıfı ile 768px’den küçük ekran genişlik değerine sahip cihazlarda yatay olarak scroll özelliği eklenir. Daha geniş ekranlarda ise normal olarak gösterilmeye devam edilir. Örnek kullanım aşağıdaki gibi olur.

Örnekte tabloda kullanılan sınıfın table olduğuna ve bu tablonun table-responsive sınıf değerine sahip div etiketi içerisine yazıldığına dikkat etmelisiniz. Bootstrap ile hangi sınıfı kullanacağınıza tabloyu sayfanın hangi alanında ve hangi amaçla kullanacağınıza göre karar verebilirsiniz.

 

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: