in English

Navbar

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

Бұл бетте

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

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

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

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

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

Бренд

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

Мәтін

.navbar-brandМәтінді сыныппен бірге элементке қосыңыз .

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Кескін

ішіндегі мәтінді ауыстыра .navbar-brandаласыз <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

Сурет және мәтін

Сондай-ақ, сурет пен мәтінді бір уақытта қосу үшін кейбір қосымша утилиталарды пайдалануға болады. .d-inline-blockжәне қосымшасына .align-text-topназар аударыңыз <img>.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Нав

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

Ағымдағы бетті көрсету үшін .activeсыныпты қосыңыз ..nav-link

aria-currentСондай-ақ активке төлсипатты қосу керек екенін ескеріңіз .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Пішіндер

Әр түрлі пішін басқару элементтерін және компоненттерін шарлау тақтасына орналастырыңыз:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Енгізу топтары да жұмыс істейді. Егер шарлау тақтасы тұтас пішін немесе негізінен пішін болса, <form>элементті контейнер ретінде пайдалануға және біраз HTML сақтауға болады.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <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="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" 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">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
  </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оны беттің ортасына қою үшін шарлау тақтасын орауға болады – дегенмен ішкі контейнер әлі де қажет екенін ескеріңіз. Немесе бекітілген немесе статикалық жоғарғы шарлау тақтасының.navbar мазмұнын ортаға салу үшін ішіне контейнер қосуға болады .

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <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">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

Айналдыру

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <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 me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

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

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

Тоглер

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

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

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

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

Navbar бренді арқылы ауысуға болады.

<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">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

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

Offcanvas

Кеңейтілетін және жиырылатын шарлау тақтасын offcanvas плагинінің көмегімен сыртқы сурет жәшігіне айналдырыңыз. Біз offcanvas әдепкі мәнерлерін кеңейтеміз және .navbar-expand-*динамикалық және икемді шарлау бүйірлік тақтасын жасау үшін сыныптарымызды пайдаланамыз.

Төмендегі мысалда барлық тоқтау нүктелері бойынша әрқашан жиырылатын offcanvas шарлау тақтасын жасау үшін .navbar-expand-*сыныпты толығымен өткізіп жіберіңіз.

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</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="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <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>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Белгілі бір тоқтау нүктесінде кәдімгі шарлау тақтасына кеңейтілетін offcanvas шарлау тақтасын жасау үшін lgпайдаланыңыз .navbar-expand-lg.

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Сасс

Айнымалылар

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Цикл

Жауапты шарлау тақтасын кеңейту/тасалау сыныптары (мысалы, .navbar-expand-lg) картамен біріктіріліп, ішіндегі $breakpointsцикл арқылы жасалады scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}