Bootstrap tutorial logo

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ę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (3 głosów, średnia: 5,00 na 5)
Loading...

Tomasz 11 września 2014 o 16:32

Pytanko : Czy i jak można zmienić podświetlenie linków? ;)
Kurs petarda ! :D

Odpowiedz
    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