Zgodnie z dokumentacją dotyczącą menu Navbar z biblioteki Bootstrap 4, w celu stworzenia menu należy zdefiniować listę
| A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class followed by a <a> element with a .nav-link class... Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light) Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color. |
| Źródło: https://www.w3schools.com/bootstrap4 |
Wybrałeś dokładnie taki kod, jaki zaleca oficjalna dokumentacja Bootstrapa 4. Użycie <ul class="navbar-nav"> … </ul> jest podstawą do tworzenia nawigacji w tym frameworku. Cała magia polega na tym, że Bootstrap styluje właśnie elementy listy nieuporządkowanej (ul) z klasą "navbar-nav". To pozwala prawidłowo wyświetlić menu poziomo, z zachowaniem responsywności i spójności z resztą interfejsu. Wewnątrz każdej listy dodaje się <li class="nav-item">, a w nich <a class="nav-link"> z linkami – wtedy całość zachowuje się zgodnie z założeniami Bootstrapa. W praktyce widać to na prawie każdej stronie korzystającej z tego frameworka – niezależnie czy robisz prostą wizytówkę, czy rozbudowaną aplikację webową. Takie podejście zapewnia nie tylko poprawne style, ale też dobre wsparcie dla dostępności (a11y), bo listy są dla czytników ekranu czytelniejsze niż np. <div>. Moim zdaniem, trzymanie się tej struktury jest kluczowe, jeśli chcesz, żeby twoje menu działało dobrze na różnych przeglądarkach i urządzeniach. Z moich doświadczeń wynika, że próby modyfikowania tej struktury kończą się często problemami ze stylami, a nawet łamaniem responsywności. Lepiej nie kombinować i stosować to, co już sprawdzone – oszczędza to mnóstwo nerwów przy późniejszym rozwijaniu projektu.
Wiele osób zaczynających przygodę z Bootstrappem myli się, jeśli chodzi o strukturę nawigacji. Często wynika to z przyzwyczajeń z HTML-a, gdzie listy uporządkowane (ol) czy inne niestandardowe klasy wydają się równie dobre. Jednak Bootstrap opiera swoje style i działanie navbarów właśnie na nieuporządkowanej liście (<ul>) z klasą "navbar-nav". Jeśli zastosujesz <ol> zamiast <ul>, nawet z poprawną klasą, efekty mogą być nieprzewidywalne – style nie będą się nakładały, elementy mogą być nieprawidłowo ustawione, a całość przestanie być responsywna. Podobnie wpisanie do atrybutu class kilku klas naraz, które nie istnieją razem w dokumentacji (np. "a, .nav-item"), nie wywoła żadnego efektu – przeglądarka po prostu je zignoruje lub potraktuje jako pojedynczą dziwną klasę, co oczywiście nie jest intencją Bootstrapa. Z mojego doświadczenia wynika, że najczęstszym błędem jest próba uproszczenia lub skrócenia kodu z pominięciem standardów frameworka – to prowadzi do chaosu w kodzie i problemów przy dalszym rozwoju. Warto pamiętać, że Bootstrap 4 jest bardzo rygorystyczny, jeśli chodzi o mapowanie selektorów CSS na konkretne struktury HTML. To dlatego lista <ul> z klasą "navbar-nav" jest wymagana – bez niej navbar po prostu nie zadziała poprawnie. Zbyt wiele razy widziałem strony, gdzie menu było rozjechane, bo ktoś próbował użyć <ol>, <div> albo nieprawidłowych klas. Dla zachowania kompatybilności i ułatwienia sobie życia, zdecydowanie polecam trzymać się zalecanej przez dokumentację struktury. Nawet jeśli wygląda to na powtarzalność, to w rzeczywistości pozwala zaoszczędzić sporo czasu i uniknąć problemów podczas testowania na różnych urządzeniach czy przeglądarkach.