Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Navbar

Bootstrap-ийн хүчирхэг, хариу үйлдэл үзүүлэх навигацийн толгой хэсэг болох navbar-д зориулсан баримт бичиг, жишээнүүд. Брэнд, навигаци болон бусад зүйлсийн дэмжлэг, үүнд манай задрах залгаасын дэмжлэг орно.

Энэ хуудсан дээр

Хэрхэн ажилладаг

Navbar-г ашиглаж эхлэхээсээ өмнө та дараах зүйлсийг мэдэх хэрэгтэй:

  • Навбарууд нь мэдрэгчтэй уналт .navbarболон .navbar-expand{-sm|-md|-lg|-xl|-xxl}өнгөний схемийн ангиудад боодолтой байхыг шаарддаг.
  • Navbars болон тэдгээрийн агуулга нь анхдагч байдлаар шингэн байдаг. Хэвтээ өргөнийг нь янз бүрийн аргаар хязгаарлахын тулд савыг өөрчил .
  • Navbar доторх зай болон зэрэгцүүлэлтийг хянахын тулд манай зай , уян хатан хэрэгслийн ангиллыг ашиглаарай.
  • Navbars нь анхдагч байдлаар хариу үйлдэл үзүүлдэг боловч та үүнийг өөрчлөхийн тулд тэдгээрийг хялбархан өөрчилж болно. Хариуцлагатай байх нь бидний Collapse JavaScript залгаасаас хамаарна.
  • Элемент ашиглан хүртээмжтэй байдлыг баталгаажуулах <nav>, эсвэл жишээлбэл, илүү ерөнхий элемент ашиглаж байгаа бол туслах технологи хэрэглэгчдэд зориулсан тэмдэглэгээний бүс болохыг тодорхой тодорхойлохын тулд навигац бүрийн хэсэгт <div>a-г нэмнэ үү.role="navigation"
  • aria-current="page"Одоогийн хуудас эсвэл багц дахь одоогийн зүйлийг ашиглан одоогийн зүйлийг заана уу aria-current="true".
Энэ бүрэлдэхүүн хэсгийн хөдөлгөөнт эффект нь prefers-reduced-motionмедиа асуулгаас хамаарна. Манай хүртээмжтэй байдлын баримт бичгийн хөдөлгөөнийг багасгасан хэсгийг үзнэ үү .

Дэмжигдсэн контент

Навбарууд нь цөөн хэдэн дэд бүрэлдэхүүн хэсгүүдийн суурилуулсан дэмжлэгтэй ирдэг. Шаардлагатай бол дараахь зүйлсээс сонгоно уу.

  • .navbar-brandтанай компани, бүтээгдэхүүн эсвэл төслийн нэр.
  • .navbar-navбүрэн өндөр, хөнгөн навигацийн хувьд (унадаг цэсийг дэмждэг).
  • .navbar-togglerманай задрах залгаас болон бусад навигацыг асаах үйлдэлтэй ашиглахад зориулагдсан .
  • Аливаа маягтын удирдлага, үйлдэлд зориулсан уян хатан болон зайны хэрэгслүүд.
  • .navbar-textбосоо төвтэй текстийн мөрүүдийг нэмэхэд зориулагдсан.
  • .collapse.navbar-collapsenavbar контентыг эцэг эхийн таслах цэгээр бүлэглэх, нуух зориулалттай.
  • Нэмэлт .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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Энэ жишээнд дэвсгэр ( bg-light) болон зай ( my-2, my-lg-0, me-sm-0, my-sm-0) хэрэгслийн ангиллыг ашигладаг.

Брэнд

Энэ .navbar-brandнь ихэнх элементүүдэд хэрэглэгдэж болох боловч зангуу нь хамгийн сайн ажилладаг, учир нь зарим элементүүд нь хэрэглээний анги эсвэл захиалгат хэв маягийг шаарддаг.

Текст

Ангитай элемент дотор текстээ нэмнэ үү .navbar-brand.

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

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

Зураг

Та доторх .navbar-brandтекстийг <img>.

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

Зураг ба текст

Та зураг болон текстийг нэгэн зэрэг нэмэхийн тулд зарим нэмэлт хэрэгслийг ашиглаж болно. .d-inline-blockболон .align-text-topдээр нэмэхийг анхаарна уу <img>.

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

Navbar навигацийн холбоосууд нь өөрсдийн .navтохируулагч ангитай бидний сонголтууд дээр тулгуурладаг бөгөөд зөв хариу үйлдэл үзүүлэхийн тулд сэлгэн залгагч классуудыг ашиглахыг шаарддаг. Navbar дээрх навигаци нь таны navbar контентыг найдвартай зэрэгцүүлэхийн тулд аль болох их хэвтээ зай эзэлнэ .

Одоогийн хуудсыг зааж өгөхийн тулд .activeангийг нэмнэ үү ..nav-link

