Navbar

Bootstrap қуатты, жауап беретін шарлау тақырыбына, шарлау тақтасына арналған құжаттар мен мысалдар. Брендинг, навигация, плагинді жию және т.б. қолдауды қамтиды.

Бұл қалай жұмыс істейді

Шарлау тақтасын пайдалануды бастамас бұрын мынаны білу керек:

Шарлау жолақтары жауап беретін жиырылуы және түс схемасы.navbar сыныптары үшін ораманы қажет етеді ..navbar-expand{-sm|-md|-lg|-xl}
Шарлау жолақтары және олардың мазмұны әдепкі бойынша сұйық. Көлденең енін шектеу үшін қосымша контейнерлерді пайдаланыңыз .
Шарлау жолақтарындағы аралықты және туралауды басқару үшін аралық және икемді қызметтік сыныптарымызды пайдаланыңыз.
Шарлау тақталары әдепкі бойынша жауап береді, бірақ оны өзгерту үшін оларды оңай өзгертуге болады. Жауап беру әрекеті біздің Collapse JavaScript плагиніне байланысты.
Басып шығару кезінде шарлау жолақтары әдепкі бойынша жасырылады. қосу арқылы оларды басып шығаруға .d-printмәжбүрлеңіз .navbar. Дисплей утилитасының класын қараңыз .
Элементті пайдалану арқылы қол жетімділікті қамтамасыз етіңіз <nav>немесе , сияқты жалпы элементті пайдалансаңыз, көмекші технологияларды пайдаланушылар үшін бағдар аймағы ретінде анық анықтау үшін әрбір шарлау тақтасына <div>a қосыңыз .role="navigation"

Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

Қолдау көрсетілетін мазмұн

Navbars бірнеше қосалқы құрамдастарға арналған кірістірілген қолдаумен бірге келеді. Қажет болған жағдайда төмендегілерден таңдаңыз:

.navbar-brandкомпанияңыз, өніміңіз немесе жобаңыз үшін.
.navbar-navтолық биіктіктегі және жеңіл шарлау үшін (ашылмалы тізімдерді қолдауды қоса).
.navbar-togglerбұзу плагинімен және басқа шарлауды ауыстырып қосу әрекеттерімен пайдалану үшін.
.form-inlineкез келген пішін басқару элементтері мен әрекеттері үшін.
.navbar-textтігінен орталанған мәтін жолдарын қосу үшін.
.collapse.navbar-collapseнегізгі тоқтау нүктесі бойынша шарлау тақтасының мазмұнын топтастыру және жасыру үшін.

lgМұнда (үлкен) тоқтау нүктесінде автоматты түрде жиырылатын жауап беретін жеңіл тақырыпты шарлау тақтасына енгізілген барлық қосалқы құрамдастардың мысалы келтірілген .

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

Бұл мысалда түс ( bg-light) және бос орын ( my-2, my-lg-0, mr-sm-0, my-sm-0) қызметтік сыныптары қолданылады.

Бренд

Көптеген .navbar-brandэлементтерге қолдануға болады, бірақ якорь жақсы жұмыс істейді, себебі кейбір элементтер қызметтік сыныптарды немесе реттелетін мәнерлерді қажет етуі мүмкін.

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

Кескіндерге қосу .navbar-brandдұрыс өлшем үшін әрқашан теңшелетін мәнерлер немесе утилиталар қажет болуы мүмкін. Мұнда көрсету үшін бірнеше мысалдар берілген.

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

Нав

Navbar шарлау сілтемелері .navөз модификатор класы бар опцияларымызға негізделеді және дұрыс жауап беру стилі үшін ауыстырып қосқыш сыныптарын пайдалануды талап етеді. Шарлау тақталарындағы шарлау сонымен қатар шарлау тақтасының мазмұнын қауіпсіз түрде туралау үшін мүмкіндігінше көлденең кеңістікті алу үшін өседі .

Ағымдағы бетті көрсету үшін белсенді күйлер—-мен s немесе олардың тікелей ата -анасына .activeтікелей қолдануға болады ..nav-link.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>

Біз өзіміздің navs үшін сабақтарды қолданатындықтан, қаласаңыз, тізімге негізделген тәсілден толығымен аулақ бола аласыз.

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

Сондай-ақ, шарлау тақтасында ашылмалы тізімдерді пайдалануға болады. Ашылмалы мәзірлер орналасу үшін орау элементін қажет етеді, сондықтан төменде көрсетілген .nav-itemжәне үшін бөлек және кірістірілген элементтерді пайдалануды ұмытпаңыз ..nav-link

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

Пішіндер

Әр түрлі пішін басқару элементтерін және құрамдастарын шарлау тақтасында көмегімен орналастырыңыз .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>

Пайдаланудың дереу еншілес элементтері .navbarикемді орналасуды ұсынады және әдепкі бойынша болады justify-content: space-between. Бұл әрекетті реттеу үшін қажет болса, қосымша икемді утилиталарды пайдаланыңыз.

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

Енгізу топтары да жұмыс істейді:

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

Осы шарлау тақтасы пішіндерінің бөлігі ретінде әртүрлі түймелерге де қолдау көрсетіледі. Бұл сонымен қатар тік туралау утилиталарын әртүрлі өлшемді элементтерді туралау үшін пайдалануға болатынын еске салады.

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

Мәтін

Navbars көмегімен мәтін биттерін қамтуы мүмкін .navbar-text. Бұл сынып мәтін жолдары үшін тік туралау мен көлденең аралықты реттейді.

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

Қажет болса, басқа компоненттермен және утилиталармен араластырыңыз және сәйкестендіріңіз.

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

