Upau wa urambazaji

Hati na mifano ya kichwa chenye nguvu cha urambazaji cha Bootstrap, upau wa urambazaji. Inajumuisha usaidizi wa kuweka chapa, usogezaji, kukunja programu-jalizi, na zaidi.

Inavyofanya kazi

Hivi ndivyo unahitaji kujua kabla ya kuanza na upau wa urambazaji:

Navbars zinahitaji kufunikwa na .navbarkwa .navbar-expand{-sm|-md|-lg|-xl}ajili ya kuanguka na madarasa ya mpango wa rangi .
Navbar na yaliyomo ni kioevu kwa chaguo-msingi. Tumia vyombo vya hiari ili kupunguza upana wao mlalo.
Tumia madarasa yetu ya kuweka nafasi na kunyunyuzia matumizi kwa kudhibiti nafasi na upangaji ndani ya pau za urambazaji.
Navbar hujibu kwa chaguo-msingi, lakini unaweza kuzirekebisha kwa urahisi ili kubadilisha hiyo. Tabia ya kujibu inategemea programu-jalizi yetu ya Kunja JavaScript.
Navbar hufichwa kwa chaguo-msingi wakati wa uchapishaji. Lazimisha kuchapishwa kwa kuongeza .d-printkwenye .navbar. Tazama darasa la matumizi ya kuonyesha .
Hakikisha ufikivu kwa kutumia <nav>kipengele au, ikiwa unatumia kipengele cha kawaida zaidi kama vile <div>, ongeza a role="navigation"kwa kila upau wa urambazaji ili kutambua kwa uwazi kama eneo muhimu kwa watumiaji wa teknolojia saidizi.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Maudhui yanayotumika

Navbar huja na usaidizi uliojengewa ndani kwa vijenzi vidogo vidogo. Chagua kutoka kwa zifuatazo kama inavyohitajika:

.navbar-brandkwa kampuni, bidhaa au jina la mradi wako.
.navbar-navkwa urambazaji wa urefu kamili na uzani mwepesi (pamoja na usaidizi wa menyu kunjuzi).
.navbar-togglerkwa matumizi na programu-jalizi yetu ya kukunja na tabia zingine za kugeuza usogezaji .
.form-inlinekwa vidhibiti na vitendo vya aina yoyote.
.navbar-textkwa kuongeza mifuatano ya maandishi iliyowekwa katikati wima.
.collapse.navbar-collapsekwa kupanga na kuficha yaliyomo kwenye upau wa urambazaji kwa njia ya mzazi.

Huu hapa ni mfano wa vipengee vidogo vyote vilivyojumuishwa katika upau wa urambazaji wa mada nyepesi ambayo huanguka kiotomatiki kwenye sehemu lg(kubwa) ya kukatika.

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

Mfano huu hutumia rangi ( bg-light) na nafasi ( my-2, my-lg-0, mr-sm-0, my-sm-0) madarasa ya matumizi.

Chapa

.navbar-brandInaweza kutumika kwa vipengele vingi, lakini nanga hufanya kazi vyema zaidi, kwani baadhi ya vipengele vinaweza kuhitaji madarasa ya matumizi au mitindo maalum .

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

Kuongeza picha kwenye picha .navbar-brandkunaweza kuhitaji mitindo maalum au huduma ili saizi ipasavyo. Hapa kuna mifano ya kuonyesha.

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

Viungo vya usogezaji vya Upau wa urambazaji hujengwa juu ya .navchaguo zetu na darasa lao la kirekebishaji na vinahitaji matumizi ya aina za kigeuzaji kwa mtindo unaofaa. Urambazaji katika upau wa urambazaji pia utakua kuchukua nafasi nyingi za mlalo iwezekanavyo ili kuweka maudhui yako ya upau wa urambazaji yakiwa yamepangiliwa kwa usalama.

Hali amilifu-na .active-kuonyesha ukurasa wa sasa inaweza kutumika moja kwa moja kwa .nav-links au mzazi wao wa karibu .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>

Na kwa sababu tunatumia madarasa kwa navs zetu, unaweza kuepuka mbinu ya orodha kabisa ukipenda.

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

Unaweza pia kutumia menyu kunjuzi kwenye upau wa urambazaji. Menyu kunjuzi zinahitaji kipengele cha kufunga ili kuweka nafasi, kwa hivyo hakikisha kuwa umetumia vipengele tofauti na vilivyowekwa kwa ajili ya .nav-itemna .nav-linkkama inavyoonyeshwa hapa chini.

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

Fomu

Weka vidhibiti vya fomu mbalimbali na vipengele ndani ya upau wa urambazaji na .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>

Vipengee vya mara moja vya mtoto vya .navbarmpangilio wa matumizi na vitabadilika kuwa chaguomsingi justify-content: space-between. Tumia huduma za ziada zinazobadilika inapohitajika kurekebisha tabia hii.

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

Vikundi vya kuingiza hufanya kazi pia:

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

Vifungo mbalimbali vinatumika kama sehemu ya fomu hizi za upau wa urambazaji, pia. Hili pia ni ukumbusho mzuri kwamba huduma za upatanishaji wima zinaweza kutumika kupatanisha vipengele vya ukubwa tofauti.

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

Maandishi

Navbar zinaweza kuwa na vipande vya maandishi kwa usaidizi wa .navbar-text. Darasa hili hurekebisha mpangilio wima na nafasi mlalo kwa mifuatano ya maandishi.

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

Changanya na ufanane na vifaa vingine na huduma kama inahitajika.

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

Mipango ya rangi

