in English

Navbar

Iwe ati awọn apẹẹrẹ fun Bootstrap ti o lagbara, akọsori lilọ kiri ti o dahun, navbar. Pẹlu atilẹyin fun isamisi, lilọ kiri, ohun itanna iṣubu, ati diẹ sii.

Bawo ni o ṣe n ṣiṣẹ

Eyi ni ohun ti o nilo lati mọ ṣaaju ki o to bẹrẹ pẹlu navbar:

Navbars nilo a murasilẹ .navbarpẹlu .navbar-expand{-sm|-md|-lg|-xl}fun idahun collapsing ati awọ eni kilasi.
Navbars ati akoonu wọn jẹ ito nipasẹ aiyipada. Lo awọn apoti iyan lati fi opin si iwọn petele wọn.
Lo aye wa ati awọn kilasi IwUlO fun ṣiṣakoso aye ati titete laarin awọn navbars .
Navbars jẹ idahun nipasẹ aiyipada, ṣugbọn o le ni rọọrun yipada wọn lati yi iyẹn pada. Ihuwasi idahun da lori ohun itanna JavaScript Collapse wa.
Navbars ti wa ni pamọ nipasẹ aiyipada nigba titẹ sita. Fi ipa mu wọn lati wa ni titẹ nipasẹ fifi kun .d-printsi .navbar. Wo kilasi IwUlO ifihan .
Rii daju iraye si nipa lilo <nav>eroja kan tabi, ti o ba nlo eroja jeneriki diẹ sii gẹgẹbi <div>, ṣafikun kan role="navigation"si gbogbo navbar lati ṣe idanimọ ni gbangba bi agbegbe ala-ilẹ fun awọn olumulo ti awọn imọ-ẹrọ iranlọwọ.

Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Atilẹyin akoonu

Navbars wa pẹlu atilẹyin-itumọ ti fun iwonba ti ipin-irinše. Yan lati inu atẹle bi o ṣe nilo:

.navbar-brandfun ile-iṣẹ rẹ, ọja, tabi orukọ iṣẹ akanṣe.
.navbar-navfun lilọ ni kikun giga ati iwuwo fẹẹrẹ (pẹlu atilẹyin fun awọn silẹ).
.navbar-togglerfun lilo pẹlu ohun itanna iṣubu ati awọn ihuwasi lilọ kiri miiran.
.form-inlinefun eyikeyi awọn iṣakoso fọọmu ati awọn iṣe.
.navbar-textfun fifi inaro aarin awọn gbolohun ọrọ.
.collapse.navbar-collapsefun kikojọpọ ati nọmbafoonu navbar awọn akoonu ti nipa a obi breakpoint.

Eyi ni apẹẹrẹ ti gbogbo awọn ẹya-ara ti o wa ninu navbar ti o ni akori ina idahun ti o ṣubu laifọwọyi ni aaye fifọ lg(nla).

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

Apeere yii nlo awọ ( bg-light) ati aaye ( my-2, my-lg-0, ) mr-sm-0awọn my-sm-0kilasi iwulo.

Brand

O .navbar-brandle lo si awọn eroja pupọ julọ, ṣugbọn oran kan ṣiṣẹ dara julọ, nitori diẹ ninu awọn eroja le nilo awọn kilasi iwulo tabi awọn aṣa aṣa.

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

Ṣafikun awọn aworan si .navbar-brandifẹ nigbagbogbo nilo awọn aza aṣa tabi awọn ohun elo si iwọn daradara. Eyi ni diẹ ninu awọn apẹẹrẹ lati ṣe afihan.

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

Awọn ọna asopọ lilọ kiri Navbar kọ lori awọn .navaṣayan wa pẹlu kilasi modifier tiwọn ati nilo lilo awọn kilasi toggler fun iselona idahun to dara. Lilọ kiri ni navbars yoo tun dagba lati gba aaye petele bi o ti ṣee ṣe lati jẹ ki awọn akoonu navbar rẹ wa ni ibamu ni aabo.

