Listy / List group

autor: Robert

23 marca 2014

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.

Podstawowy przykład:

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

Tworzymy listę z klasą .list-group a każdy element listy musi posiadać klasę .list-group-item.

Lista z odznakami:

• 14 Cras justo odio
• 2 Dapibus ac facilisis in
• 1 Morbi leo risus

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.

Lista z linkami:

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.

Listy z kolorowaniem Bootstrapa:

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

Listy z większą ilością zawartości:

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

Strona z przykładami

---

Post się przydał? Oceń go proszę.

(4 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Element Media
Nowszy post →
Panele / Panels

Robert 11 września 2014 o 16:56

a.list-group-item:hover, a.list-group-item:focus {
color: #555; /*zmienia kolor fonta po najechaniu*/
text-decoration: none;
background-color: #f5f5f5; /*zmienia kolor tła po najechaniu */

:)

Odpowiedz