Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Навігацыйная панэль

Дакументацыя і прыклады для магутнага, адаптыўнага навігацыйнага загалоўка Bootstrap, панэлі навігацыі. Уключае падтрымку брэндынгу, навігацыі і іншага, у тым ліку падтрымку нашага плагіна для згортвання.

На гэтай старонцы

Як гэта працуе

Вось што вам трэба ведаць, перш чым пачаць працу з панэллю навігацыі:

  • Панэлі навігацыі патрабуюць абгорткі .navbarдля адаптыўнага згортвання .navbar-expand{-sm|-md|-lg|-xl|-xxl}і класаў каляровай схемы .
  • Панэлі навігацыі і іх змесціва плыўныя па змаўчанні. Змяняйце кантэйнер , каб абмежаваць іх гарызантальную шырыню рознымі спосабамі.
  • Выкарыстоўвайце нашы ўтыліты spacing і flex для кіравання інтэрвалам і выраўноўваннем у панэлях навігацыі.
  • Панэлі навігацыі спагадныя па змаўчанні, але вы можаце лёгка змяніць іх, каб змяніць гэта. Адказныя паводзіны залежаць ад нашага плагіна Collapse JavaScript.
  • Забяспечце даступнасць з дапамогай <nav>элемента або, калі выкарыстоўваецца больш агульны элемент, напрыклад <div>, дадайце role="navigation"да кожнай навігацыйнай панэлі, каб яўна вызначыць яе як арыенцір для карыстальнікаў дапаможных тэхналогій.
  • Пазначце бягучы элемент, выкарыстоўваючы aria-current="page"для бягучай старонкі або aria-current="true"для бягучага элемента ў наборы.
  • Новае ў v5.2.0: панэлі навігацыі могуць быць тэматычныя зменнымі CSS, якія ахопліваюць .navbarбазавы клас. .navbar-lightбыў састарэлы і .navbar-darkбыў перапісаны, каб перавызначыць зменныя CSS замест дадання дадатковых стыляў.
Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Падтрымоўваны кантэнт

Navbars пастаўляецца з убудаванай падтрымкай некалькіх падкампанентаў. Пры неабходнасці выбірайце з наступнага:

  • .navbar-brandдля вашай кампаніі, прадукту або назвы праекта.
  • .navbar-navдля паўнавартаснай і лёгкай навігацыі (уключаючы падтрымку выпадаючых спісаў).
  • .navbar-togglerдля выкарыстання з нашым убудовай для згортвання і іншымі спосабамі пераключэння навігацыі .
  • Утыліты Flex і інтэрвалаў для любых элементаў кіравання формамі і дзеянняў.
  • .navbar-textдля дадання вертыкальна адцэнтраваных радкоў тэксту.
  • .collapse.navbar-collapseдля групоўкі і хавання змесціва панэлі навігацыі па бацькоўскай кропцы супыну.
  • Дадайце опцыю .navbar-scrollдля ўстаноўкі max-heightі пракруткі пашыранага змесціва панэлі навігацыі .

Вось прыклад усіх падкампанентаў, уключаных у адаптыўную светлавую навігацыйную панэль, якая аўтаматычна згортваецца ў lg(вялікай) кропцы перапынку.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

У гэтым прыкладзе выкарыстоўваюцца класы ўтыліт фону ( bg-light) і інтэрвалу ( me-auto, mb-2, mb-lg-0, ).me-2

Марка

.navbar-brandМожна прымяніць да большасці элементаў, але якар працуе лепш за ўсё, бо для некаторых элементаў могуць спатрэбіцца службовыя класы або ўласныя стылі .

Тэкст

Дадайце тэкст у элемент з .navbar-brandкласам.

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

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

Малюнак

Вы можаце замяніць тэкст .navbar-brandу <img>.

html 
<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Малюнак і тэкст

Вы таксама можаце выкарыстоўваць некаторыя дадатковыя ўтыліты, каб дадаць малюнак і тэкст адначасова. Звярніце ўвагу на даданне .d-inline-blockі .align-text-topна <img>.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Спасылкі навігацыі Navbar абапіраюцца на нашы .navпараметры з іх уласным класам-мадыфікатарам і патрабуюць выкарыстання класаў -пераключальнікаў для правільнага адаптыўнага стылю. Навігацыя ў панэлі навігацыі таксама будзе пашырацца, каб займаць як мага больш гарызантальнай прасторы, каб змесціва панэлі навігацыі было надзейна выраўнавана.

Дадайце .activeклас, .nav-linkкаб паказаць бягучую старонку.

Калі ласка, звярніце ўвагу, што вы таксама павінны дадаць aria-currentатрыбут у active .nav-link.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

