Panel nawigacyjny Bootstrap 5
- Poprzednia strona BS5 Navigacja
- Następna strona BS5 Carousel
Nawigacja
Nawigacja to nagłówek nawigacyjny umieszczony na górze strony:
Podstawowa nawigacja
Dzięki użyciu Bootstrap, nawigacja może się rozszerzać lub złożyć, w zależności od rozmiaru ekranu.
Użyj .navbar Klasa tworzy standardową nawigację, a następnie klasę responsywnego złożenia:.navbar-expand-xxl|xl|lg|md|sm（w dużych, extra dużych, dużych, średnich urządzeniach poziomo, lub na małych ekranach pionowo upakowanych nawigacji）。
Aby dodać linki do nawigacji, użyj class="navbar-nav" z <ul> elementem (lub <div>）。 Następnie dodaj element z .nav-item Klasa <li> element, po którym następuje element z .nav-link Klasa <a> Element:
Przykład
<!-- Szara pozioma nawigacja zmienia się na pionową na małych ekranach -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- Linki -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
Pionową nawigację
Usuń .navbar-expand-* Klasa tworzy zawsze pionową nawigację:
Przykład
<!-- Szara pionowa nawigacja --> <nav class="navbar bg-light"> ... </nav>
Wyśrodkowaną nawigację
Dodaj .justify-content-center Klasa może wyśrodkować nawigację:
Przykład
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
Kolorowego paska nawigacyjnego
Użyj dowolnego .bg-color Klasa zmienia kolor tła nawigacji:
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Wskazówka:Użyj .navbar-dark Klasa dodaje biały kolor tekstu do wszystkich linków w nawigacji, lub użyj .navbar-light Dodaj czarny kolor tekstu.
Przykład
<!-- Szary tło, biały tekst -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
活动
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Aktywny</a>
</li>
</ul>
</div>
</nav>
<a class="nav-link disabled" href="#">Wyłączony</a>
<!-- Tło czarne, tekst biały -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Tło niebieskie, tekst biały -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Stan aktywny/ wyłączony: .active klasę do <a> element może wyróżniać bieżący link, lub dodać .disabled klasy do wskazania, że link jest nieaktywny.
Marka / Logo
.navbar-brand klasy do wyróżnienia nazwy marki/page/elementu:
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
Jeśli użyjesz .navbar-brand Kiedy klasa jest używana razem z obrazem, Bootstrap 5 automatycznie ustawia styl obrazu, aby dostosować się do nawigacji w kierunku pionowym.
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
Tekst nawigacji
Użyj .navbar-text Klasa wyrównuje wertykalnie wszystkie elementy nie będące linkami w nawigacji (upewnij się o poprawnych wewnętrznych marginesach i kolorze tekstu).
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Tekst nawigacji</span>
</div>
</nav>
Często, zwłaszcza na małych ekranach, chcesz ukryć linki nawigacyjne i zastąpić je przyciskiem, który po kliknięciu pokazuje je.
Aby utworzyć rozwijaną nawigację, użyj ustawionych już class="navbar-toggler"、data-bs-toggle="collapse" i data-bs-target="#thetarget" zawartość nawigacji (linki itp.) w class="collapse navbar-collapse" w elemencie <div>, po którym następuje przycisk data-bs-target pasujące id："thetarget"。
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Wskazówka:Możesz również usunąć .navbar-expand-md Klasa ukrywa linki nawigacji i wyświetla przycisk przełączania.
Pasek nawigacji z menu rozwijanym
Pasek nawigacji może zawierać menu rozwijane:
Przykład
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Menu rozwijane</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Inny link</a></li>
<li><a class="dropdown-item" href="#">Trzeci link</a></li>
</ul>
</li>
Menu i przyciski paska nawigacji
Możesz również dodać formularz do paska nawigacji:
Przykład
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Szukaj">
<button class="btn btn-primary" type="button">Szukaj</button>
</form>
</div>
</div>
</nav>
Stała nawigacja
Nawigacja może być również utrzymywana w stałej pozycji na górze lub dole strony.
Stała nawigacja pozostaje widoczna w niezależnej pozycji (górnej lub dolnej) strony.
.fixed-top Klasa utrzymuje nawigację w stałej pozycji na stronie:Górna część:
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
Użyj klasy .fixed-bottom, aby utrzymać nawigację na dole strony:
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
Użyj .sticky-top Klasa pozostawia nawigację w stałej pozycji na stronie, gdy jest przewijana:Górna część.
Uwaga:Tego typu w wersjach IE11 i wcześniejszych nie działa (traktowane jako position:relative)
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
- Poprzednia strona BS5 Navigacja
- Następna strona BS5 Carousel
