Navbar

Dukumeentiyo iyo tusaalooyin loogu talagalay Bootstrap's awood badan, madax-wareejin ka jawaabaya, navbar. Waxaa ku jira taageerada summaynta, navigation, plugin burburay, iyo in ka badan.

Sida ay u shaqeyso

Waa kuwan waxa aad u baahan tahay inaad ogaato ka hor intaadan bilaabin navbar:

Navbars-ku waxay u baahan yihiin in lagu duubo burburka jawaaba .navbarleh .navbar-expand{-sm|-md|-lg|-xl}iyo fasallada nidaamka midabka .
Navbars iyo waxa ku jira waa dareere ahaan. Isticmaal weel ikhtiyaari ah si aad u xaddiddo ballacooda jiifka ah.
U isticmaal kala dheeraynta iyo fasallada utility-ga dabacsan si aad u xakamayso kala dheeraynta iyo toosinta navbars gudahooda.
Navbars si toos ah ayey uga jawaabaan, laakiin si fudud ayaad u beddeli kartaa si aad taas u beddesho. Dabeecada jawaab celinta waxay ku xiran tahay Burburinta JavaScript plugin.
Navbars si toos ah ayaa loo qariyaa marka la daabacayo. Ku qas in la daabaco adoo ku .d-printdaraya .navbar. Eeg fasalka utility bandhigay .
Hubi gelitaanka adigoo isticmaalaya shay <nav>ama, haddii la isticmaalayo curiye ka badan sida a <div>, ku dar role="navigation"navbar kasta si aad si cad ugu aqoonsato inuu yahay gobol calaamad u ah isticmaalayaasha tignoolajiyada caawinta.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Waxyaabaha la taageeray

Navbars waxay la yimaadaan taageero ku dhisan qayb yar oo ka kooban qaybo hoose. Ka dooro kuwa soo socda haddii loo baahdo:

.navbar-brandee shirkaddaada, alaabtaada, ama magaca mashruuca.
.navbar-navloogu talagalay socodka dhererka buuxa iyo fududaanta (ay ku jirto taageerada hoos u dhaca).
.navbar-togglersi loogu isticmaalo pluginkeena burburay iyo dabeecadaha kale ee leexinta .
.form-inlineqaab kasta oo la xakameeyo iyo ficilada.
.navbar-textsi loogu daro xardho qoraal ah oo toosan.
.collapse.navbar-collapsekooxaynta iyo qarinta waxa ku jira navbar barta waalidka.

Waa kuwan tusaale dhammaan qaybaha-hoosaadka ee lagu daray navbar-fudud iftiin leh oo si toos ah ugu dunta meesha lg(weyn).

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

Tusaalahani waxa uu isticmaalaa midab ( bg-light) iyo kala dheerayn ( my-2, my-lg-0, mr-sm-0) my-sm-0fasalada utility.

Summada

Midda .navbar-brandwaxaa lagu dabaqi karaa inta badan walxaha, laakiin barroosintu si fiican ayey u shaqeysaa, maadaama walxaha qaar ay u baahan karaan fasalo utility ama qaabab gaar ah.

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

Ku darista sawirada .navbar-brandwaxay u badan tahay inay had iyo jeer u baahan tahay qaabab gaar ah ama utility si ay u cabbiraan si sax ah. Waa kuwan tusaalooyin lagu muujinayo.

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

Isku xirka navbar navigation waxay ku dhismaan .navikhtiyaarkayaga fasalkooda wax ka beddelka waxayna u baahan yihiin isticmaalka fasallada toggler si habayn habboon looga jawaabo. Navigation in navbars sidoo kale kori doonaa si ay u qabsadaan inta badan oo bannaan oo siman inta suurtogalka ah si ay u dhawrto ka kooban navbar aad la siman yahay.

Dawladaha fir-fircoon ee leh .active-si loo muujiyo bogga hadda jira waxaa si toos ah loogu dabaqi karaa .nav-links ama waalidkooda dhow .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>

Iyo sababta oo ah waxaan u isticmaalnaa fasalada maraakiibtayada, waxaad ka fogaan kartaa habka liiska ku saleysan gabi ahaanba haddii aad rabto.

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

Waxa kale oo aad isticmaali kartaa hoos-u-dhacyada navbar-kaaga. Liiska hoos-u-dhaca wuxuu u baahan yahay cunsur wax lagu duubo si loo meeleeyo, markaa hubso inaad isticmaasho walxo gaar ah oo buul leh .nav-itemiyo .nav-linksida hoos ku cad.

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

Foomamka

Dhig kontaroolo kala duwan iyo qaybo kala duwan gudaha navbar leh .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>

Cunsurka ilmaha ee degdega ah ee .navbaristicmaalka qaabka dabacsanaanta oo ku dhici doona justify-content: space-between. Isticmaal qalab dabacsan oo dheeri ah markaad u baahan tahay si aad u hagaajiso dhaqankan.

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

Kooxaha wax-gelinta ayaa sidoo kale shaqeeya:

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

Badhamada kala duwan ayaa sidoo kale lagu taageeraa qayb ka mid ah foomamka navbar. Tani waxay sidoo kale xusuusin weyn u tahay in utility-ka toosan ee toosan loo isticmaali karo in lagu toosiyo walxaha kala duwan.

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

Qoraal

Navbars waxaa laga yaabaa inay ku jiraan qaybo qoraal ah iyadoo la kaashanayo .navbar-text. Fasalkani wuxuu hagaajiyaa toosinta toosan iyo kala dheeraynta toosan ee xargaha qoraalka.

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

Ku qas oo ku dhig qaybaha kale iyo adeegyada sida loo baahdo.

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

Nidaamyada midabka

