Navbar

Ebiwandiiko n'ebyokulabirako by'omutwe gwa Bootstrap ogw'amaanyi, oguddamu, navbar. Mulimu obuwagizi bw’okussaako akabonero, okutambulirako, okugwa plugin, n’ebirala.

Engeri gye kikola

Bino by'olina okumanya nga tonnatandika na navbar:

Navbars zeetaaga okuzinga .navbarne .navbar-expand{-sm|-md|-lg|-xl}ku responsive collapsing ne color scheme classes.
Navbars n'ebirimu biba fluid by default. Kozesa ebibya eby’okwesalirawo okussa ekkomo ku bugazi bwabyo obw’okwebungulula.
Kozesa kiraasi zaffe ez'enjawulo n'okukyusakyusa ( flex utility classes) okufuga ebanga n'okulaganya munda mu navbars.
Navbars ziddamu by default, naye osobola bulungi okuzikyusa okukyusa ekyo. Enneeyisa y’okuddamu esinziira ku plugin yaffe eya Collapse JavaScript.
Navbars zikwekebwa nga bweziba nga zikuba. Zikaka okukubibwa nga ogattako .d-printku .navbar. Laba ekibiina ky'omugaso gw'okulaga.
Kakasa nti kituukirirwa ng’okozesa <nav>ekintu oba, bw’oba okozesa ekintu ekisingawo okuba eky’awamu nga a <div>, yongera role="navigation"ku buli navbar okukirambika mu bulambulukufu ng’ekitundu eky’omugaso eri abakozesa tekinologiya ayamba.

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Ebirimu ebiwagirwa

Navbars zijja n’obuwagizi obuzimbibwamu obw’ebitundu ebitonotono ebitonotono. Londa ku bino wammanga nga bwe kyetaagisa:

.navbar-brandku kkampuni yo, ekintu kyo, oba erinnya lya pulojekiti.
.navbar-navolw’okutambulira mu buwanvu obujjuvu n’obuzito obutono (nga mw’otwalidde n’okuwagira ebifo ebikka wansi).
.navbar-togglerokukozesebwa ne plugin yaffe ey'okugwa n'enneeyisa endala ez'okukyusakyusa okutambuliramu .
.form-inlineku ngeri yonna okufuga n’ebikolwa.
.navbar-textolw’okugattako ennyiriri z’ebiwandiiko eziri wakati mu vertikal.
.collapse.navbar-collapseolw'okugatta n'okukweka ebirimu mu navbar okusinziira ku breakpoint y'omuzadde.

Wano waliwo ekyokulabirako ky’ebitundu byonna ebitonotono ebirimu mu navbar eriko omulamwa gw’ekitangaala eddamu egwa mu ngeri ey’otoma ku kifo lg(ekinene) eky’okumenya.

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

Ekyokulabirako kino kikozesa langi ( bg-light) n’ebanga ( my-2, my-lg-0, mr-sm-0, my-sm-0) kiraasi z’omugaso.

Bulandi

The .navbar-brandesobola okukozesebwa ku elementi ezisinga obungi, naye anchor ekola bulungi, nga elements ezimu ziyinza okwetaaga utility classes oba custom styles.

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

Okwongera ebifaananyi ku .navbar-brandkijja kirabika bulijjo kyetaaga emisono egy’enjawulo oba ebikozesebwa okutuuka ku sayizi entuufu. Wano waliwo ebyokulabirako by’olina okulaga.

<!-- 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 navigation links zizimba ku .navoptions zaffe nga zirina modifier class yazo era zeetaaga okukozesa toggler classes for proper responsive styling. Okutambula mu navbars nakyo kijja kukula okutwala ekifo ekinene eky’okwebungulula nga bwe kisoboka okukuuma ebirimu byo mu navbar nga bikwatagana bulungi.

Embeera ezikola—nga zirina .active—okulaga omuko oguliwo kati zisobola okukozesebwa butereevu ku .nav-links oba omuzadde waabwe ow’okumpi .nav-items.

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

Era olw’okuba tukozesa classes ku navs zaffe, osobola okwewala enkola eyesigamiziddwa ku list yonna bw’oba oyagala.

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

Osobola n'okukozesa ebikka mu navbar yo. Menyu ezikka wansi zeetaaga ekintu ekizinga okuteeka mu kifo, kale kakasa nti okozesa ebintu eby’enjawulo n’ebiteekeddwa mu kisenge ku .nav-itemera .nav-linknga bwe kiragibwa wansi.

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

Ffoomu

Teeka ebifuga ffoomu ez'enjawulo n'ebitundu munda mu navbar nga olina .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>

Amangu ddala omwana elements of .navbaruse flex layout era ejja default ku justify-content: space-between. Kozesa ebikozesebwa ebirala ebiyitibwa flex utilities nga bwe kyetaagisa okutereeza enneeyisa eno.

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

Ebibinja by’ebiyingizibwa nabyo bikola:

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

Butaamu ez'enjawulo ziwagirwa ng'ekitundu ku ffoomu zino eza navbar, nazo. Kino era kijjukiza kinene nti ebikozesebwa eby’okulaganya okwesimbye bisobola okukozesebwa okulaganya ebintu eby’obunene obw’enjawulo.

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

Okuwandiika obubaka

Navbars ziyinza okubaamu ebitundutundu by'ebiwandiiko nga biyambibwako .navbar-text. Kiraasi eno etereeza okulaganya okw’okwesimbye n’okulaga ebanga ery’okwesimbye ku nnyiriri z’ebiwandiiko.

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

