in English

Navbar

Belgekirin û nimûneyên ji bo sernavê navîgasyonê ya hêzdar, bersivdar a Bootstrap, navbar. Piştgiriya ji bo nîşankirin, navîgasyon, pêveka hilweşandinê, û hêj bêtir vedihewîne.

Çawa dixebite

Li vir tiştê ku hûn hewce ne ku zanibin berî ku hûn dest bi navbarê bikin ev e:

  • Navbar ji bo qutbûna bersivdar û dersên nexşeya rengîn pêdivî bi pêçekê .navbarheye ..navbar-expand{-sm|-md|-lg|-xl}
  • Navbar û naveroka wan ji hêla xwerû ve şil in. Konteynirên vebijarkî bikar bînin da ku firehiya wan a horizontal sînordar bikin.
  • Ji bo kontrolkirina cihêbûn û lihevhatina di navbaran de dersên meya ferq û kargêriya nerm bikar bînin .
  • Navbar ji hêla xwerû ve bersivdar in, lê hûn dikarin bi hêsanî wan biguhezînin da ku wê biguhezînin. Tevgera bersivdar bi pêveka meya Collapse JavaScript ve girêdayî ye.
  • Dema çapkirinê navbar ji hêla xwerû ve têne veşartin. Bi zêdekirina wan bi zorê çap .d-printbikin .navbar. Binêre çîna karûbarê nîşankirinê.
  • Bi karanîna <nav>hêmanek ve gihîştinê piştrast bikin an jî, heke hêmanek gelemperîtir wekî , bikar bînin, navbarek li her navbarek <div>zêde bikin da ku wê bi eşkere wekî herêmek nîşanek ji bo bikarhênerên teknolojiyên arîkar destnîşan bikin.role="navigation"
Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Naveroka piştgirî

Navbar ji bo çend hêmanan bi piştgirîya çêkirî tê. Li gorî hewcedariyê ji van jêrîn hilbijêrin:

  • .navbar-brandji bo pargîdaniya we, hilber, an navê projeya we.
  • .navbar-navji bo navîgasyonek tije-bilind û sivik (tevî piştgirîya dakêşan).
  • .navbar-togglerji bo karanîna bi pêveka meya hilweşandinê û tevgerên din ên guheztina navîgasyonê re.
  • .form-inlineji bo her cûre kontrol û çalakiyan.
  • .navbar-textji bo lêzêdekirina rêzikên nivîsê yên vertîkal navendî.
  • .collapse.navbar-collapseji bo komkirin û veşartina naveroka navbarê ji hêla xala veqetandinê ya dêûbav.

Li vir mînakek ji hemî jêr-pêkhatan hene ku di navbarek bi mijara ronahiyê ya bersivdar de hene ku bixweber li xala lgveqetandinê (mezin) hilweşe.

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

Ev nimûne çînên karûbar reng ( bg-light) û dûr ( my-2, my-lg-0, mr-sm-0, ) bikar tîne.my-sm-0

Şanika şewatê

Ew .navbar-branddikare li piraniya hêmanan were sepandin, lê ankerek çêtirîn dixebite, ji ber ku hin hêman dibe ku hewceyê dersên karûbar an şêwazên xwerû hewce bike.

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

Zêdekirina wêneyan li .navbar-brandwê belkî her gav hewce dike ku şêwazên xwerû an karûbarên xwerû bi mezinahiya rast hewce bike. Li vir çend nimûne hene ku nîşan bidin.

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

Zencîreyên navîgasyonê .navyên navbarê li ser vebijarkên me bi çîna xweya guhêrbar ava dikin û ji bo şêwazê bersivdar rast karanîna dersên veguheztinê hewce dikin . Navîgasyon di navbaran de dê di heman demê de mezin bibe da ku bi qasî ku pêkan cîhê horizontî dagir bike da ku naveroka navbara we bi ewlehî li hev bihêle.

Dewletên çalak-bi-ji .activebo nîşankirina rûpela heyî dikare rasterast li .nav-links an s-yên dêûbavên wan ên yekser were sepandin .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>

Û ji ber ku em dersan ji bo navên xwe bikar tînin, heke hûn bixwazin hûn dikarin ji nêzîkatiya bingehîn-lîsteyê bi tevahî dûr bixin.

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

Her weha hûn dikarin di navbara xwe de dakêşan bikar bînin. Pêşekên daketinê ji bo pozîsyonê hêmanek pêçandî hewce dike, ji ber vê yekê pê ewle bin ku hûn ji bo .nav-itemû .nav-linkwekî ku li jêr tê xuyang kirin hêmanên veqetandî û hêlîn bikar bînin.

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

Forms

Kontrol û pêkhateyên cihêreng ên formê di navbarek bi .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>

Hêmanên zaroka tavilê yên .navbarkaranîna sêwirana nerm û dê wekî xwerû bi kar bînin justify-content: space-between. Ji bo eyarkirina vê tevgerê wekî ku hewce be karûbarên flex ên din bikar bînin.

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

Komên têketinê jî dixebitin:

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

Bişkokên cihêreng wekî beşek ji van formên navbarê jî têne piştgirî kirin. Ev di heman demê de bîranînek girîng e ku karûbarên hevrêziya vertîkal dikare were bikar anîn da ku hêmanên mezinahiyên cihêreng li hev bikin.

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

Nivîstok

Dibe ku navbar bi alîkariya .navbar-text. Ev çîn ji bo rêzikên nivîsê hevrêziya vertîkal û cîhê horizontî eyar dike.

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