Awọn ipinlẹ ti nṣiṣe lọwọ-pẹlu .active-lati tọkasi oju-iwe lọwọlọwọ le ṣee lo taara si awọn .nav-links tabi awọn obi obi wọn lẹsẹkẹsẹ .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>

Ati pe nitori a lo awọn kilasi fun awọn navs wa, o le yago fun ọna ti o da lori atokọ patapata ti o ba fẹ.

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

O tun le lo awọn dropdowns ninu rẹ navbar. Awọn akojọ aṣayan sisọ silẹ nilo ipin wiwu fun ipo, nitorinaa rii daju lati lo awọn eroja lọtọ ati itẹ-ẹiyẹ fun .nav-itemati .nav-linkbi o ṣe han ni isalẹ.

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

Awọn fọọmu

Gbe orisirisi awọn idari fọọmu ati awọn paati laarin navbar pẹlu .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>

Lẹsẹkẹsẹ awọn eroja ọmọde ti .navbarlilo ipalemọ ati pe yoo jẹ aiyipada si justify-content: space-between. Lo afikun awọn ohun elo irọrun bi o ṣe nilo lati ṣatunṣe ihuwasi yii.

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

Awọn ẹgbẹ igbewọle ṣiṣẹ, paapaa:

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

Awọn bọtini oriṣiriṣi ni atilẹyin gẹgẹbi apakan ti awọn fọọmu navbar wọnyi, paapaa. Eyi tun jẹ olurannileti nla pe awọn ohun elo titete inaro le ṣee lo lati ṣe deede awọn eroja iwọn oriṣiriṣi.

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

Ọrọ

Navbars le ni awọn ọrọ diẹ ninu pẹlu iranlọwọ ti .navbar-text. Kilasi yii ṣatunṣe titete inaro ati aye petele fun awọn gbolohun ọrọ.

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

Illa ati baramu pẹlu awọn paati miiran ati awọn ohun elo bi o ṣe nilo.

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

Awọn eto awọ

Titori navbar ko rọrun rara ọpẹ si apapọ awọn kilasi akori ati background-colorawọn ohun elo. Yan lati .navbar-lightfun lilo pẹlu awọn awọ abẹlẹ ina, tabi .navbar-darkfun awọn awọ abẹlẹ dudu. Lẹhinna, ṣe akanṣe pẹlu .bg-*awọn ohun elo.

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

Awọn apoti

Botilẹjẹpe ko nilo, o le fi ipari si navbar kan .containersi aarin rẹ lori oju-iwe kan. Tabi o le ṣafikun eiyan kan .navbarsi aarin si aarin awọn akoonu ti navbar oke ti o wa titi tabi aimi .

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

Nigbati eiyan ba wa laarin navbar rẹ, a ti yọ paadi petele rẹ kuro ni awọn aaye fifọ ni isalẹ ju kilasi ti o ti sọ .navbar-expand{-sm|-md|-lg|-xl}tẹlẹ. Eyi ṣe idaniloju pe a ko ni ilọpo meji lori padding lainidi lori awọn oju iwo kekere nigbati navbar rẹ ba ṣubu.

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

Ipo

Lo awọn ohun elo ipo wa lati gbe awọn navbars si awọn ipo ti kii ṣe aimi. Yan lati ti o wa titi si oke, ti o wa titi si isalẹ, tabi lẹmọ si oke (awọn iwe pẹlu oju-iwe naa titi ti o fi de oke, lẹhinna duro nibẹ). Awọn navbars ti o wa titi lo position: fixed, afipamo pe wọn fa lati ṣiṣan deede ti DOM ati pe o le nilo CSS aṣa (fun apẹẹrẹ, padding-toplori awọn <body>) lati ṣe idiwọ iṣakojọpọ pẹlu awọn eroja miiran.

