Навбар

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

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

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

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

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

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

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

.navbar-brandбарои ширкат, маҳсулот ё номи лоиҳаи шумо.
.navbar-navбарои паймоиши пурра ва сабук (аз ҷумла дастгирии афтандаҳо).
.navbar-togglerбарои истифода бо плагини пошхӯрии мо ва дигар рафтори ивазкунии паймоиш .
.form-inlineбарои ҳама гуна назорат ва амалҳои шакл.
.navbar-textбарои илова кардани сатрҳои амудии марказонидашудаи матн.
.collapse.navbar-collapseбарои гурӯҳбандӣ ва пинҳон кардани мундариҷаи навбар аз ҷониби нуқтаи рахнашавии волидайн.

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

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

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

Ин мисол синфҳои утилитаҳои ранг ( bg-light) ва фосила ( my-2, my-lg-0, mr-sm-0, ) -ро истифода мебарад.my-sm-0

Бренд

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

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

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

Илова кардани тасвирҳо ба .navbar-brandэҳтимол ҳамеша услубҳо ё утилитаҳои фармоиширо барои андозаи дуруст талаб мекунанд. Инҳоянд чанд мисол барои нишон додан.

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

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

Нав

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

Ҳолатҳои фаъол — бо .active— барои нишон додани саҳифаи ҷорӣ метавонанд бевосита ба .nav-links ё волидайни бевоситаи онҳо татбиқ карда шаванд .nav-item.

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

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

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

Шумо инчунин метавонед афтандаҳоро дар навори худ истифода баред. Менюҳои афтанда барои ҷойгиркунӣ унсури печонидашударо талаб мекунанд, аз ин рӯ боварӣ ҳосил кунед, ки унсурҳои алоҳида ва лонаро барои .nav-itemва .nav-linkтавре ки дар зер нишон дода шудааст, истифода баред.

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

Шаклҳо

Идоракунӣ ва ҷузъҳои гуногуни формаро дар дохили навор бо .form-inline.

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

Унсурҳои кӯдаки фаврии .navbarистифода тарҳбандии чандир доранд ва пешфарз ба justify-content: space-between. Барои ислоҳ кардани ин рафтор, аз утилитаҳои иловагии фасеҳ истифода баред .

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

Гурӯҳҳои воридотӣ низ кор мекунанд:

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

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

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

Матн

Навбарҳо метавонанд битҳои матнро бо ёрии .navbar-text. Ин синф ҳамоҳангсозии амудӣ ва фосилаи уфуқӣ барои сатрҳои матнро танзим мекунад.

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

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

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

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

Ба шарофати омезиши дарсҳои мавзӯъсозӣ ва утилитаҳо мавзӯҳои навбарро ҳеҷ гоҳ осон набуд 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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

.navbar-expand{-sm|-md|-lg|-xl}Вақте ки контейнер дар дохили навори шумо ҷойгир аст, пӯшиши уфуқии он дар нуқтаҳои кандашавӣ аз синфи муайянкардаи шумо пасттар хориҷ карда мешавад . Ин кафолат медиҳад, ки мо ҳангоми фурӯпошии панели навоварии шумо ба таври нолозим пуркунӣ дар портҳои поёнтар дучанд намешавем.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <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">
  <a class="navbar-brand" href="#">Default</a>
</nav>

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

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

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

Ҳаракат

Ба .navbar-nav-scrollяк .navbar-collapse(ё дигар зеркомпоненти навбар) илова кунед, то ҳаракати амудиро дар дохили мундариҷаи ивазшавандаи наворҳои пошхӯрда фаъол созед. Бо нобаёнӣ, паймоиш дар 75vh(ё 75% баландии намоиш) оғоз мешавад, аммо шумо метавонед онро бо услубҳои дарунсохт ё фармоишӣ бекор кунед. Дар намоишгоҳҳои калонтар, вақте ки навор васеъ карда мешавад, мундариҷа тавре пайдо мешавад, ки дар наворҳои пешфарз пайдо мешавад.

Лутфан таваҷҷӯҳ намоед, ки ин рафтор бо нуқсони эҳтимолии overflow-ҳангоми танзим overflow-y: auto(барои ҳаракат кардани мундариҷа дар ин ҷо лозим аст) overflow-xмуодили auto, аст, ки баъзе мундариҷаи уфуқӣ бурида мешавад.

Дар ин ҷо мисоли навбар истифода мешавад , .navbar-nav-scrollки бо style="max-height: 100px;", бо баъзе утилитаҳои иловагии маржа барои фосилаи беҳтарин.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Рафторҳои ҷавобӣ

Навбарҳо метавонанд аз .navbar-toggler, .navbar-collapse, ва .navbar-expand{-sm|-md|-lg|-xl}синфҳо истифода баранд, то муайян кунанд, ки кай мундариҷаи онҳо дар паси тугма фурӯ меафтад. Дар якҷоягӣ бо утилитаҳои дигар, шумо метавонед ба осонӣ интихоб кунед, ки кай нишон додан ё пинҳон кардани унсурҳои мушаххасро интихоб кунед.

Барои наворҳое, ки ҳеҷ гоҳ вайрон намешаванд, .navbar-expandсинфро дар навор илова кунед. Барои наворҳое, ки ҳамеша хароб мешаванд, ягон .navbar-expandсинф илова накунед.

Тоглер

Гузаришҳои Навбар ба таври нобаёнӣ ба тарафи чап мувофиқ карда мешаванд, аммо агар онҳо ба як унсури бародар ба мисли a пайравӣ кунанд .navbar-brand, онҳо ба таври худкор ба тарафи рости дур мувофиқ карда мешаванд. Баргардонидани аломати шумо ҷойгиршавии гузаришро тағир медиҳад. Дар зер намунаҳои услубҳои гуногуни гузариш оварда шудаанд.

Дар .navbar-brandнуқтаи хурдтарин нуқта нишон дода нашудааст:

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

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

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

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

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

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

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

Мазмуни беруна

Баъзан шумо мехоҳед плагини пошхӯриро истифода баред, то як унсури контейнерро барои мундариҷае, ки сохторӣ берун аз .navbar. Азбаски плагини мо дар мувофиқ idва data-targetмувофиқ кор мекунад, ин ба осонӣ анҷом дода мешавад!

Мундариҷаи пӯшида

Тавассути бренди navbar ивазшаванда.

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

Вақте ки шумо ин корро мекунед, мо тавсия медиҳем, ки JavaScript-и иловагиро дохил кунед, то фокусро ба таври барномавӣ ба контейнер ҳангоми кушодани он интиқол диҳед. Дар акси ҳол, корбарони клавиатура ва корбарони технологияҳои ёрирасон дар ёфтани мундариҷаи нав ошкоршуда душворӣ мекашанд - алахусус агар контейнери кушодашуда пеш аз гузариш дар сохтори ҳуҷҷат ояд. Мо инчунин тавсия медиҳем, ки боварӣ ҳосил кунем, ки гузаранда дорои атрибутест aria-controls, ки ба idконтейнери мундариҷа ишора мекунад. Дар назария, ин ба корбарони технологияи ёрирасон имкон медиҳад, ки мустақиман аз гузариш ба контейнере, ки он идора мекунад, ҷаҳида шаванд - аммо дастгирии ин ҳоло хеле ночиз аст.