Li gorî hewcedariyê bi hêman û amûrên din re tevlihev bikin û li hev bikin.

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

Rengên rengîn

Mijara navbarê bi saya tevhevkirina dersên mijarê û karûbaran qet hêsantir nebûye background-color. Ji .navbar-lightbo karanîna bi rengên paşxaneya sivik, an .navbar-darkji bo rengên paşxaneya tarî hilbijêrin. Dûv re, bi .bg-*karûbaran xweş bikin.

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

Konteynirên

Her çend ew ne hewce ye jî, hûn dikarin navbarek di navberekê de bipêçin da .containerku wê li ser rûpelek navendî bikin. An jî hûn dikarin konteynirek li hundurê lê zêde bikin .navbarda ku tenê naverokek navbarek jorîn a sabît an statîk navend bike .

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

Gava ku konteynir di navbara we de ye, pelika wê ya horizontî li xalên veqetandinê ji .navbar-expand{-sm|-md|-lg|-xl}çîna weya diyarkirî kêmtir tê rakirin. Ev piştrast dike ku dema ku navbara we hilweşe, em li ser dîmenderên jêrîn ên nehewce padding dubare nakin.

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

Cihkirin

Karûbarên pozîsyona me bikar bînin da ku navbaran di pozîsyonên ne-statîk de bi cîh bikin. Hilbijartina ji sabît ber bi jor, sabîtkirî li jêr, an bi jor ve zeliqandî (bi rûpel digere heta ku ew digihîje jor, paşê li wir dimîne). Navbarên rastkirî bikar tînin position: fixed, tê vê wateyê ku ew ji herikîna normal ya DOM-ê têne derxistin û dibe ku CSS-ya xwerû hewce bike (mînak, padding-topli ser <body>) da ku pêşî li hevgirtina bi hêmanên din re bigire.

Di heman demê de bala xwe bidin ku .sticky-topbikar tîne position: sticky, ku di her gerokê de bi tevahî nayê piştgirî kirin .

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

Scrolling

Zêde .navbar-nav-scrollbikin .navbar-collapse(an hêmanek din a navbarê) da ku gerandina vertîkal di nav naverokên veguhezbar ên navbarek hilweşandî de çalak bike. Ji hêla xwerû ve, gerok li 75vh(an 75% ji bilindahiya dîmenderê) dest pê dike, lê hûn dikarin wê bi şêwazên hundurîn an xwerû bişopînin. Di dîmenderên mezin de dema ku navbar were berfireh kirin, naverok dê wekî ku di navbarek xwerû de xuya dike.

Ji kerema xwe not bikin ku ev tevger bi kêmasiyek potansiyel re tê - dema overflowku were danîn overflow-y: auto(pêdivî ye ku naverokê li vir bigerin), overflow-xwekheviya auto, ku dê hin naverokek horizontî bibire.

Li vir mînakek navbarek heye ku .navbar-nav-scrollbi style="max-height: 100px;", digel hin karûbarên marjînal ên zêde ji bo cîhê herî baş tê bikar anîn.

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

Tevgerên bersivdar

Navbar dikarin .navbar-toggler, .navbar-collapse, û .navbar-expand{-sm|-md|-lg|-xl}çînan bikar bînin da ku diyar bikin ka kengê naveroka wan li pişt bişkokekê hilweşe. Bi tevlêbûna bi karûbarên din re, hûn dikarin bi hêsanî hilbijêrin kengê hêmanên taybetî nîşan bidin an veşêrin.

Ji bo navbarên ku qet naqedin, .navbar-expandçîna li ser navbarê zêde bikin. Ji bo navbarên ku her gav hildiweşin, tu .navbar-expandçînek zêde nekin.

Toggler

Veguhezerên navbarê ji hêla xwerû ve li çepê têne rêz kirin, lê ger ew hêmanek xwişk û birayên mîna a bişopînin .navbar-brand, ew ê bixweber berbi rasta dûr ve werin rêz kirin. Berevajîkirina nîşankirina we dê cîhkirina vekêşanê berevajî bike. Li jêr mînakên şêwazên cûda yên guheztinê hene.

.navbar-brandDi xala şkestinê ya herî piçûk de nayê nîşandan:

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

Bi navek marqeya ku li milê çepê û veguheztina li milê rastê tê xuyang kirin:

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

Li milê çepê vekêşkek û navê marqeyê li milê rastê:

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

Naveroka derve

Carinan hûn dixwazin pêveka hilweşandinê bikar bînin da ku hêmanek konteynerê ji bo naveroka ku bi strukturî li derveyî hundurê rûniştî ye bişopîne .navbar. Ji ber ku pêveka me li ser idû lihevhatinê dixebite data-target, ew bi hêsanî tê kirin!

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

Dema ku hûn wiya dikin, em pêşniyar dikin ku JavaScript-a din jî tê de hebe da ku dema ku ew vebe balê bi bername li konteynerê bikişîne. Wekî din, bikarhênerên klavyeyê û bikarhênerên teknolojiyên arîkar dê di dîtina naveroka nû ya eşkerekirî de dijwariyek hebe - nemaze heke konteynera ku hatî vekirin di strukturê belgeyê de were pêşiya vekêşanê. Di heman demê de em pêşniyar dikin ku pê ewle bin ku vekêşker xwedan aria-controlstaybetmendî ye, îşaret bi idkonteynera naverokê dike. Di teorîyê de, ev dihêle ku bikarhênerên teknolojiya arîkar rasterast ji togler berbi konteynera ku ew kontrol dike - lê piştgirî ji bo vê yekê nuha pir qut e.