Okruszki są elementem nawigacyjnym na stronie WWW. Dzięki nim możemy wyświetlić użytkownikowi ścieżkę, którą przeszedł oraz miejsce w którym się aktualnie znajduje. Okruszki pozwalają też łatwo cofnąć się użytkownikowi o kilka stron.
Okruszki z pomocą Bootstrapa możemy stworzyć na dwa sposoby. Pierwszym z nich jest użycie listy <ol> z klasą .breadcrumb. Każdy element listy <li> musi mieć klasę .breadcrumb-item. Dodatkowo aktywnemu okruszkowi, czyli temu, który wskazuje aktualną stronę nadajemy klasę .active
Przykład
Kod
1 2 3 4 5 6 7 8 9 10 11 12 | <ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol> |
Drugim sposobem jest stworzenie okruszków jako elementu <nav>. Tutaj podobnie jak wyżej, głównemu elementowi musimy nadać klasę .breadcrumb a poszczególne okruszki muszą mieć klasę .breadcrumb-item.
Przykład
Kod
1 2 3 4 5 6 | <nav class="breadcrumb"> <a class="breadcrumb-item" href="#">Home</a> <a class="breadcrumb-item" href="#">Library</a> <a class="breadcrumb-item" href="#">Data</a> <span class="breadcrumb-item active">Bootstrap</span> </nav> |
(16 głosów, średnia: 4,94 na 5)
Loading...
Jeden komentarz w “Okruszki / Breadcrumb”
Raf
Dobre, ale przydałoby się wskazać różnice! Które lepsze do jakiego zastosowania?