Source

Pasek nawigacyjny

Dokumentacja i przykłady potężnego, responsywnego nagłówka nawigacyjnego Bootstrap, paska nawigacyjnego. Obejmuje obsługę brandingu, nawigacji i nie tylko, w tym obsługę naszej wtyczki do zwijania.

Jak to działa

Oto, co musisz wiedzieć przed rozpoczęciem korzystania z paska nawigacyjnego:

Paski nawigacyjne wymagają opakowania .navbarw .navbar-expand{-sm|-md|-lg|-xl}celu responsywnego zwijania i klas schematów kolorów .
Domyślnie paski nawigacyjne i ich zawartość są płynne. Użyj opcjonalnych pojemników , aby ograniczyć ich szerokość w poziomie.
Skorzystaj z naszych klas użytkowych odstępów i elastyczności , aby kontrolować odstępy i wyrównanie w paskach nawigacyjnych.
Paski nawigacyjne są domyślnie responsywne, ale możesz je łatwo zmodyfikować, aby to zmienić. Zachowanie responsywne zależy od naszej wtyczki Collapse JavaScript.
Podczas drukowania paski nawigacyjne są domyślnie ukryte. Wymuś ich wydrukowanie, dodając .d-printdo .navbar. Zobacz klasę narzędzi do wyświetlania .
Zapewnij dostępność, używając <nav>elementu lub, jeśli używasz bardziej ogólnego elementu, takiego jak <div>, dodaj znak role="navigation"do każdego paska nawigacyjnego, aby wyraźnie określić go jako punkt orientacyjny dla użytkowników technologii wspomagających.

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

Przeczytaj przykład i listę obsługiwanych podkomponentów.

Obsługiwane treści

Paski nawigacyjne mają wbudowaną obsługę kilku podkomponentów. W razie potrzeby wybierz spośród następujących:

.navbar-branddla Twojej firmy, produktu lub nazwy projektu.
.navbar-navdla pełnej wysokości i lekkiej nawigacji (w tym obsługa list rozwijanych).
.navbar-togglerdo użytku z naszą wtyczką zwijania i innymi zachowaniami przełączania nawigacji .
.form-inlinedla dowolnych formantów formularzy i akcji.
.navbar-textdo dodawania ciągów tekstu wyśrodkowanych w pionie.
.collapse.navbar-collapsedo grupowania i ukrywania zawartości paska nawigacyjnego według nadrzędnego punktu przerwania.

Oto przykład wszystkich podkomponentów zawartych w responsywnym pasku nawigacyjnym o jasnej tematyce, który automatycznie zwija się w lg(dużym) punkcie przerwania.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

W tym przykładzie użyto klas użyteczności kolorów ( bg-light) i odstępów ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Marka

Można .navbar-brandzastosować do większości elementów, ale kotwica działa najlepiej, ponieważ niektóre elementy mogą wymagać klas użytkowych lub niestandardowych stylów.

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

Dodanie obrazów do .navbar-brandtestamentu prawdopodobnie zawsze wymaga niestandardowych stylów lub narzędzi do odpowiedniego rozmiaru. Oto kilka przykładów do zademonstrowania.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

Łącza nawigacyjne paska nawigacyjnego opierają się na naszych .navopcjach z własną klasą modyfikatorów i wymagają użycia klas przełączników w celu uzyskania odpowiedniej responsywnej stylizacji. Nawigacja w paskach nawigacyjnych również wzrośnie, aby zajmować jak najwięcej miejsca w poziomie, aby zapewnić bezpieczne wyrównanie zawartości paska nawigacyjnego.

Stany aktywne — z .active— oznacza, że bieżąca strona może być zastosowana bezpośrednio do .nav-links lub ich bezpośrednich nadrzędnych .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

A ponieważ używamy klas do naszej nawigacji, możesz całkowicie uniknąć podejścia opartego na listach, jeśli chcesz.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

Możesz także wykorzystać listy rozwijane w swoim pasku nawigacyjnym. Rozwijane menu wymagają do pozycjonowania elementu zawijania, więc upewnij się, że używasz oddzielnych i zagnieżdżonych elementów dla .nav-itemi .nav-linkjak pokazano poniżej.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Formularze

