Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
Check
in English

Навбар

Ҳуҷҷатҳо ва мисолҳо барои сарлавҳаи навигатсионии пурқувват ва ҷавобгӯи Bootstrap, навбар. Дастгирии брендинг, паймоиш ва ғайраро дар бар мегирад, аз ҷумла дастгирии плагини шикастани мо.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Ин аст он чизе ки шумо бояд пеш аз оғози кор бо навор донед:

  • Навбарҳо барои синфҳои реаксияи рангҳо ва реаксияи реаксия печонидани онро .navbarталаб мекунанд ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Навбарҳо ва мундариҷаи онҳо ба таври нобаёнӣ моеъ мебошанд. Контейнерро иваз кунед , то паҳнои уфуқии онҳоро бо роҳҳои гуногун маҳдуд кунед.
  • Барои назорати фосила ва ҳамворкунӣ дар дохили наворҳо синфҳои фосилавӣ ва фасеҳро истифода баред .
  • Навбарҳо бо нобаёнӣ ҷавоб медиҳанд, аммо шумо метавонед онҳоро ба осонӣ тағир диҳед, то онро тағир диҳед. Рафтори ҷавобӣ аз плагини Colapse JavaScript-и мо вобаста аст.
  • Бо истифода аз як унсур дастрасиро таъмин кунед <nav>ё агар унсури умумӣтаре ба мисли , истифода шавад, ба ҳар як навор <div>илова кунед, role="navigation"то онро ба таври возеҳ ҳамчун минтақаи муҳим барои корбарони технологияҳои ёрирасон муайян кунед.
  • Ҷузъи ҷориро бо истифода aria-current="page"аз саҳифаи ҷорӣ ё aria-current="true"ҷузъи ҷорӣ дар маҷмӯа нишон диҳед.
  • Нав дар v5.2.0: Навбарҳоро бо тағирёбандаҳои CSS, ки ба .navbarсинфи асосӣ фаро гирифта шудаанд, мавзӯъ кардан мумкин аст. .navbar-lightбекор карда шудааст ва .navbar-darkба ҷои илова кардани сабкҳои иловагӣ барои иваз кардани тағирёбандаҳои CSS аз нав навишта шудааст.
Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Мазмуни дастгирӣ

Навбарҳо бо дастгирии дарунсохт барои як чанд зеркомпонентҳо меоянд. Ҳангоми зарурат аз инҳо интихоб кунед:

  • .navbar-brandбарои ширкат, маҳсулот ё номи лоиҳаи шумо.
  • .navbar-navбарои паймоиши пурра ва сабук (аз ҷумла дастгирии афтандаҳо).
  • .navbar-togglerбарои истифода бо плагини пошхӯрии мо ва дигар рафтори ивазкунии паймоиш .
  • Утилитҳои фасеҳ ва фосила барои ҳама гуна назорат ва амалҳои шакл.
  • .navbar-textбарои илова кардани сатрҳои амудии марказонидашудаи матн.
  • .collapse.navbar-collapseбарои гурӯҳбандӣ ва пинҳон кардани мундариҷаи навбар аз ҷониби нуқтаи рахнашавии волидайн.
  • Иловаи ихтиёрӣ .navbar-scrollбарои гузоштани a 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атрибутро дар фаъол илова кунед .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. Барои ислоҳ кардани ин рафтор, аз утилитаҳои иловагии фасеҳ истифода баред .

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: Мавзӯи Навбар ҳоло аз ҷониби тағирёбандаҳои 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синф илова накунед.

Тоглер

Гузаришҳои Навбар ба таври нобаёнӣ ба тарафи чап мувофиқ карда мешаванд, аммо агар онҳо ба як унсури бародар ба мисли a пайравӣ кунанд .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>

Барои эҷод кардани навори offcanvas, ки ба навбари муқаррарӣ дар нуқтаи қатъии мушаххас васеъ мешавад, ба монанди 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 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, навбарҳо ҳоло тағирёбандаҳои маҳаллии 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;

Давраи Сасс

Синфҳои тавсеа/барҳамдиҳии навбарои ҷавобгӯ (масалан, .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;
          }
        }
      }
    }
  }
}