Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
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".
  • v5.2.0 нұсқасындағы жаңалық: шарлау жолақтары негізгі сыныпқа бөлінген CSS айнымалыларымен тақырыпталуы мүмкін .navbar. .navbar-lightескірген және .navbar-darkқосымша мәнерлер қосудың орнына CSS айнымалы мәндерін қайта анықтау үшін қайта жазылған.
Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

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

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

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

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

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <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) және интервал ( me-auto, mb-2, mb-lg-0, me-2) қызметтік сыныптары қолданылады.

Бренд

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

Мәтін

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

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

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

Кескін

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

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

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

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

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

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

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

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

html 
<nav class="navbar navbar-expand-lg 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 үшін сабақтарды қолданатындықтан, қаласаңыз, тізімге негізделген тәсілден толығымен аулақ бола аласыз.

html 
<nav class="navbar navbar-expand-lg 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

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 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><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Пішіндер

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

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <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. Бұл әрекетті реттеу үшін қажет болса, қосымша икемді утилиталарды пайдаланыңыз.

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <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 сақтауға болады.

html 
<nav class="navbar 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>

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

html 
<nav class="navbar 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. Бұл сынып мәтін жолдары үшін тік туралау мен көлденең аралықты реттейді.

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

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

html 
<nav class="navbar navbar-expand-lg 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>

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

v5.2.0 нұсқасындағы жаңалық: Navbar тақырыбы енді CSS айнымалыларымен жұмыс істейді және .navbar-lightескірген. CSS айнымалылары .navbarәдепкі бойынша "жеңіл" көрініске қолданылады және оны арқылы қайта анықтауға болады .navbar-dark.

Sass және CSS айнымалыларының Bootstrap комбинациясы арқасында Navbar тақырыптары бұрынғыдан оңайырақ. .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" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

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

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

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

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

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

Орналастыру

Шарлау жолақтарын статикалық емес орындарға орналастыру үшін біздің позиция утилиталарын пайдаланыңыз. Жоғарыға бекітілген, төменге бекітілген, үстіңгі жағына жабыстырылған (бет жоғарыға жеткенше жылжиды, содан кейін сол жерде қалады) немесе төменге жабысады (бетпен төменге жеткенше жылжиды, содан кейін қалады) опциясын таңдаңыз. Ана жерде).

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

html 
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
html 
<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
html 
<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
html 
<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
html 
<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</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;"

html 
<nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-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" role="search">
        <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кіші тоқтау нүктесінде көрсетілмеген:

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

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

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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>

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

html 
<nav class="navbar navbar-expand-lg 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" role="search">
        <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бұл оңай орындалады!

html 
<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-*сыныпты толығымен өткізіп жіберіңіз.

html 
<nav class="navbar 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" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </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>
        </ul>
        <form class="d-flex" role="search">
          <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-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>

Қараңғы шарлау тақтасында offcanvas пайдаланған кезде, мәтін оқылмайтын болып қалмас үшін, canvas мазмұнына қараңғы фон қажет болуы мүмкін екенін ескеріңіз. Төмендегі мысалда қараңғы кенеппен дұрыс сәндеу үшін , -ге , -ге және .navbar-dark-ге .bg-darkжәне қосамыз ..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

html 
<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <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" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

Bootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бір бөлігі ретінде навигация жолақтары .navbarнақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады. CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Кейбір қосымша CSS айнымалылары мына жерде де бар .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

.navbar-darkCSS айнымалылары арқылы теңшеуді біз қайталанатын CSS селекторларын қоспай-ақ нақты мәндерді қайта анықтайтын сыныпта көруге болады .

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Sass айнымалылары

Барлық шарлау жолақтары үшін айнымалылар:

$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-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-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-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Sass циклі

Жауапты шарлау тақтасын кеңейту/тасалау сыныптары (мысалы, .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: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}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 {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

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