Tun ṣe akiyesi pe .sticky-toplilo position: sticky, eyiti ko ni atilẹyin ni kikun ni gbogbo ẹrọ aṣawakiri .

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

Yi lọ

Fikun .navbar-nav-scroll- un .navbar-collapse(tabi apa-paati navbar miiran) lati jẹ ki yi lọ inaro ṣiṣẹ laarin awọn akoonu toggle ti navbar ti o ṣubu. Nipa aiyipada, yiyi bẹrẹ ni 75vh(tabi 75% ti iga wiwo wiwo), ṣugbọn o le bori iyẹn pẹlu opopo tabi awọn aṣa aṣa. Ni awọn ibudo wiwo nla nigbati navbar ba ti fẹ sii, akoonu yoo han bi o ti ṣe ni navbar aiyipada.

Jọwọ ṣe akiyesi pe ihuwasi yii wa pẹlu ipadasẹhin ti o pọju ti overflow— nigbati eto overflow-y: auto(ti o nilo lati yi akoonu si ibi), overflow-xjẹ deede ti auto, eyiti yoo gbin diẹ ninu akoonu petele.

Eyi ni apẹẹrẹ navbar nipa lilo .navbar-nav-scrollpẹlu style="max-height: 100px;", pẹlu diẹ ninu awọn ohun elo ala-ilẹ fun aye to dara julọ.

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

Awọn ihuwasi idahun

Navbars le lo .navbar-toggler, .navbar-collapse, ati .navbar-expand{-sm|-md|-lg|-xl}awọn kilasi lati pinnu nigbati akoonu wọn ṣubu lẹhin bọtini kan. Ni apapo pẹlu awọn ohun elo miiran, o le ni rọọrun yan igba lati ṣafihan tabi tọju awọn eroja kan pato.

Fun awọn navbars ti ko wó, fi awọn .navbar-expandkilasi lori navbar. Fun awọn navbars ti o nigbagbogbo ṣubu, ma ṣe fi eyikeyi .navbar-expandkilasi kun.

Toggler

Navbar togglers ti wa ni ibamu si osi nipasẹ aiyipada, ṣugbọn ti wọn ba tẹle nkan ti arakunrin bi a .navbar-brand, wọn yoo wa ni deede laifọwọyi si apa ọtun. Yiyipada isamisi rẹ yoo yi ipo ti toggler pada. Ni isalẹ wa ni awọn apẹẹrẹ ti awọn aṣa toggle oriṣiriṣi.

Pẹlu ko .navbar-brandṣe afihan ni aaye isinmi ti o kere julọ:

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

Pẹlu orukọ iyasọtọ ti o han ni apa osi ati toggler ni apa ọtun:

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

Pẹlu toggler ni apa osi ati orukọ iyasọtọ ni apa ọtun:

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

Ita akoonu

Nigba miiran o fẹ lati lo ohun itanna iṣubu lati ma nfa ohun elo eiyan kan fun akoonu ti o joko ni ipilẹ ti ita .navbar. Nitori ohun itanna wa ṣiṣẹ lori idati data-targetibaramu, iyẹn ni irọrun ṣe!

Akoonu ti o bajẹ

Toggleable nipasẹ brand 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>

Nigbati o ba ṣe eyi, a ṣeduro pẹlu afikun JavaScript lati gbe idojukọ ni eto si eiyan nigbati o ṣii. Bibẹẹkọ, awọn olumulo keyboard ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo ni akoko lile lati wa akoonu tuntun ti a fihan - ni pataki ti apoti ti o ṣii ba wa ṣaaju toggler ninu eto iwe naa. A tun ṣeduro rii daju pe toggler ni abuda naa aria-controls, tọka si idti eiyan akoonu. Ni imọran, eyi ngbanilaaye awọn olumulo imọ-ẹrọ iranlọwọ lati fo taara lati toggler si apo eiyan ti o ṣakoso - ṣugbọn atilẹyin fun eyi jẹ alamọ lọwọlọwọ.