in English

Навбар

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

Дар ин саҳифа

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

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

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

Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

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

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

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

Дар ин ҷо як мисоли ҳамаи зерқисмҳои дар як навори мавзӯи рӯшноӣ мавҷудбуда, ки ба таври худкор дар нуқтаи шикастани lg(калон) фурӯ меафтад.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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">
        <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) ва фосила ( my-2, my-lg-0, me-sm-0, ) -ро истифода мебарад.my-sm-0

Бренд

Он .navbar-brandметавонад ба аксари элементҳо татбиқ карда шавад, аммо лангар беҳтар кор мекунад, зеро баъзе унсурҳо метавонанд синфҳои утилита ё услубҳои фармоиширо талаб кунанд.

Матн

Матни худро дар дохили як элемент бо .navbar-brandсинф илова кунед.

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

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

Тасвир

Шумо метавонед матни дохили онро .navbar-brandбо <img>.

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

Тасвир ва матн

Шумо инчунин метавонед якчанд утилитаҳои иловагиро барои илова кардани тасвир ва матн дар як вақт истифода баред. Ба иловаи .d-inline-blockва .align-text-topдар <img>.

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

Нав

Истинодҳои навигатсионии Navbar дар асоси .navимконоти мо бо синфи тағирдиҳандаи худ сохта мешаванд ва истифодаи синфҳои гузаришро барои ороиши дурусти мувофиқ талаб мекунанд. Навигатсия дар наворҳо инчунин афзоиш хоҳад ёфт, то ки фазои уфуқӣ то ҳадди имкон ишғол шавад , то мундариҷаи навбарии шумо ба таври бехатар мувофиқат кунад.

Барои нишон додани саҳифаи ҷорӣ .activeсинфро илова кунед..nav-link

Лутфан қайд кунед, ки шумо инчунин бояд aria-currentатрибутро дар фаъол илова кунед .nav-link.

<nav class="navbar navbar-expand-lg navbar-light 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>

Ва азбаски мо дарсҳоро барои навгониҳои худ истифода мебарем, шумо метавонед аз равиши рӯйхат комилан канорагирӣ кунед, агар хоҳед.

<nav class="navbar navbar-expand-lg navbar-light 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тавре ки дар зер нишон дода шудааст, истифода баред.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <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>

Шаклҳо

Дар дохили навор идоракунӣ ва ҷузъҳои гуногуни формаро ҷойгир кунед:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <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. Барои ислоҳ кардани ин рафтор, аз утилитаҳои иловагии фасеҳ истифода баред .

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <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-ро захира кунед.

<nav class="navbar navbar-light 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>

Тугмаҳои гуногун ҳамчун як қисми ин шаклҳои навбар низ дастгирӣ карда мешаванд. Ин инчунин як ёдраскунандаи олӣ аст, ки утилитаҳои ҳамоҳангсозии амудиро барои мувофиқ кардани унсурҳои андозаашон гуногун истифода бурдан мумкин аст.

<nav class="navbar navbar-light 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. Ин синф ҳамоҳангсозии амудӣ ва фосилаи уфуқӣ барои сатрҳои матнро танзим мекунад.

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

Агар лозим бошад, бо дигар ҷузъҳо ва утилитаҳо омехта кунед ва мувофиқ кунед.

<nav class="navbar navbar-expand-lg navbar-light 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>

Схемаи рангҳо

Ба шарофати омезиши дарсҳои мавзӯъсозӣ ва утилитаҳо мавзӯҳои навбарро ҳеҷ гоҳ осон набуд background-color. .navbar-lightБарои истифода бо рангҳои пасзаминаи сабук ё .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Контейнерҳо

Гарчанде ки ин талаб карда намешавад, шумо метавонед навбарро дар як пӯшед, .containerто онро дар як саҳифа ба марказ гузоред – гарчанде ки дар хотир доред, ки контейнери дохилӣ ҳанӯз лозим аст. Ё шумо метавонед як контейнерро дар дохили он илова кунед, .navbarто мундариҷаи навбари болоии собит ё статикиро ба марказ гузоред .

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

Барои тағир додани то чӣ андоза васеъ будани мундариҷа дар лавҳаи шумо аз ҳама гуна контейнерҳои ҷавобгӯ истифода баред.

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

Ҷойгиркунӣ

Утилитҳои мавқеъи моро барои ҷойгир кардани навбарҳо дар мавқеъҳои ғайристатикӣ истифода баред. Аз собит то боло, собит ба поён ё часпида ба боло интихоб кунед (бо саҳифа то ба боло ҳаракат мекунад, сипас дар он ҷо мемонад). Навбарҳои собит -ро истифода мебаранд position: fixed, ки маънои онро дорад, ки онҳо аз ҷараёни муқаррарии DOM кашида шудаанд ва метавонанд CSS-и фармоиширо талаб кунанд (масалан, padding-topдар <body>).

Инчунин қайд кунед, ки .sticky-topистифода мебарад position: sticky, ки дар ҳама браузерҳо пурра дастгирӣ намешавад .

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

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

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

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</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;", бо баъзе утилитаҳои иловагии маржа барои фосилаи беҳтарин.

<nav class="navbar navbar-expand-lg navbar-light 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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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">
        <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нуқтаи хурдтарин нуқта нишон дода нашудааст:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

Бо номи бренд дар тарафи чап ва гузариш дар тарафи рост:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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>

Бо гузариш дар чап ва номи бренд дар тарафи рост:

<nav class="navbar navbar-expand-lg navbar-light 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">
        <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мувофиқ кор мекунад, ин ба осонӣ анҷом дода мешавад!

Collapsed content

Toggleable via the navbar brand.

<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-*синфро комилан тарк кунед.

<nav class="navbar navbar-light 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 text-reset" 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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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">
          <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-light 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>

Сасс

Тағйирёбандаҳо

$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-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-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-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: $navbar-nav-link-padding-x;
            padding-left: $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-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

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