Tabula era okwatagane n’ebitundu ebirala n’ebikozesebwa nga bwe kyetaagisa.

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

Ensengeka za langi

Okuteeka omulamwa ku navbar tekubangako kwangu olw’okugatta ebika by’omulamwa background-colorn’ebikozesebwa. Londako .navbar-lightokukozesebwa ne langi z’emabega ezitangaala, oba .navbar-darklangi z’emabega enzirugavu. Oluvannyuma, customize .bg-*n'ebikozesebwa.

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

Ebintu ebiteekebwamu ebintu

Wadde nga tekyetaagisa, osobola okuzinga navbar mu a .containerokugiteeka wakati ku lupapula. Oba oyinza okugattako ekintu munda mu .navbarkussa wakati byokka ebirimu mu fixed oba static top navbar .

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

Ekintu bwe kiba munda mu navbar yo, padding yaakyo ey'okwebungulula eggyibwawo ku breakpoints eza wansi okusinga .navbar-expand{-sm|-md|-lg|-xl}kiraasi yo eragiddwa. Kino kikakasa nti tetukubisaamu emirundi ebiri ku padding mu ngeri eteetaagisa ku viewports eza wansi nga navbar yo egudde.

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

Okuteekebwa mu kifo

Kozesa ebikozesebwa byaffe eby'ekifo okuteeka navbars mu bifo ebitali bikyukakyuka. Londa okuva ku fixed to the top, fixed to the bottom, oba stickied to the top (ezingulula n’olupapula okutuusa lwe lutuuka waggulu, olwo n’asigala awo). Fixed navbars use position: fixed, ekitegeeza nti ziggyibwa okuva mu ntambula eya bulijjo eya DOM era ziyinza okwetaaga CSS eya bulijjo (okugeza, padding-topku <body>) okuziyiza okukwatagana n'ebintu ebirala.

Era weetegereze nti .sticky-topekozesa position: sticky, etawagirwa mu bujjuvu mu buli browser .

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

Okuyiringisibwa

Yongera .navbar-nav-scrollku .navbar-collapse(oba ekitundu ekirala ekya navbar sub-component) okusobozesa okutambula okwesimbye munda mu birimu ebikyusibwakyusibwa ebya navbar egudde. Nga bwekiba, okutambula kutandika ku 75vh(oba 75% ku buwanvu bw'ekifo eky'okulaba), naye osobola okusazaamu ekyo n'emisono egy'omu layini oba egy'ennono. Ku bifo ebinene eby'okulaba nga navbar egaziyiziddwa, ebirimu bijja kulabika nga bwe bikola mu navbar esookerwako.

Nsaba omanye nti enneeyisa eno ejja n’ekizibu ekiyinza okubaawo ekya overflow—nga okuteeka overflow-y: auto(kyetaagisa okutambula ebirimu wano), overflow-xkyenkanawa ne auto, ekijja okusala ebimu ku birimu eby’okwebungulula.

Wano waliwo ekyokulabirako navbar ekozesa .navbar-nav-scrollne style="max-height: 100px;", n'ebimu ku margin utilities ez'enjawulo okusobola okubeera ebanga erisinga obulungi.

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

Enneeyisa eziddamu

Navbars zisobola okukozesa .navbar-toggler, .navbar-collapse, ne .navbar-expand{-sm|-md|-lg|-xl}classes okuzuula ddi ebirimu byabwe lwe bigwa emabega wa button. Bw’ogatta n’ebikozesebwa ebirala, osobola bulungi okulonda ddi lw’olina okulaga oba okukweka ebintu ebimu.

Ku navbar ezitagwa, yongera ku .navbar-expandkiraasi ku navbar. Ku navbars bulijjo ezigwa, togattako .navbar-expandclass yonna.

Omukyusakyusa

Navbar togglers are left-aligned by default, naye singa zigoberera elementi ya muganda nga a .navbar-brand, zijja kusengekebwa mu ngeri ey'otoma ku ddyo ennyo. Okuzza emabega markup yo kijja kuzzaawo okuteekebwa kwa toggler. Wansi waliwo ebyokulabirako by’emisono egy’enjawulo egy’okukyusakyusa.

Nga tewali .navbar-branderagiddwa ku kifo ekisinga obutono eky’okumenya:

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

Nga erinnya lya brand liragiddwa ku kkono ate toggler ku ddyo:

<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 kkono olina toggler ate ku ddyo erinnya lya brand:

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

Ebirimu eby’ebweru

Oluusi oyagala okukozesa collapse plugin okutandika ekintu ekirimu ebirimu ebituula mu nsengeka ebweru wa .navbar. Olw'okuba plugin yaffe ekola ku idn'okukwatagana data-target, ekyo kyangu okukolebwa!

Ebirimu ebigudde

Ekyusibwa okuyita mu kika kya 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>

Bw’okola kino, tusaba okussaamu JavaScript endala okutambuza essira mu pulogulaamu mu kibya nga kigguddwawo. Bwe kitaba ekyo, abakozesa keyboard n'abakozesa tekinologiya ayamba bajja kusanga obuzibu okuzuula ebirimu ebipya ebibikkuddwa - naddala singa ekintu ekyaggulwawo kijja nga toggler tannabaawo mu nsengeka y'ekiwandiiko. Era tukuwa amagezi okukakasa nti toggler erina aria-controlsattribute, nga esonga ku the idof the content container. Mu ndowooza, kino kisobozesa abakozesa tekinologiya ayamba okubuuka butereevu okuva ku toggler okutuuka ku konteyina gy’efuga–naye obuwagizi eri kino mu kiseera kino buba bwa bitundutundu nnyo.