Navbar

Bootstrap'тин күчтүү, жооп берүүчү навигация баш аты, навигация үчүн документтер жана мисалдар. Брендинг, навигация, кыйратуу плагини жана башкалар үчүн колдоону камтыйт.

Бул кантип иштейт

Navbar менен иштөөнү баштоодон мурун бул жерде эмнени билишиңиз керек:

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

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Колдоого алынган мазмун

Navbars бир нече суб-компоненттер үчүн орнотулган колдоо менен келет. Төмөнкүлөрдүн ичинен керектүүсүн тандаңыз:

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

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>

Ар кандай баскычтар да бул navbar формаларынын бир бөлүгү катары колдоого алынат. Бул ошондой эле вертикалдуу тегиздөө утилиталары ар кандай өлчөмдөгү элементтерди тегиздөө үчүн колдонулушу мүмкүн экендигин эскертет.

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

Жооптуу жүрүм-турумдар

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

Эч качан жыйрылбаган чабыттоо тилкелери үчүн классты навигация тилкесине кошуңуз .navbar-expand. Дайыма кулап турган навигация тилкелери үчүн эч кандай .navbar-expandкласс кошпоңуз.

Toggler

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>

Тышкы мазмун

Кээде сиз структуралык жактан сыртта турган мазмун үчүн контейнер элементин иштетүү үчүн кыйратуу плагинин колдонгуңуз келет .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Теориялык жактан алганда, бул жардамчы технологияны колдонуучуларга ал башкарган контейнерден түздөн-түз секирип өтүүгө мүмкүндүк берет, бирок учурда бул колдоо абдан начар.