Kuweka mada kwenye upau wa urambazaji haijawahi kuwa rahisi kutokana na mchanganyiko wa madarasa ya mada na background-colorhuduma. Chagua kutoka .navbar-lightkwa matumizi na rangi nyepesi za mandharinyuma, au .navbar-darkkwa rangi nyeusi za mandharinyuma. Kisha, ubinafsishe na .bg-*huduma.

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

Vyombo

Ingawa haihitajiki, unaweza kufunika upau wa urambazaji .containerili kuuweka katikati kwenye ukurasa. Au unaweza kuongeza kontena ndani ya .navbarkuweka katikati tu yaliyomo kwenye upau wa urambazaji usiobadilika au tuli .

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

Wakati kontena iko ndani ya upau wa urambazaji, pedi zake za mlalo huondolewa katika sehemu za chini zaidi kuliko .navbar-expand{-sm|-md|-lg|-xl}darasa lako ulilobainisha. Hii inahakikisha kwamba hatuongezeki kwenye pedi isivyofaa kwenye tovuti za chini za kutazama wakati upau wa urambazaji umekunjwa.

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

Uwekaji

Tumia huduma zetu za nafasi kuweka navbar katika nafasi zisizo tuli. Chagua kutoka fasta hadi juu, fasta hadi chini, au sticked hadi juu (kusonga na ukurasa mpaka kufikia juu, kisha kubaki hapo). Navbars zisizohamishika zinatumia position: fixed, kumaanisha kuwa zimetolewa kutoka kwa mtiririko wa kawaida wa DOM na zinaweza kuhitaji CSS maalum (kwa mfano, padding-topkwenye <body>) ili kuzuia mwingiliano na vipengele vingine.

Pia kumbuka kuwa .sticky-tophutumia position: sticky, ambayo haitumiki kikamilifu katika kila kivinjari .

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

Kusogeza

Ongeza .navbar-nav-scrollkwa .navbar-collapse(au kipengele kingine kidogo cha upau wa uelekezaji) ili kuwezesha kusogeza kwa wima ndani ya maudhui yanayoweza kugeuzwa ya upau wa urambazaji uliokunjwa. Kwa chaguomsingi, kusogeza kunaingia 75vh(au 75% ya urefu wa kituo cha kutazama), lakini unaweza kubatilisha hilo kwa mitindo ya ndani au maalum. Katika vituo vikubwa vya kutazama wakati upau wa urambazaji unapopanuliwa, maudhui yataonekana jinsi yanavyofanya katika upau chaguo-msingi.

Tafadhali kumbuka kuwa tabia hii inakuja na upungufu unaowezekana wa overflow-wakati kuweka overflow-y: auto(inayohitajika kusogeza maudhui hapa), overflow-xni sawa na auto, ambayo itapunguza maudhui ya mlalo.

Hapa kuna mfano wa upau wa urambazaji unaotumia .navbar-nav-scrollna style="max-height: 100px;", na huduma zingine za ziada za kuweka nafasi bora.

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

Tabia za mwitikio

Navbar zinaweza kutumia .navbar-toggler, .navbar-collapse, na .navbar-expand{-sm|-md|-lg|-xl}madarasa kubainisha wakati maudhui yao yanaanguka nyuma ya kitufe. Pamoja na huduma zingine, unaweza kuchagua kwa urahisi wakati wa kuonyesha au kuficha vipengele fulani.

Kwa pau za urambazaji ambazo hazikunji kamwe, ongeza .navbar-expanddarasa kwenye upau wa urambazaji. Kwa pau za urambazaji zinazoanguka kila wakati, usiongeze .navbar-expanddarasa lolote.

Toggler

Vigeuzi vya Upau wa Uelekezaji vimepangiliwa kushoto kwa chaguo-msingi, lakini iwapo vitafuata kipengele cha ndugu kama .navbar-brand, vitapangwa kiotomatiki upande wa kulia kabisa. Kurejesha lebo yako kutabadilisha uwekaji wa kigeuzaji. Ifuatayo ni mifano ya mitindo tofauti ya kugeuza.

Bila .navbar-brandkuonyeshwa kwenye sehemu ndogo kabisa ya kuzuilia:

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

Kwa jina la chapa iliyoonyeshwa upande wa kushoto na kigeuza kulia:

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

Na kigeuza kushoto na jina la chapa kulia:

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

Maudhui ya nje

Wakati mwingine unataka kutumia programu-jalizi ya kukunja ili kuanzisha kipengele cha kontena kwa maudhui ambayo yamekaa nje ya faili ya .navbar. Kwa sababu programu-jalizi yetu inafanya kazi kwenye idna data-targetkulinganisha, hiyo inafanywa kwa urahisi!

Maudhui yaliyokunjwa

Inaweza kugeuzwa kupitia chapa ya 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>

Unapofanya hivi, tunapendekeza ujumuishe JavaScript ya ziada ili kusogeza lengo kiprogramu kwenye kontena linapofunguliwa. Vinginevyo, watumiaji wa kibodi na watumiaji wa teknolojia saidizi watakuwa na wakati mgumu kupata maudhui mapya yaliyofichuliwa - hasa ikiwa chombo kilichofunguliwa kitakuja mbele ya kigeuza kigeuza muundo katika muundo wa hati. Tunapendekeza pia uhakikishe kuwa kigeuza kigeuza kina aria-controlssifa, inayoelekeza kwenye idchombo cha maudhui. Kinadharia, hii inaruhusu watumiaji wa teknolojia ya usaidizi kuruka moja kwa moja kutoka kwa kigeuza hadi kwenye kontena inachodhibiti–lakini usaidizi kwa hili kwa sasa ni dhaifu sana.