Navbar

Bootstrap-ийн хүчирхэг, хариу үйлдэл үзүүлэх навигацийн толгой хэсэг болох navbar-д зориулсан баримт бичиг, жишээнүүд. Брэнд, навигаци, задлах залгаас гэх мэт дэмжлэгийг багтаасан болно.

Хэрхэн ажилладаг

Navbar-г ашиглаж эхлэхээсээ өмнө та дараах зүйлсийг мэдэх хэрэгтэй:

Навбарууд нь мэдрэгчтэй уналт .navbarболон .navbar-expand{-sm|-md|-lg|-xl}өнгөний схемийн ангиудад боодолтой байхыг шаарддаг.
Navbars болон тэдгээрийн агуулга нь анхдагч байдлаар шингэн байдаг. Хэвтээ өргөнийг хязгаарлахын тулд нэмэлт савыг ашигла .
Navbar доторх зай болон зэрэгцүүлэлтийг хянахын тулд манай зай , уян хатан хэрэгслийн ангиллыг ашиглана уу.
Navbars нь анхдагч байдлаар хариу үйлдэл үзүүлдэг боловч та үүнийг өөрчлөхийн тулд тэдгээрийг хялбархан өөрчилж болно. Хариуцлагатай байх нь бидний Collapse JavaScript залгаасаас хамаарна.
Хэвлэх үед Navbars анхдагчаар далдлагдсан байдаг. .d-print-д нэмэх замаар тэдгээрийг хэвлэхийг албадах .navbar. Дэлгэцийн хэрэгслийн ангиллыг харна уу .
Элемент ашиглан хүртээмжтэй байдлыг баталгаажуулах <nav>, эсвэл жишээлбэл, илүү ерөнхий элемент ашиглаж байгаа бол туслах технологи хэрэглэгчдэд зориулсан тэмдэглэгээний бүс гэж тодорхой тодорхойлохын тулд навигацийн талбар бүрт <div>a-г нэмнэ үү.role="navigation"

Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Дэмжигдсэн контент

Навбарууд нь цөөн хэдэн дэд бүрэлдэхүүн хэсгүүдийн суурилуулсан дэмжлэгтэй ирдэг. Шаардлагатай бол дараахь зүйлсээс сонгоно уу.

.navbar-brandтанай компани, бүтээгдэхүүн эсвэл төслийн нэр.
.navbar-navбүрэн өндөр, хөнгөн навигацийн хувьд (унадаг цэсийг дэмждэг).
.navbar-togglerманай задрах залгаас болон бусад навигацыг асаах үйлдэлтэй ашиглахад зориулагдсан .
.form-inlineаливаа хэлбэрийн хяналт, үйлдлүүдийн хувьд.
.navbar-textбосоо төвтэй текстийн мөрүүдийг нэмэхэд зориулагдсан.
.collapse.navbar-collapsenavbar контентыг эцэг эхийн таслах цэгээр бүлэглэх, нуух зориулалттай.

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тохируулагч анги бүхий бидний сонголтууд дээр тулгуурладаг бөгөөд зохих хариу үйлдэл үзүүлэхийн тулд шилжүүлэгч ангиудыг ашиглахыг шаарддаг. Navbar дээрх навигаци нь таны навигацийн контентыг найдвартай зэрэгцүүлэхийн тулд аль болох их хэвтээ зай эзэлнэ.

Идэвхтэй төлөвүүд--тэй - одоогийн хуудсыг s эсвэл тэдгээрийн шууд эх s-д .activeшууд хэрэглэж болно ..nav-link.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>

Мөн бид navs-д зориулж анги ашигладаг тул та хүсвэл жагсаалтад суурилсан аргаас бүрэн зайлсхийх боломжтой.

<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>

Маягтууд

Төрөл бүрийн маягтын удирдлага болон бүрэлдэхүүн хэсгүүдийг navbar дотор байрлуул .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>

Текст

Navbars-ийн тусламжтайгаар текстийн хэсэг агуулж болно .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 дээр сэдэв оруулах нь хэзээ ч амар байгаагүй . .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>

Контейнер

Хэдийгээр энэ нь шаардлагагүй ч та хуудасны голд оруулахын тулд navbar-г a-д ороож болно .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 дотор байх үед түүний хэвтээ дэвсгэр нь таны заасан .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>

Байршил

Navbar-г статик бус байрлалд байрлуулахын тулд манай байрлалын хэрэгслийг ашиглана уу. Дээшээ хүртэл бэхэлсэн, доод тал руу нь бэхэлсэн эсвэл дээд талд нь наасан (хуудасны хамт дээд хэсэгт нь хүртлээ гүйлгэж, тэндээ үлдэнэ) гэсэн сонголтуудыг сонго. Тогтмол навигацууд 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: autooverflow-xauto

Хамгийн оновчтой зайд зориулсан нэмэлт маржин хэрэгслүүдтэй хамт .navbar-nav-scrollашиглах жишээ navbar энд байна.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>

Хариуцлагатай зан үйл

Navbars нь .navbar-toggler, .navbar-collapse, болон .navbar-expand{-sm|-md|-lg|-xl}ангиудыг ашиглан контент нь товчлуурын ард хэзээ нурж унахыг тодорхойлох боломжтой. Бусад хэрэгслүүдтэй хослуулан та тодорхой элементүүдийг хэзээ харуулах, нуухыг хялбархан сонгох боломжтой.

Хэзээ ч нурдаггүй navbars .navbar-expand-ийн хувьд navbar дээр анги нэмнэ үү. Үргэлж унадаг navbar-ийн хувьд ямар ч .navbar-expandанги нэмж болохгүй.

Тоглер

Navbar сэлгэн залгагчийг анхдагчаар зүүн тийш зэрэгцүүлдэг боловч , зэрэг эгч элементийг дагавал .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>

Гадаад контент

Заримдаа та collapse залгаасыг ашиглан .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Онолын хувьд энэ нь туслах технологийн хэрэглэгчдэд шилжүүлэгчээс өөрийн удирддаг сав руу шууд үсрэх боломжийг олгодог боловч одоогоор үүнийг дэмжих дэмжлэг маш бага байна.