Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
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"менен учурдагы нерсени көрсөтүңүз.
  • v5.2.0 жаңы:.navbar Navbars базалык класс үчүн масштабдуу CSS өзгөрмөлөр менен тематикалык болушу мүмкүн . .navbar-lightэскирген жана .navbar-darkкошумча стилдерди кошуунун ордуна CSS өзгөрмөлөрүн жокко чыгаруу үчүн кайра жазылган.
Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Колдоого алынган мазмун

Navbars бир нече суб-компоненттер үчүн орнотулган колдоо менен келет. Төмөнкүлөрдүн ичинен керектүүсүн тандаңыз:

  • .navbar-brandкомпанияңыз, продуктуңуз же долбоордун аталышы үчүн.
  • .navbar-navтолук бийиктиктеги жана жеңил навигация үчүн (анын ичинде ачылуучу тизмелерди колдоо).
  • .navbar-togglerбиздин кыйроо плагинибиз жана башка навигацияны которуштуруу аракеттери менен колдонуу үчүн.
  • Каалаган форманы башкаруу жана аракеттер үчүн ийкемдүү жана боштук утилиталары.
  • .navbar-textтексттин вертикалдуу борборлоштурулган саптарын кошуу үчүн.
  • .collapse.navbar-collapseчабыт панелинин мазмунун ата-энелик үзүү чекити боюнча топтоо жана жашыруу үчүн.
  • .navbar-scrollА орнотуу үчүн кошумчаны кошуңуз 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>

Жана биз класстарыбыз үчүн класстарды колдонгондуктан, эгер кааласаңыз, тизмеге негизделген ыкмадан толугу менен кача аласыз.

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>

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

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.

Navbar темалары Bootstrapдын Sass жана CSS өзгөрмөлөрүнүн айкалышынын аркасында болуп көрбөгөндөй оңой. Ачык фон түстөрү менен колдонуу үчүн демейки биздин “жарык навигация тилкеси”, бирок сиз .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>

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

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

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

Toggler

Navbar которгучтары демейки боюнча солго тегизделген, бирок алар сыяктуу бир тууган элементти ээрчишсе .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

Кеңейтүү жана жыйноочу навигация панелиңизди canvas компоненти менен canvas суурмасына айлантыңыз . Биз 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 мазмунунда караңгы фон болушу мүмкүн экенин унутпаңыз. Төмөндөгү мисалда кара түстөгү кенеп менен туура стилдештирүү үчүн , , to , жана үчүн .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 кошулган

.navbarBootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, навигация тилкелери реалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү 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);

CSS өзгөрмөлөрү аркылуу өзгөчөлөштүрүүнү класста көрүүгө болот, .navbar-darkанда биз кайталанган 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 үчүн өзгөрмөлөр :

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