BOOTSTRAP 4 – LIST GROUP (BOOTSTRAP LİSTELER)

Bootstrap list group class’larını kullanarak çok kısa sürede sade ve şık listeler oluşturabiliriz. Css kodu yazarak da istediğimiz listeleri oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim.

  • Normal Html’de olduğu gibi <ul> ve <li> etiketleri ile listemizi oluşturuyoruz.
  • <ul> etiketinin class’ına list-group yazıyoruz.
  • <li> etiketlerinin class’ına list-group-item yazıyoruz.

Şimdi en basit haliyle bir bootstrap list group oluşturalım.

Html kodları

Görünümü

bootstrap-list-group

 ⇒  <li> etiketlerinden istediğimiz birini aktif yani seçili hale getirmek için class’ına active yazıyoruz. Örneğin listenin ilk elemanının class’ına active yazalım.

Html kodları

Görünümü

bootstrap-list-item

 ⇒  Liste elemanlarını bir link şeklinde oluşturmak istiyorsanız:

  • <ul> etiketi yerine <div> etiketini,
  • <li> etiketi yerine de <a> etiketini kullanmalısınız.
  • <a> etiketinin class’ına list-group-item-action yazarsak, linklerin rengi gri olur. Yazmazsak varsayılan olarak linklerin rengi mavi olacaktır.

Listenin ilk elemanına list-group-item-action class’ını yazmayacağım. Diğer iki elemana ise yazacağım. Böylece aradaki farkı daha iyi görebiliriz.

Html kodları

Görünümü

bootstrap-listeleme

 ⇒  Listenin border yani kenarlıklarını kaldırmak isterseniz <ul> etiketinin class’ına list-group-flush yazabilirsiniz.

Html kodları

Görünümü

bootstrap-liste-1

 ⇒  Bootstrap list group elemanlarının arkaplan renklerini değiştirebiliyoruz. Bunun için <li> etiketlerinin class’ına şu renk class’larını yazabiliriz.

  • list-group-item-success
  • list-group-item-info
  • list-group-item-warning
  • list-group-item-danger
  • list-group-item-primary
  • list-group-item-secondary
  • list-group-item-light
  • list-group-item-dark

Örnek üzerinde görelim. 

Html kodları

Görünümü

bootstrap-kullanimi

 ⇒  Bootstrap list group elemanlarını Bootstrap badge’lerle birlikte kullanabiliyoruz. 

Html kodları

Görünümü

bootstrap-liste-ornekleri

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

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

Yorum Yazın