Түс схемалары

background-colorТақырыптық сыныптар мен утилиталардың үйлесімі арқасында шарлау тақтасын тақырыптау ешқашан оңай болған емес . .navbar-lightАшық фондық түстермен немесе .navbar-darkқою фон түстерімен пайдалану үшін таңдаңыз . Содан кейін .bg-*утилиталармен теңшеңіз.

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

Контейнерлер

.containerБұл талап етілмесе де, оны беттің ортасына қою үшін шарлау тақтасын a ішіне орауға болады . Немесе бекітілген немесе статикалық жоғарғы шарлау тақтасының.navbar мазмұнын ортаға салу үшін ішіне контейнер қосуға болады .

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

.navbar-expand{-sm|-md|-lg|-xl}Контейнер шарлау тақтасында болғанда, оның көлденең толтыруы көрсетілген сыныптан төмен тоқтау нүктелерінде жойылады . Бұл шарлау тақтасы жиырылған кезде төменгі көріністердегі толтыруды қажетсіз екі есе көбейтпеуімізді қамтамасыз етеді.

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

Орналастыру

Шарлау жолақтарын статикалық емес орындарға орналастыру үшін біздің позиция утилиталарын пайдаланыңыз. Жоғарыға бекітілген, төменге бекітілген немесе үстіңгі жағына жабыстырылған опцияны таңдаңыз (бетпен жоғарыға жеткенше жылжиды, содан кейін сол жерде қалады). Бекітілген шарлау жолақтары пайдаланады position: fixed, яғни олар DOM жүйесінің қалыпты ағынынан шығарылады және басқа элементтермен қабаттасуды болдырмау үшін реттелетін CSS (мысалы, ) padding-topқажет болуы мүмкін.<body>

Сондай-ақ , барлық браузерлерде толық қолдау көрсетілмейтін.sticky-top пайдаланадыposition: sticky .

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

Айналдыру

Жиылған шарлау тақтасының ауыстырылатын мазмұндары ішінде тік айналдыруды қосу .navbar-nav-scrollүшін (немесе басқа шарлау тақтасының қосалқы құрамдас бөлігіне) қосыңыз. .navbar-collapseӘдепкі бойынша, айналдыру 75vh(немесе көру алаңы биіктігінің 75%) басталады, бірақ оны кірістірілген немесе реттелетін мәнерлермен қайта анықтауға болады. Шарлау тақтасы кеңейтілген кезде үлкенірек көрініс терезелерінде мазмұн әдепкі шарлау тақтасындағыдай пайда болады.

Бұл әрекеттің ықтимал кемшілігімен бірге келетінін ескеріңіз overflow-қашан параметрі overflow-y: auto(мазмұнды осында айналдыру үшін қажет), overflow-xбаламасы autoкейбір көлденең мазмұнды қиып алады.

Мұнда оңтайлы аралық үшін қосымша маржа утилиталары бар .navbar-nav-scrollкөмегімен пайдаланылатын шарлау тақтасының мысалы берілген.style="max-height: 100px;"

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

Жауапты мінез-құлық

.navbar-togglerШарлау жолақтары , .navbar-collapse, және .navbar-expand{-sm|-md|-lg|-xl}сыныптарды олардың мазмұны түйменің артында қашан жиырылатынын анықтау үшін пайдалана алады . Басқа утилиталармен бірге белгілі бір элементтерді көрсету немесе жасыру уақытын оңай таңдауға болады.

Ешқашан жиырылмайтын шарлау жолақтары үшін сыныпты шарлау тақтасына қосыңыз .navbar-expand. Әрқашан жиырылатын шарлау жолақтары үшін ешбір .navbar-expandсыныпты қоспаңыз.

Тоглер

Шарлау тақтасының ауыстырып қосқыштары әдепкі бойынша солға тураланады, бірақ олар сияқты сіңлі элементті бақылайтын болса .navbar-brand, олар автоматты түрде ең оң жаққа тураланады. Белгілеуді өзгерту қосқыштың орналасуын өзгертеді. Төменде әртүрлі ауыстырып қосу мәнерлерінің мысалдары берілген.

Ең .navbar-brandкіші тоқтау нүктесінде көрсетілмеген:

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

Сол жақта бренд атауы және оң жақта ауыстырғышпен көрсетілген:

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

Сол жақта ауыстырғышпен және оң жақта бренд атауымен:

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

Сыртқы мазмұн

Кейде құрылымдық түрде сыртта орналасқан мазмұнға арналған контейнер элементін іске қосу үшін ыдырау плагинін пайдаланғыңыз келеді .navbar. Біздің плагин сәйкестікте жұмыс істейтіндіктен id, data-targetбұл оңай орындалады!

Жиылған мазмұн

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>

Мұны істегенде, фокусты ашылған кезде контейнерге бағдарламалы түрде жылжыту үшін қосымша JavaScript қосуды ұсынамыз. Әйтпесе, пернетақта пайдаланушылары мен көмекші технологияларды пайдаланушылар жаңадан ашылған мазмұнды табу қиынға соғуы мүмкін - әсіресе ашылған контейнер құжат құрылымындағы ауыстырғыштан бұрын келсе. Сондай-ақ ауыстырып қосқышта мазмұн контейнерін aria-controlsкөрсететін төлсипат бар екеніне көз жеткізуді ұсынамыз . idТеориялық тұрғыдан, бұл көмекші технология пайдаланушыларына тікелей ауыстырғыштан өзі басқаратын контейнерге өтуге мүмкіндік береді, бірақ бұл қолдау қазіргі уақытта өте нашар.