#46. Listy

Tworzenie grupy list

Na naszych stronach internetowych przydać się może posegregowana grupa list tych samych danych. Naturalnym w dzisiejszym świecie jest czytelne przedstawienie naszych danych. Przykładowo, mamy sklep z częściami motoryzacyjnymi. Grupę list możemy wykorzystać do oddzielenia marek samochodów.

W naszym frameworku Bootstrapa wyżej wymieniony element na stronie utworzymy dodając pomocnicze klasy do nieuporządkowanej listy oraz elementów li.

Przeanalizuj poniższy przykład. Popróbuj na swoich przykładach stworzyć nową listę grup:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

romantic-stallman-937bs

romantic-stallman-937bs danielminschinski

Odznaki listy

Framework Bootstrap oferuje także rozbudowane grupy list pod względem funkcjonalności. Do każdego elementu listy możesz dodać, np. odznaki.

Taka funkcjonalność sprawdza się, gdy prowadzisz sklep. Przy każdym produkcie możesz mieć podaną liczbę, która będzie oznaczała aktualny stan magazynowy dostępnego towaru.

Aby umieścić taką odznakę w naszej liście należy, że w elemencie przed napisem stworzysz element span z pomocniczą klasą Bootstrapa. 

Zmodyfikujmy więc nasz ostatni przykład. Dodałem w nim przy częściach samochodowych ilość magazynową:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

hungry-lumiere-6nwyd

hungry-lumiere-6nwyd danielminschinski

Kolorowanie listy

Aby wyróżnić dane w swojej grupie, należy wykorzystać do tego Bootstrapa. Wystarczy dodać pomocnicze klasy do elementów listy, aby zyskały one odpowiedni kolor czcionki oraz tła. Do dyspozycji mamy popularne kolory, które możemy wykorzystać na naszej liście, używając do tego klasy pomocnicze: list-group-item-danger – czerwony, list-group-item-info – niebieski, list-group-item-warning – pomarańczowy oraz list-group-item-success – zielony.

Posłużymy się naszym ostatnim przykładem. Wyróżnijmy produkt który się kończy na magazynie. Możemy wykorzystać do tego klasę list-group-item-danger, aby wyróżnić część kolorem czerwonym. W podobny sposób możemy oznaczyć inne części. Przykładowo, kolorem zielonym możemy oznaczyć część, której mamy najwięcej, klasą list-group-item-info. Spójrz na przykład:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

youthful-cartwright-vmdtl

youthful-cartwright-vmdtl danielminschinski

Linkowana grupa list

Listy można wykorzystać jako funkcjonalne menu. Korzystamy wtedy z elementu div oraz odnośników a. Oczywiście, aby wszystko funkcjonowało, należy wykorzystać pomocnicze klasy frameworka.

Tak jak przy tworzeniu grupy list z wykorzystaniem nieuporządkowanej listy będziemy używać klasy list-group dla elementu głównego oraz klasy list-group-item dla poszczególnych odnośników.

Bootstrap umożliwia wyróżnienie aktywnego linku poprzez dodanie dodatkowej klasy pomocniczej. Przeanalizuj nasz przykład z zastosowaniem linkowanej grupy list: 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

nifty-merkle-5pkp9

nifty-merkle-5pkp9 danielminschinski

Opis grupy list

W powyższym materiale umieściłem instrukcję jak robić grupy list z wykorzystaniem elementu div oraz odnośników. Teraz przedstawie jak dodać opis do każdego odnośnika.

Przykładowo, chcielibyśmy dodać cenę do każdej części samochodowej na naszej liście. Wystarczy, że wewnątrz odnośnika dodamy nagłówek czwartego stopnia oraz paragraf. Te elementy muszą mieć pomocnicze klasy, aby grupa list wyglądała estetycznie. 

Przeanalizuj przykład w którym zastosowałem powyższe rozwiązanie:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

infallible-night-g4fp7

infallible-night-g4fp7 danielminschinski

Myślę, że o najważniejszych rozwiązaniach odnośnie grupy list wspomniałem w powyższym materiale. Taki sposób na przedstawienie danych wydaję się być ciekawym rozwiązaniem.

W kolejnym materiale opowiem o panelach Bootstrapa. W kolejną środę wbijajcie na blog.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!