Pasek nawigacyjny Bootstrap 4
Paski nawigacyjne
Pasek nawigacyjny to nagłówek nawigacyjny umieszczony u góry strony:
Podstawowy pasek nawigacyjny
Dzięki Bootstrap pasek nawigacyjny może się wysuwać lub zwijać w zależności od rozmiaru ekranu.
Z .navbar
klasą tworzony jest standardowy pasek nawigacyjny, po którym następuje responsywna klasa zwijania: .navbar-expand-xl|lg|md|sm
(umieszcza pionowy pasek nawigacyjny na bardzo dużych, dużych, średnich lub małych ekranach).
Aby dodać linki wewnątrz paska nawigacyjnego, użyj <ul>elementu z class="navbar-nav". Następnie dodaj <li>elementy z .nav-itemklasą, po których następuje <a>element z .nav-linkklasą:
Przykład
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<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>
</nav>
Pionowy pasek nawigacyjny
Usuń .navbar-expand-xl|lg|md|smklasę, aby utworzyć pionowy pasek nawigacyjny:
Przykład
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<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>
</nav>
Wyśrodkowany pasek nawigacyjny
Dodaj .justify-content-centerklasę, aby wyśrodkować pasek nawigacyjny.
Poniższy przykład wyśrodkuje pasek nawigacyjny na średnich, dużych i bardzo dużych ekranach. Na małych ekranach będzie wyświetlany w pionie i wyrównany do lewej (ze względu na klasę .navbar-expand-sm):
Przykład
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Kolorowy pasek nawigacyjny
Użyj dowolnej z .bg-colorklas, aby zmienić kolor tła paska nawigacyjnego ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darki .bg-light)
Porada: Dodaj biały kolor tekstu do wszystkich linków na pasku nawigacyjnym z .navbar-darkklasą lub użyj .navbar-lightklasy, aby dodać
czarny kolor tekstu.
Przykład
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</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>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Stan aktywny/wyłączony : dodaj .activeklasę do
<a>elementu, aby podświetlić bieżący link, lub .disabledklasę, aby wskazać, że nie można kliknąć linku.
Logo marki
Klasa .navbar-brandsłuży do wyróżnienia marki/logo/nazwy projektu Twojej strony:
Przykład
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Podczas używania .navbar-brandklasy na obrazach Bootstrap 4 automatycznie dopasuje obraz do pionowego paska nawigacyjnego.
Przykład
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Zwijanie paska nawigacyjnego
Bardzo często, zwłaszcza na małych ekranach, chcesz ukryć linki nawigacyjne i zastąpić je przyciskiem, który powinien je odsłaniać po kliknięciu.
Aby utworzyć zwijany pasek nawigacyjny, użyj przycisku z . Następnie zawiń zawartość paska nawigacyjnego (łącza itp.) wewnątrz elementu div z , po którym następuje identyfikator, który pasuje do przycisku: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Przykład
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<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>
</nav>
Porada: Możesz także usunąć klasę .navbar-expand-md, aby ZAWSZE ukrywać linki paska nawigacyjnego i wyświetlać przycisk przełączania.
Pasek nawigacyjny z rozwijanym
Paski nawigacyjne mogą również zawierać menu rozwijane:
Przykład
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<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>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Formularze i przyciski paska nawigacyjnego
Dodaj <form>element za pomocą, class="form-inline"aby pogrupować wejścia i przyciski obok siebie:
Przykład
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Możesz także użyć innych klas wejściowych, takich jak .input-group-prependlub , .input-group-appendaby dołączyć ikonę lub tekst pomocy obok pola wejściowego. Więcej o tych klasach dowiesz się w rozdziale Bootstrap Inputs.
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Tekst paska nawigacyjnego
Użyj .navbar-textklasy, aby wyrównać w pionie wszystkie elementy wewnątrz paska nawigacyjnego, które nie są łączami (zapewnia prawidłowe wypełnienie i kolor tekstu).
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<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>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Naprawiono pasek nawigacyjny
Pasek nawigacyjny można również zamocować na górze lub na dole strony.
Stały pasek nawigacyjny pozostaje widoczny w stałej pozycji (na górze lub na dole) niezależnie od przewijania strony.
Klasa .fixed-topsprawia, że pasek nawigacyjny jest zamocowany na górze :
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Użyj .fixed-bottomklasy, aby pasek nawigacyjny pozostał na dole strony:
Przykład
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>