autor: Robert
Zawsze na naszej stronie korzystamy z jakiś list, czy są to listy wpisów na blogu, oferta naszej firmy, lista użytkowników portalu, lista opcji itp itd.
Bootstrap posiada kilka gotowych styli dla list, które możemy zastosować wg swego uznania do stworzenia różnych list.
Tworzymy listę z klasą .list-group
a każdy element listy musi posiadać klasę .list-group-item
.
Taka lista może wyświetlać przykładowo ilość wiadomości czy powiadomień w waszych serwisach. Tworzymy je identycznie jak powyżej, wewnątrz tekstu wstawiając kod odznaki.
Kolejne przykład list nie opierają się już na znacznikach ul, li
a będą już zwykłymi divami z różną zawartością. W tym przykładzie aby otrzymać listę z linkami tworzymy div z klasą list-group
a elementy wewnątrz czyli kotwiczki mają mieć klasę .list-group-item
. Jeśli chcemy wyróżnić jakiś link, dodajemy mu klasę .active
.
Kilkanaście razy pisałem już o klasach które dają nam kolorowanie przycisków, paneli itp. Dla list są to klasy:
.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Jak widać powyżej, lista może zawierać więcej tekstu i dodatkowo w różnych rozmiarach. Aby to osiągnąć standardowo tworzymy div z klasą .list-group
, wewnątrz tworzymy kotwiczkę z klasą .list-group-item
, jako tekst kotwiczki tworzymy nagłówek h4
z klasą list-group-item-heading
oraz paragraf z klasą .list-group-item-text