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:
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ą:
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:
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:
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:
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