Umieść różne kontrolki formularzy i komponenty w pasku nawigacyjnym za pomocą .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Bezpośrednie elementy potomne w .navbarużyciu układu elastycznego i będą domyślnie justify-content: space-between. W razie potrzeby użyj dodatkowych narzędzi flex , aby dostosować to zachowanie.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Działają również grupy wejściowe:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

W ramach tych formularzy paska nawigacyjnego obsługiwane są również różne przyciski. Jest to również świetne przypomnienie, że narzędzia wyrównywania w pionie mogą być używane do wyrównywania elementów o różnych rozmiarach.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Tekst

Paski nawigacyjne mogą zawierać fragmenty tekstu za pomocą .navbar-text. Ta klasa dostosowuje wyrównanie w pionie i odstępy w poziomie dla ciągów tekstu.

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

W razie potrzeby wymieszaj i dopasuj do innych składników i narzędzi.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Schematy kolorów

Motywowanie paska nawigacyjnego nigdy nie było łatwiejsze dzięki połączeniu klas tematycznych i background-colornarzędzi. Wybierz opcję .navbar-lightdo użytku z jasnymi kolorami tła lub .navbar-darkciemnymi kolorami tła. Następnie dostosuj za pomocą .bg-*narzędzi.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Kontenery

Chociaż nie jest to wymagane, możesz zawinąć pasek nawigacyjny w i, .containeraby wyśrodkować go na stronie, lub dodać jeden w środku, aby wyśrodkować tylko zawartość stałego lub statycznego górnego paska nawigacyjnego .

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

Gdy kontener znajduje się na pasku nawigacyjnym, jego poziome wypełnienie jest usuwane w punktach przerwania niższych niż określona .navbar-expand{-sm|-md|-lg|-xl}klasa. Gwarantuje to, że nie podwajamy niepotrzebnego dopełniania w niższych oknach widokowych, gdy pasek nawigacyjny jest zwinięty.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Umieszczenie

Użyj naszych narzędzi pozycjonowania , aby umieścić paski nawigacyjne w pozycjach niestatycznych. Wybierz opcję przymocowana do góry, przymocowana do dołu lub przyklejona do góry (przewija się wraz ze stroną, aż dotrze do góry, a następnie tam pozostanie). Naprawione paski nawigacyjne używają position: fixed, co oznacza, że są pobierane z normalnego przepływu DOM i mogą wymagać niestandardowego CSS (np. padding-topw <body>), aby zapobiec nakładaniu się z innymi elementami.

Pamiętaj też, że .sticky-topużywa position: sticky, który nie jest w pełni obsługiwany w każdej przeglądarce .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

Zachowania responsywne

Paski nawigacyjne mogą wykorzystywać .navbar-toggler, .navbar-collapsei .navbar-expand{-sm|-md|-lg|-xl}klasy do zmiany, gdy ich zawartość jest zwijana za przyciskiem. W połączeniu z innymi narzędziami możesz łatwo wybrać, kiedy pokazać lub ukryć poszczególne elementy.

W przypadku pasków nawigacyjnych, które nigdy się nie zwijają, dodaj .navbar-expandklasę do paska nawigacyjnego. W przypadku pasków nawigacyjnych, które zawsze się zwijają, nie dodawaj żadnej .navbar-expandklasy.

Przełączanie

Przełączniki paska nawigacyjnego są domyślnie wyrównane do lewej, ale jeśli podążają za elementem rodzeństwa, takim jak .navbar-brand, zostaną automatycznie wyrównane do prawej strony. Odwrócenie znaczników odwróci położenie przełącznika. Poniżej znajdują się przykłady różnych stylów przełączania.

Bez .navbar-brandpokazanego w najniższym punkcie przerwania:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Z nazwą marki pokazaną po lewej stronie i przełącznikiem po prawej:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Z przełącznikiem po lewej i nazwą marki po prawej:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Treść zewnętrzna

Czasami chcesz użyć wtyczki zwijania, aby uruchomić ukrytą zawartość w innym miejscu na stronie. Ponieważ nasza wtyczka działa na dopasowywaniu idi data-targetdopasowywaniu, jest to łatwe!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Collapsed content</h5>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>