Bootstrap ile...

Bootstrap ile Liste Grupları

12705
0
PAYLAŞ

Basit Liste Grubu

Temel liste gruplarından basit bir liste örneği:

liste1

Basit liste grubu .list-group class‘ı ile <ul> elementini; .list-group-item class’ı ile <li> elementini kullanarak oluşturulur.

Örnek:

Kendin Dene >>

İşaretli Liste Grubu

Liste gruplarınıza işaretler de ekleyebilirsiniz. Otomatik olarak sağa yaslanacaklar.

liste2

Oluşturduğunuz liste grubunuza .badge class’ı ile <span> elementini kullanarak işaret ekleyebilirsiniz.

Örnek:

Kendin Dene >>

Bağlantılı Liste Grupları

Liste gruplarınıza bağlantı ekleyebilirsiniz. Bağlantılı liste öğesinin üzerine gelindiğinde arkaplan koyulaşacaktır.

liste3

Bağlantılı liste grubu oluşturmak için biraz daha farklı bir yol gerekiyor. <ul> yerine <div> ; <li> yerine <a> elementleri kullanılmalıdır.

Örnek:

Kendin Dene >>

Aktif Alan

liste4

Örnek:

.active class’ını kullanarak, geçerli öğenizi vurgulayabilirsiniz.

Kendin Dene >>

Engelli Öge

Aşağıdaki listede engelli öge bulunmaktadır.

liste512

Bir ögeyi devre dışı bırakmak / engellemek için .disabled class’ını kullanmalıyız.

Örnek:

Kendin Dene >>

Bağlamsal Sınıflar

Bağlamsal sınıflar, renkli liste ögeleri için kullanılabilir.

liste66

Liste ögelerini renklendirebilmek için kullanabileceğiniz class’lar(sınıflar): .list-group-item-success , .list-group-item-info , list-group-item-warning , list-group-item-danger :

Örnek:

Kendin Dene >>

BİR YORUM YAP