Dulucda navbar-ka waligeed ma fududa iyada oo ay ugu wacan tahay isku darka xiisadaha mawduuca iyo background-coloradeegyada. Ka dooro .navbar-lightisticmaalka midabada asalka ah ee iftiinka, ama .navbar-darkmidabada asalka madow. Ka dib, ku beddel .bg-*adeegyada.

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

Konteenarada

Inkasta oo aan loo baahnayn, waxaad ku duubi kartaa navbar a .containersi aad u dhex dhigto bogga. Ama waxaad ku dari kartaa weel gudaha gudaha ah .navbaroo kaliya dhexda ugu jira waxa ku jira navbar sare oo go'an ama taagan .

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

Marka weelku ku dhex jiro navbarkaaga, suufkiisa jiifka ah ayaa laga saarayaa meelaha jaban ee ka hooseeya .navbar-expand{-sm|-md|-lg|-xl}fasalkaaga cayiman. Tani waxay xaqiijinaysaa inaanaan labanlaabin suufka aan loo baahnayn ee meelaha hoose marka navbar kaaga uu burburay.

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

Meelaynta

Isticmaal qalabkayada booska si aad navbars ugu dhejiso boosaska aan joogsiga lahayn. Ka dooro mid go'an ilaa sare, go'an xagga hoose, ama ku dheggan xagga sare (ku duub bogga ilaa ay ka gaadhayso xagga sare, ka dibna halkaa ku sii jir). Navbars go'an ayaa isticmaala position: fixed, taasoo la macno ah in laga soo jiiday socodka caadiga ah ee DOM waxaana laga yaabaa inay u baahdaan CSS caado ah (tusaale, padding-topon the <body>) si looga hortago isku dhafka walxaha kale.

Sidoo kale ogow .sticky-topisticmaalkaas position: sticky, kaas oo aan si buuxda u taageersanayn browser kasta .

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

Duubista

.navbar-nav-scrollKu dar .navbar-collapse(ama qayb-hoosaadka navbar kale) si aad awood ugu yeelatid rogid toosan gudaha waxa ku jira beddelka navbar burburay. Sida caadiga ah, 75vhrog-rogiddu waxay ku bilaabataa (ama 75% ee dhererka daawashada), laakiin waxaad taas kaga takhalusi kartaa qaababka khad toosan ama caadada ah. Goobaha waaweyn ee daawashada marka navbar la balaadhiyo, waxa ku jira waxa ay ka soo muuqan doonaan sida navbar caadiga ah.

Fadlan ogow in hab-dhaqankani uu la yimaado dib-u-dhac suurtagal ah oo ah — overflowmarka dejinta overflow-y: auto(loo baahan yahay in lagu rogo waxa ku jira halkan), overflow-xwaxa ay u dhigantaa auto, kaas oo goosan doona qayb toosan.

Waa kuwan tusaale navbar la isticmaalayo .navbar-nav-scroll, style="max-height: 100px;"oo wata qaar ka mid ah utility margin dheeraad ah ee kala dheeraynta ugu wanaagsan.

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

Dabeecadaha ka jawaaba

Navbars waxay isticmaali karaan .navbar-toggler, .navbar-collapse, iyo .navbar-expand{-sm|-md|-lg|-xl}fasallo si ay u go'aamiyaan marka nuxurkoodu ku dumo badhan gadaashiisa. Marka lagu daro tas-hiilaadka kale, waxaad si fudud u dooran kartaa marka aad muujinayso ama qarinayso waxyaabo gaar ah.

Navbars aan waligood dumin, ku dar .navbar-expandfasalka navbar-ka. Navbar-yada had iyo jeer burbura, ha ku darin wax .navbar-expandfasal ah.

Toggler

Togglers Navbar si toos ah ayay bidix u toosan yihiin, laakiin haddii ay raacaan walxaha walaalaha ah sida a .navbar-brand, waxay si toos ah ula toosi doonaan midigta fog. Dib u noqoshada calaamadayntaada waxay beddeli doontaa meelaynta toggler-ka. Hoos waxaa ah tusaalayaal qaababka beddelka ee kala duwan.

Iyadoo aan .navbar-brandlagu tusin meesha ugu yar:

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

Leh magaca summada oo ka muuqda bidix iyo toggler dhanka midig:

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

Ku-rogeeyaha bidix iyo magaca summada ee midig:

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

Waxyaabaha dibadda

Mararka qaarkood waxaad rabtaa inaad isticmaasho plugin burburka si aad u kiciso curiyaha weelka ee nuxurka qaab ahaan u fadhiya meel ka baxsan .navbar. idSababtoo ah pluginkeena wuxuu ku shaqeeyaa data-targetisbarbardhigga, taas si fudud ayaa loo sameeyaa!

Waxyaabaha burburay

Lagu beddeli karo astaanta 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>

Markaad tan sameyso, waxaan kugula talineynaa inaad ku darto JavaScript dheeraad ah si aad barnaamij ahaan diirada ugu wareejiso weelka marka la furo. Haddii kale, isticmaalayaasha kiiboodhka iyo isticmaalayaasha tignoolajiyada caawinta waxay u badan tahay inay ku adkaan doonto helista waxa cusub ee la daaha ka qaaday - gaar ahaan haddii weelka la furay uu ka hor yimaado beddelaha qaab dhismeedka dukumeentiga. Waxaan sidoo kale ku talinaynaa in la hubiyo in toggler-ku uu leeyahay sifada aria-controls, iyadoo tilmaamaysa idweelka ka kooban yahay. Aragti ahaan, tani waxay u oggolaanaysaa isticmaalayaasha tignoolajiyada caawinta inay si toos ah uga boodaan toggler-ka oo ay u gudbaan weelka ay gacanta ku hayso-laakin taageerada tani hadda aad bay u yar tahay.