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" 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тохируулагч анги бүхий бидний сонголтууд дээр тулгуурладаг бөгөөд зохих хариу үйлдэл үзүүлэхийн тулд шилжүүлэгч ангиудыг ашиглахыг шаарддаг. 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" href="#" tabindex="-1" aria-disabled="true">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" 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>

Маягтууд

Төрөл бүрийн маягтын удирдлага болон бүрэлдэхүүн хэсгүүдийг 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>

Байршил

Navbar-г статик бус байрлалд байрлуулахын тулд манай байрлалын хэрэгслийг ашиглана уу. Дээшээ хүртэл бэхэлсэн, доод тал руу нь бэхэлсэн эсвэл дээд талд нь наасан (хуудасны хамт дээд хэсэгт нь хүртлээ гүйлгэж, тэндээ үлдэнэ) гэсэн сонголтуудыг сонго. Тогтмол навигацууд 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" 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}ангиудыг ашиглан контент нь товчлуурын ард хэзээ нурж унахыг тодорхойлох боломжтой. Бусад хэрэгслүүдтэй хослуулан та тодорхой элементүүдийг хэзээ харуулах, нуухыг хялбархан сонгох боломжтой.

Хэзээ ч нурдаггүй 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" 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>

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

Заримдаа та collapse залгаасыг ашиглан .navbar. Манай залгаас тохирох дээр ажилладаг тул idүүнийг data-bs-targetхялбархан хийж болно!

Collapsed content

Toggleable via the navbar brand.

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

Сасс

Хувьсагч

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