Listy / List group - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu list group zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

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


<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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


<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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


<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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.

Przykład

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

Kod


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action" disabled>Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
</div>

Przykład

Kod


<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">Cras justo odio</button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action">Vestibulum at eros</button>
</div>

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


<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Przykład

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

Kod


<div class="list-group list-group-flush">
  <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action" disabled>Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
</div>

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


<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

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


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

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


<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">brak</span>
  </li>
</ul>

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

Przykład

Tytuł pierwszego wpisu

3 dni temu

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Kategoria / Autor wpisu

Tytuł drugiego wpisu

4 dni temu

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Kategoria / Autor wpisu

Tytuł trzeciego wpisu

5 dni temu

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Kategoria / Autor wpisu

Kod


<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Tytuł pierwszego wpisu</h5>
      <small>3 dni temu</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Kategoria / Autor wpisu</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Tytuł drugiego wpisu</h5>
      <small class="text-muted">4 dni temu</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Kategoria / Autor wpisu</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Tytuł trzeciego wpisu</h5>
      <small class="text-muted">5 dni temu</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Kategoria / Autor wpisu</small>
  </a>
</div>