Bootstrap 4 - elementy nawigacji - breadcrumbs, pagination, akordeon

Bootstrap 4 - elementy nawigacji - breadcrumbs, pagination, akordeon

Omówię tu często używane elementy nawigacji, które mogą znaleźć się na stronie internetowej, jak tzw. okruszki, paginacja i akordeon, oferowane przez bootstrap 4.

Breadcrumbs czyli okruszki

Breadcrumbs czyli okruszki pokazują tzw. ścieżkę powrotu czyli wskazują oglądającemu, w którym miejscu drzewa strony się znajduje. Element ten jest przydatny i ułatwia nawigację po stronie.

Bootstrap 4 pozwala na tworzenie okruszków przy pomocy znacznika listy <ul> jak i innych znaczników np. <nav>. Elementy rodzica muszą mieć klasę .breadcrumb. W odróżnieniu od starszej wersji Bootstrap 4 wymaga dodania klasy .breadcrumb-item do każdego elementu potomnego okruszków.

Paginacja

O ile zwyczajowo okruszki znajdują się nad treścią, to paginacja zwyczajowo znajduje się pod treścią i pozwala na przechodzenie do kolejnych lub poprzednich podstron.

Paginację tworzy się dodając do listy <ul> klasy  .pagination . W bootstrap 4 konieczne jest także dodanie klasy .page-item do każdego elementu <li> i klasy .page-link do każdego elementu <a> .

 

Element rozwijalny  (collapse) zakładki lub akordeon

Dla zaoszczędzenia miejsca na stronie stosuje  się pola ukryte, które można rozwinąć po kliknięciu na link lub przycisk. Typowym rozwiązaniem tego typu jest tzw. akordeon, gdzie po kliknięciu na link lub przycisk (ustawione w pionie) ukazuje się dodatkowa treść zaś strona przesuwa się niżej.

Rozwiązanie to jest najczęściej używane na stronach FAQ, gdzie jest dużo pytań i krótkich odpowiedzi do nich. Stosowanie przycisków lub akordeonu znacznie skraca stronę. Ponadto oglądający nie musi czytać wszystkiego i rozwija sobie tylko tą treść która go interesuje.

Podobnym rozwiązaniem są zakładki czyli tabs. Wyglądają jak zakładki w kartotece, czyli ich nagłówki ułożone są w poziomej linii. Po kliknięciu na nagłówek, zawartość zakładki wyświetlała się na całą szerokość strony.

Akordeon i zakładki to w zasadzie to samo. Różnią się tylko tym, że zakładki układają się w poziomie, zaś akordeon w pionie. Bootstrap 3 oferował tu osobne rozwiązania. Zaś bootstrap 4 pozwala tworzyć zarówno zakłądki jak i akordeon przy pomocy klasy collapse.

Link lub przycisk otwierający ukrytą treść musi zawierać: data-toggle="collapse".  Nie ma znaczenia czy jest to link czy button.

Ukryta treść musi mieć klasę: collapse

Jeśli chcemy aby jeden z elementów ukrytych, był otwarty/odkryty w momencie załadowania strony, należy dodać do tego elementu klasę .show (w Bootstrap 3 była to klasa .in – czyli mamy tu zmianę).

Zakładki

Kiedyś na stronach www zakładki były tak sformatowane, że wyglądały jak prawdziwe zakładki w katrotece – miały zaokrąglone rogi u góry. Kolor nagłówka zmieniał się tak aby był taki sam jak tło pod treścią. Sprawiało to wrażenie jakby naprawdę kliknięta zakładka została wysunięta na wierzch. To oczywiście złudzenie.

Teraz już odchodzi się od takiego wyglądu zakładek. Ich nagłówki mogą być linkami lub buttonami. Dodanie klasy np.
btn btn-primary spowoduje, że zarówno link jak i button będą wyglądały tak samo, jak button.

Utarło się, że pierwsza z zakładek musi być widoczna. Ale nie jest to konieczne.

Aby stworzyć zakładki wystarczy umieścić buttony lub linki w poziomie.

Bootstrap 4 pozwala na pokazanie więcej niż jedną zakładkę na raz. Zakładki układają się wtedy w kolumnach.

Akordeon

Różni się tym od zakładek, że ich klikalne nagłówki są ustawione w pionie. Najlepszym sposobem na stworzenie akordeona jest wykorzystanie kart (cards).  Czyli tworzymy karty a zawartość każdej karty składa się z pary elementów akordeona czyli nagłówka z data-toggle="collapse"  oraz ukrytej treści z klasą collapse.

Można również stworzyć akordeon bez użycia kart.  Nie będziemy mieli wtedy ładnego formatowania jakie oferują karty.

Do elementu rodzica dodajemy atrybut data-children=".item" gdzie “item” to będzie klasa poszczególnych elementów (dzieci) akordeona. W każdym elemencie “item” znajdzie się klikalny nagłówek i rozwijalna treść j.w.

 

template monster


Profesjonalny Hosting


One Comment
  1. dzięki za kawał rzetelnej wiedzy, szczerze mówiąć dopiero nie dawno usłyszałem o bootstrapie, jestem w szoku ze tyle wspaniałych rzeczy można dzięki niemu zrobić

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.