І паколькі мы выкарыстоўваем класы для нашых навігацый, вы можаце цалкам пазбегнуць падыходу на аснове спісаў, калі хочаце.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Вы таксама можаце выкарыстоўваць выпадальныя спісы на панэлі навігацыі. Для размяшчэння выпадаючых меню патрабуецца элемент абгорткі, таму абавязкова выкарыстоўвайце асобныя і ўкладзеныя элементы для .nav-itemі .nav-link, як паказана ніжэй.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Формы

Размясціце розныя элементы кіравання формамі і кампаненты ў панэлі навігацыі:

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Непасрэдныя даччыныя элементы .navbarвыкарыстоўваюць гнуткі макет і па змаўчанні будуць justify-content: space-between. Пры неабходнасці выкарыстоўвайце дадатковыя ўтыліты flex , каб наладзіць гэтыя паводзіны.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Групы ўводу таксама працуюць. Калі ваша навігацыйная панэль уяўляе сабой цэлую форму або ў асноўным форму, вы можаце выкарыстоўваць <form>элемент у якасці кантэйнера і захаваць трохі HTML.

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

Розныя кнопкі таксама падтрымліваюцца як частка гэтых формаў панэлі навігацыі. Гэта таксама выдатны напамін аб тым, што ўтыліты вертыкальнага выраўноўвання можна выкарыстоўваць для выраўноўвання элементаў рознага памеру.

html 
<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Тэкст

Панэлі навігацыі могуць утрымліваць фрагменты тэксту з дапамогай .navbar-text. Гэты клас рэгулюе вертыкальнае выраўноўванне і гарызантальны інтэрвал для радкоў тэксту.

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

Пры неабходнасці змешвайце і спалучайце з іншымі кампанентамі і ўтылітамі.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

Каляровыя схемы

Новае ў v5.2.0: тэма Navbar цяпер працуе на аснове зменных CSS і .navbar-lightсастарэла. Зменныя CSS прымяняюцца да .navbar, па змаўчанні да "лёгкага" выгляду, і могуць быць перавызначаны з дапамогай .navbar-dark.

Тэмы Navbar прасцей, чым калі-небудзь, дзякуючы камбінацыі зменных Sass і CSS у Bootstrap. Па змаўчанні наша «светлая панэль навігацыі» для выкарыстання са светлымі колерамі фону, але вы таксама можаце падаць заяўку .navbar-darkна цёмныя колеры фону. Затым наладзьце з дапамогай .bg-*утыліт.

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

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

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

Кантэйнеры

Нягледзячы на ​​тое, што гэта не абавязкова, вы можаце абгарнуць панэль навігацыі ў , .containerкаб размясціць яе па цэнтры старонкі, але звярніце ўвагу, што ўнутраны кантэйнер усё яшчэ патрабуецца. Ці вы можаце дадаць кантэйнер унутры, .navbarкаб толькі цэнтраваць змесціва фіксаванай або статычнай верхняй панэлі навігацыі .

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

Выкарыстоўвайце любы адаптыўны кантэйнер, каб змяніць шырыню прадстаўлення кантэнту на панэлі навігацыі.

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

Размяшчэнне

Выкарыстоўвайце нашы ўтыліты размяшчэння, каб размясціць панэлі навігацыі ў нестатычных пазіцыях. Выбірайце адзін з варыянтаў: фіксаваны ўверсе, фіксаваны ўнізе, прылеплены да верху (пракручваецца разам са старонкай, пакуль не дасягне верху, затым застаецца там) або прыліпае да нізу (пракручваецца разам са старонкай, пакуль не дасягне нізу, потым застаецца там).

Фіксаваныя панэлі навігацыі выкарыстоўваюць position: fixed, што азначае, што яны выцягнуты са звычайнай плыні DOM і могуць патрабаваць карыстацкага CSS (напрыклад, padding-topна <body>), каб прадухіліць накладанне з іншымі элементамі.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Пракрутка

Дадайце .navbar-nav-scrollў .navbar-nav(ці іншы падкампанент навігацыйнай панэлі), каб уключыць вертыкальную пракрутку змесціва згорнутай навігацыйнай панэлі, якое можна пераключаць. Па змаўчанні пракрутка пачынаецца на 75vh(або 75% вышыні акна прагляду), але вы можаце перавызначыць гэта з дапамогай лакальнай карыстальніцкай уласцівасці CSS --bs-navbar-heightабо карыстацкіх стыляў. У вялікіх акнах прагляду, калі навігацыйная панэль разгорнута, змесціва будзе адлюстроўвацца так, як на стандартнай навігацыйнай панэлі.

Калі ласка, звярніце ўвагу, што такія паводзіны звязаны з патэнцыйным недахопам overflow— калі налада overflow-y: auto(неабходна пракручваць змесціва тут) overflow-xз'яўляецца эквівалентам auto, што абразае некаторы гарызантальнае змесціва.

Вось прыклад навігацыйнай панэлі з выкарыстаннем .navbar-nav-scrollз style="--bs-scroll-height: 100px;"некаторымі дадатковымі ўтылітамі поля для аптымальнага інтэрвалу.

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Спагадныя паводзіны

