Listy / List group

1 213 0

Listy są nieodzownymi elementami każdej strony internetowej. Używamy ich do wypisywania specyfikacji, do wyświetlenia kolejnych wpisów na blogu, do tworzenia menu w panelach bocznych lub mobilnych menu. Skoro jakiś element jest używany bardzo często to nie mogło by być inaczej i twórcy Bootstrapa musieli przygotować jakieś gotowe rozwiązania.

Podstawowy przykład

Zaczniemy od podstawowego przykładu listy, którą tworzymy za pomocą znacznika <ul>...</ul> i umieszczonych w nim znaczników <li>...</li>

Gdy nie będą one w żaden sposób ostylowane to przeglądarka wyświetli nam listę w której każdy punkt będzie zaczynał się od „kropki”, ale przecież chcemy coś lepszego:)

Aby dodać Bootstrapowe stylowanie liście musimy zacząć od dodania klasy .list-group elementowi <ul>. Ta klasa będzie się powtarzać we wszystkich następnych przykładach. Następnym zadaniem będzie dodanie klasy .list-group-item każdemu elementowi <li>. Otrzymamy tym sposobem listę elementów w czymś na wzór tabelki.

Przykład

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

Kod

Aktywny element

Jeśli nasza lista służy nam jako nawigacja to dobrze by było aby na wybranej stronie, wybrany element listy, był wyróżniony abyśmy wiedzieli na jakiej podstronie obecnie jesteśmy. Dodatkowo klasa ta może nam służyć jako „nagłówek” listy. Aby wyróżnić element listy, znacznikowi <li> prócz klasy .list-group-item dodajemy klasę .active.

Przykład

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

Kod

Nieaktywny element

No to teraz w drugą stronę. Gdy zajdzie potrzeba by wyłączyć jakiś element listy znacznikowi <li> prócz klasy .list-group-item dodajemy klasę .disabled.

Element z tą klasą będzie delikatnie wyszarzony co sugeruje użytkownikowi, że jest nieaktywny.

Przykład

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

Kod

Linki i przyciski

We wcześniejszych przykładach zbudowaliśmy listy, które służyły tylko wyświetlaniu treści. Teraz przejdziemy do stworzenia list, które są linkami lub mogą wywoływać jakieś akcje. Elementy <a> służą do nawigacji czy to wewnątrz strony ( przewijanie do wybranej sekcji ) czy pomiędzy stronami. Natomiast element <button> powinien być używany do wywoływania różnych akcji, przykładowo przewinięcie zdjęcia w karuzeli, uruchomienie modala czy przełączenie zakładki w akordeonie.

Składnia HTML listy zawierającej linki lub przyciski jest trochę inna. Element <ul> zamieniamy na <div> ale zostajemy przy klasie .list-group. Natomiast elementy <li> zamieniamy na <a> lub <button> w zależności od potrzeb. Tu również pozostaje klasa .list-group-item ale dodatkowo musimy dołączyć klasę .list-group-item-action. Możemy również skorzystać z przedstawionej wcześniej klasy .active oraz dodać parametr disabled.

Kod

Przykład

Kod

Lista bez ramek

W poprzednich przykładach lista posiada wokół siebie ramkę. Nie zawsze taki wygląd będzie przez nas pożądany bo na przykład wstawiamy listę do karty albo po prostu ładniej wygląda taka bez ramki. Aby uzyskać taki efekt, do klasy .list-group dopisujemy klasę .list-group-flush. Działa to zarówno dla klasycznych list jak i tych zbudowanych z linków.

Przykład

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

Kod

Kod

Lista z kolorami

W wielu przykładach przewijają się klasy kontekstowe Bootstrapa, które pozwalają nam na „pokolorowanie” elementów zdefiniowanymi kolorami. Nazwy kolorów występujących w tych klasach powinny być Wam już znajome. Natomiast cała klasa wygląda następująco .list-group-item-* gdzie zamiast * wstawiamy odpowiedni kontekst. Poniżej lista klas:)

  • .list-group-item-primary
  • .list-group-item-secondary
  • .list-group-item-success
  • .list-group-item-danger
  • .list-group-item-warning
  • .list-group-item-info
  • .list-group-item-light
  • .list-group-item-dark

Jak się pewnie domyślacie, kolory kontekstowe możemy dodawać zarówno liście zbudowanej na elementach <li> jak i na linkach czy przyciskach. W drugim przypadku musimy pamiętać o dodaniu takie klasy .list-group-item-action

Przykład

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

Kod

Kod

Lista z odznakami

Nasza lista może być wzbogacona o odznaki w których przykładowo możemy wyświetlać ilość postów z danej kategorii lub ilość produktów. Do zbudowania takiej listy musimy posiłkować się klasami Flexboxa, które oferuje Bootstrap. Ale nasz przykład nie wymaga ich wielu, więc opiszę je także tutaj.

Zaczynamy oczywiście od utworzenia listy z klasą .list-group oraz dodaniem jej elementów z klasą .list-group-item. Następnie musimy dodać trzy kolejne klasy:

  • .d-flex – klasa włącza wyświetlanie jako flex ( display: flex; )
  • .justify-content-between – klasa włącza rozsunięcie się zawartości do przeciwległych końców ( justify-content: space-between; )
  • .align-items-center – klasa włącza wyśrodkowanie elementów w pionie ( align-items: center; )

Wewnątrz elementu listy, prócz jej zawartości dodajemy także element <span> z klasami .badge .badge-primary .badge-pill odpowiedzialny za wyświetlenie odznaki.

Przykład

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

Kod

Lista z rozbudowaną treścią

Dotychczas pokazane listy składały się tylko z jednego elementu. W tym przykładzie rozbudujemy je trochę bardziej. Dzięki umieszczeniu większej ilości treści możemy stworzyć na przykład listę wpisów z „zajawkami” na naszym blogu. Tutaj również będziemy musieli wspomóc się klasami flexboxa, które dostarcza nam Bootstrap. Postaram się jak najdokładniej opisać co będzie się działo w poniższym przykładzie.

Jak zwykle zaczynamy od diva z klasą .list-group wewnątrz którego umieszczamy link z klasami .list-group-item .list-group-item-action. Do tego momentu nie różni się to niczym od standardowej listy. Teraz odrobina flexboxa. Do w/w klas dopisujemy:

  • .flex-column – klasa włącza wyświetlanie poszczególnych elementów „od góry do dołu” czyli tworząc kolumnę ( flex-direction: column; )
  • .align-items-start – klasa włącza wyświetlanie kolejnych elementów od góry wrappera w którym się znajdują ( align-items: flex-start; )

Teraz wewnątrz naszego linka tworzymy diva z klasami:

  • .d-flex – klasa włącza wyświetlanie jako flex ( display: flex; )
  • .w-100 – klasa powoduje, że każdy element listy ma zajmować całą szerokość wrappera czyli każdy kolejne element będzie poniżej ( width: 100%; )
  • .justify-content-between – klasa powoduje wyświetlanie kolejnych elementów wewnątrz naszego diva tak by między nimi był największy możliwy odstęp ( justify-content: space-between; )

Wewnątrz stworzonego diva umieścimy sobie nagłówek oraz mały dopisek. Użyta przed chwilą klasa .justify-content-between spowodowała, że są one od siebie oddalone i przylegają do przeciwległych „ścianek” diva.

Kolejny etap to umieszczenie wewnątrz linka ale już poza w/w divem paragrafu z tekstem.

Następnie zamykamy linka, powtarzamy go tyle razy ile potrzebujemy i na koniec zamykamy diva z klasą .list-group

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (2 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*