Негизги мазмунга өтүү Документтердин навигациясына өтүү
in English

Navbar

Bootstrap'тин күчтүү, жооп берүүчү навигация баш аты, навигация үчүн документтер жана мисалдар. Брендингди, навигацияны жана башкаларды, анын ичинде биздин кыйратуу плагинибизди колдоону камтыйт.

Бул бетте

Бул кантип иштейт

Navbar менен иштөөнү баштоодон мурун бул жерде эмнени билишиңиз керек:

  • Навборлор .navbarжооп берүүчү .navbar-expand{-sm|-md|-lg|-xl|-xxl}кыйратуу жана түс схемасы класстары үчүн таңууну талап кылат.
  • Navbars жана алардын мазмуну демейки боюнча суюк. Ар кандай жолдор менен горизонталдык туурасын чектөө үчүн контейнерди өзгөртүңүз .
  • Navbars ичиндеги аралыктарды жана тегиздөөлөрдү көзөмөлдөө үчүн биздин аралык жана ийкемдүү пайдалуу класстарды колдонуңуз.
  • Navbars демейки боюнча жооп берет, бирок сиз аны өзгөртүү үчүн аларды оңой эле өзгөртө аласыз. Жооптуу жүрүм-турум биздин 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-scrollА орнотуу үчүн кошумчаны кошуңуз 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" href="#" tabindex="-1" aria-disabled="true">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.0/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.0/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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </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="#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" href="#" tabindex="-1" aria-disabled="true">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>

Ар кандай баскычтар да бул navbar формаларынын бир бөлүгү катары колдоого алынат. Бул ошондой эле вертикалдуу тегиздөө утилиталары ар кандай өлчөмдөгү элементтерди тегиздөө үчүн колдонулушу мүмкүн экендигин эскертет.

<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" href="#" tabindex="-1" aria-disabled="true">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>

Жооптуу жүрүм-турумдар

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

Эч качан жыйрылбаган чабыттоо тилкелери үчүн классты навигация тилкесине кошуңуз .navbar-expand. Дайыма кулап турган навигация тилкелери үчүн эч кандай .navbar-expandкласс кошпоңуз.

Toggler

Navbar которгучтары демейки боюнча солго тегизделген, бирок алар сыяктуу бир тууган элементти ээрчишсе .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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бул оңой аткарылат!

<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Теориялык жактан алганда, бул жардамчы технологияны колдонуучуларга ал башкарган контейнерден түздөн-түз секирип өтүүгө мүмкүндүк берет, бирок учурда бул колдоо абдан начар.

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

Loop

Жооптуу навигация тилкесин кеңейтүү/жыйыштыруу класстары (мисалы, .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;
        }
      }
    }
  }
}