Панэлі навігацыі могуць выкарыстоўваць класы .navbar-toggler, .navbar-collapse, і .navbar-expand{-sm|-md|-lg|-xl|-xxl}, каб вызначыць, калі іх змест згортваецца за кнопкай. У спалучэнні з іншымі ўтылітамі вы можаце лёгка выбраць, калі паказваць або хаваць пэўныя элементы.

Для панэлі навігацыі, якія ніколі не згортваюцца, дадайце .navbar-expandклас на панэль навігацыі. Для панэлі навігацыі, якія заўсёды згортваюцца, не дадавайце .navbar-expandклас.

Пераключальнік

Па змаўчанні пераключальнікі Navbar выраўнаваны па левым краі, але калі яны ідуць за роднасным элементам, такім як .navbar-brand, яны будуць аўтаматычна выраўнаваны па правым краі. Змена вашай разметкі зменіць размяшчэнне пераключальніка. Ніжэй прыведзены прыклады розных стыляў пераключэння.

Без .navbar-brandпаказу ў найменшай кропцы перапынку:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

З назвай брэнда, паказанай злева, і пераключальнікам справа:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

З пераключальнікам злева і назвай брэнда справа:

html 
<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Знешні кантэнт

Часам вы хочаце выкарыстаць плагін згортвання, каб запусціць элемент кантэйнера для кантэнту, які структурна знаходзіцца па-за межамі .navbar. Паколькі наш убудова працуе на idі data-bs-targetсупастаўленне, гэта лёгка зрабіць!

html 
<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Калі вы зробіце гэта, мы рэкамендуем уключыць дадатковы JavaScript для праграмнага перамяшчэння фокуса на кантэйнер пры яго адкрыцці. У адваротным выпадку карыстальнікам клавіятуры і дапаможным тэхналогіям, хутчэй за ўсё, будзе цяжка знайсці новы адкрыты кантэнт - асабліва калі кантэйнер, які быў адкрыты, знаходзіцца перад пераключальнікам у структуры дакумента. Мы таксама рэкамендуем пераканацца, што пераключальнік мае aria-controlsатрыбут, які паказвае на idкантэйнер змесціва. Тэарэтычна, гэта дазваляе карыстальнікам дапаможных тэхналогій пераходзіць непасрэдна ад пераключальніка да кантэйнера, якім ён кіруе, але падтрымка гэтага ў цяперашні час даволі неадназначная.

Пазаканвас

Пераўтварыце панэль навігацыі, якая пашыраецца і згортваецца, у скрыню offcanvas з дапамогай кампанента offcanvas . Мы пашыраем стандартныя стылі offcanvas і выкарыстоўваем нашы .navbar-expand-*класы для стварэння дынамічнай і гнуткай бакавой панэлі навігацыі.

У прыкладзе ніжэй, каб стварыць панэль навігацыі па-за палатном, якая заўсёды згортваецца ва ўсіх кропках перапынку, .navbar-expand-*цалкам прапусціце клас.

html 
<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Каб стварыць пазаканвасную навігацыйную панэль, якая разгортваецца ў звычайную навігацыйную панэль у пэўнай кропцы перапынку, напрыклад lg, выкарыстоўвайце .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Пры выкарыстанні offcanvas у цёмнай панэлі навігацыі майце на ўвазе, што вам можа спатрэбіцца цёмны фон змесціва offcanvas, каб тэкст не стаў нечытэльным. У прыведзеным ніжэй прыкладзе мы дадаем .navbar-darkі .bg-darkда .navbar, .text-bg-darkда .offcanvas, .dropdown-menu-darkда .dropdown-menuі .btn-close-whiteда .btn-closeдля правільнага стылю з цёмным палотнам.

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Пераменныя

Дададзена ў v5.2.0

Як частка падыходу Bootstrap, які развіваецца да зменных CSS, панэлі навігацыі цяпер выкарыстоўваюць лакальныя зменныя CSS .navbarдля палепшанай налады ў рэжыме рэальнага часу. Значэнні для зменных CSS задаюцца праз Sass, таму налада Sass па-ранейшаму падтрымліваецца.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Некаторыя дадатковыя зменныя CSS таксама прысутнічаюць на .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Наладжванне з дапамогай зменных CSS можна ўбачыць у .navbar-darkкласе, дзе мы перавызначаем пэўныя значэнні без дадання дублікатаў селектараў CSS.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Зменныя Sass

Зменныя для ўсіх панэлі навігацыі:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Зменныя для цёмнай панэлі навігацыі :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Пятля Sass

Адаптыўныя класы разгортвання/згортвання панэлі навігацыі (напрыклад, .navbar-expand-lg) аб'ядноўваюцца з $breakpointsкартай і ствараюцца праз цыкл у scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}