aria-currentТа мөн идэвхтэй дээр атрибут нэмэх хэрэгтэйг анхаарна уу .nav-link.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Мөн бид navs-д зориулж анги ашигладаг тул та хүсвэл жагсаалтад суурилсан аргаас бүрэн зайлсхийх боломжтой.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Та мөн өөрийн навигацийн цэсэнд унадаг цэсийг ашиглаж болно. Унждаг цэсүүд нь байршлыг тогтоохдоо ороох элемент шаарддаг тул доор үзүүлсэн шиг тусад нь .nav-itemболон үүрлэсэн элементүүдийг ашиглахаа мартуузай ..nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Маягтууд

Төрөл бүрийн маягтын удирдлага болон бүрэлдэхүүн хэсгүүдийг navbar дотор байрлуул:

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

Ашиглалтын шууд туслах элементүүд нь .navbarуян хатан байрлалтай байх ба өгөгдмөл байдлаар justify-content: space-between. Энэ зан үйлийг тохируулахын тулд шаардлагатай бол нэмэлт уян хатан хэрэгслийг ашиглана уу.

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

Оролтын бүлгүүд бас ажилладаг. Хэрэв таны навигацийн талбар нь бүхэл бүтэн маягт эсвэл ихэвчлэн маягт байвал та <form>элементийг контейнер болгон ашиглаж, HTML-г хадгалах боломжтой.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Төрөл бүрийн товчлууруудыг эдгээр навигацийн маягтуудын нэг хэсэг болгон дэмждэг. Энэ нь босоо шугамын хэрэгслүүдийг өөр өөр хэмжээтэй элементүүдийг зэрэгцүүлэхэд ашиглаж болно гэдгийг сануулж байна.

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Текст

Navbars-ийн тусламжтайгаар текстийн хэсэг агуулж болно .navbar-text. Энэ анги нь текстийн мөрийн босоо байрлал болон хэвтээ зайг тохируулдаг.

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

Шаардлагатай бол бусад бүрэлдэхүүн хэсгүүд болон хэрэгслүүдтэй хольж, тааруулна.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Өнгөний схемүүд

background-colorСэдвийн хичээлүүд болон хэрэгслүүдийн хослолын ачаар navbar дээр сэдэв оруулах нь хэзээ ч амар байгаагүй . .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>

Контейнер

Хэдийгээр энэ нь шаардлагагүй ч гэсэн та хуудасны голд оруулахын тулд navbar-г a-д ороож болно, .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>

Таны navbar дээрх агуулгыг хэр өргөнөөр харуулахыг өөрчлөхийн тулд ямар ч хариу үйлдэл үзүүлэх савыг ашиглана уу.

<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: autooverflow-xauto

Хамгийн оновчтой зайд зориулсан нэмэлт маржин хэрэгслүүдтэй хамт .navbar-nav-scrollашиглах жишээ navbar энд байна.style="--bs-scroll-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Хариуцлагатай зан үйл

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

Хэзээ ч нурдаггүй navbars .navbar-expand-ийн хувьд navbar дээр анги нэмнэ үү. Үргэлж унадаг navbar-ийн хувьд ямар ч .navbar-expandанги нэмж болохгүй.

Тоглер

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">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Зүүн талд брэндийн нэр, баруун талд сэлгэн залгагчтай:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Зүүн талд нь унтраалга, баруун талд нь брэндийн нэр:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Гадаад контент

Заримдаа та collapse залгаасыг ашиглан .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Онолын хувьд энэ нь туслах технологийн хэрэглэгчдэд шилжүүлэгчээс өөрийн удирддаг сав руу шууд үсрэх боломжийг олгодог боловч одоогоор үүнийг дэмжих дэмжлэг маш бага байна.

Offcanvas

Өргөтгөх болон хумигддаг навигацийн самбараа offcanvas залгаасын тусламжтайгаар гадуурх шургуулга болгон хувирга. Бид offcanvas-ийн үндсэн хэв маягийг хоёуланг нь өргөтгөж, .navbar-expand-*динамик, уян хатан навигацийн хажуугийн самбар үүсгэхийн тулд ангиудаа ашигладаг.

Доорх жишээнд бүх таслах цэгүүд дээр үргэлж хумигдсан байдаг offcanvas navbar үүсгэхийн тулд .navbar-expand-*ангийг бүхэлд нь орхи.

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

Тодорхой таслах цэг дээр ердийн navbar болж өргөждөг offcanvas navbar үүсгэхийн тулд -г lgашиглана уу .navbar-expand-lg.

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

Сасс

Хувьсагч

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

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

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

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

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

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

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

Гогцоо

Хариуцлагатай navbar өргөтгөх/буулгах ангиудыг (жишээ нь, ) газрын зурагтай .navbar-expand-lgнэгтгэж, доторх давталтаар үүсгэнэ .$breakpointsscss/_navbar.scss

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

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

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

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

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

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

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

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

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