გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
Check
in English

ნავიბარი

დოკუმენტაცია და მაგალითები Bootstrap-ის ძლიერი, საპასუხო ნავიგაციის სათაურის, navbar-ისთვის. მოიცავს ბრენდინგის, ნავიგაციის და სხვათა მხარდაჭერას, მათ შორის ჩვენი კოლაფსის მოდულის მხარდაჭერას.

ამ გვერდზე

Როგორ მუშაობს

აქ არის ის, რაც უნდა იცოდეთ სანამ დაიწყებთ navbar-ს:

  • Navbars საჭიროებს შეფუთვას საპასუხო კოლაფსისთვის და .navbarფერის სქემის კლასებისთვის..navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbars და მათი შინაარსი ნაგულისხმევად სითხეა. შეცვალეთ კონტეინერი , რათა შეზღუდოთ მათი ჰორიზონტალური სიგანე სხვადასხვა გზით.
  • გამოიყენეთ ჩვენი ინტერვალის და მოქნილი კომუნალური კლასები, რათა აკონტროლოთ მანძილი და გასწორება ნავი ზოლებში.
  • Navbars ნაგულისხმევად რეაგირებს, მაგრამ თქვენ შეგიძლიათ მარტივად შეცვალოთ ისინი ამის შესაცვლელად. საპასუხო ქცევა დამოკიდებულია ჩვენს Collapse JavaScript დანამატზე.
  • უზრუნველყავით ხელმისაწვდომობა ელემენტის გამოყენებით ან, თუ იყენებთ უფრო ზოგად ელემენტს , <nav>როგორიცაა .<div>role="navigation"
  • მიუთითეთ მიმდინარე ელემენტი aria-current="page"მიმდინარე გვერდისთვის ან aria-current="true"ნაკრების მიმდინარე ელემენტის გამოყენებით.
  • სიახლე v5.2.0- ში: Navbars შეიძლება იყოს თემატური CSS ცვლადები, რომლებიც ასახულია .navbarსაბაზო კლასში. .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>

ფორმები

განათავსეთ სხვადასხვა ფორმის კონტროლი და კომპონენტები navbar-ში:

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გამოყენება flex განლაგება და ნაგულისხმევი იქნება justify-content: space-between. გამოიყენეთ დამატებითი flex უტილიტები , როგორც საჭიროა ამ ქცევის კორექტირებისთვის.

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>

ასევე მუშაობს შეყვანის ჯგუფები. თუ თქვენი navbar არის მთლიანი ფორმა, ან ძირითადად ფორმა, შეგიძლიათ გამოიყენოთ <form>ელემენტი კონტეინერად და შეინახოთ გარკვეული HTML.

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

სხვადასხვა ღილაკები ასევე მხარდაჭერილია, როგორც ამ ნავიბარის ფორმების ნაწილი. ეს ასევე შესანიშნავი შეხსენებაა, რომ ვერტიკალური განლაგების საშუალებები შეიძლება გამოყენებულ იქნას სხვადასხვა ზომის ელემენტების გასასწორებლად.

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

ტექსტი

Navbars შეიძლება შეიცავდეს ტექსტის ნაწილებს .navbar-text. ეს კლასი არეგულირებს ვერტიკალურ გასწორებას და ჰორიზონტალურ ინტერვალს ტექსტის სტრიქონებისთვის.

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

საჭიროებისამებრ შეურიეთ და შეადარეთ სხვა კომპონენტებთან და კომუნალურ მოწყობილობებთან.

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

ფერადი სქემები

სიახლე v5.2.0- ში: Navbar-ის თემა ახლა იკვებება CSS ცვლადებით და .navbar-lightმოძველებულია. CSS ცვლადები გამოიყენება .navbar, ნაგულისხმევი "მსუბუქი" გარეგნობისთვის და მათი გადაფარვა შესაძლებელია .navbar-dark.

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>

განთავსება

გამოიყენეთ ჩვენი პოზიციის უტილიტები , რათა განათავსოთ ნავი ზოლები არასტატიკური პოზიციებზე. აირჩიეთ ზევით ფიქსირებული, ქვემოდან დაფიქსირებული, ზევით მიმაგრებული (გვერდთან ერთად გადახვევა, სანამ ზევით არ მიაღწევს, შემდეგ რჩება იქ), ან ქვევით (გადახვევა გვერდით, სანამ ბოლოში არ მიაღწევს, შემდეგ რჩება იქ).

ფიქსირებული navbars გამოიყენება 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-ზე. ნავი ზოლებისთვის, რომლებიც ყოველთვის იშლება, არ დაამატოთ არცერთი .navbar-expandკლასი.

გადამრთველი

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 უჯრად offcanvas კომპონენტით . ჩვენ ვაფართოებთ როგორც offcanvas-ის ნაგულისხმევ სტილებს და ვიყენებთ ჩვენს .navbar-expand-*კლასებს დინამიური და მოქნილი ნავიგაციის გვერდითი ზოლის შესაქმნელად.

ქვემოთ მოცემულ მაგალითში, offcanvas navbar-ის შესაქმნელად, რომელიც ყოველთვის იშლება ყველა წყვეტის წერტილში, .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 navbar-ის შესაქმნელად, რომელიც გაფართოვდება ნორმალურ ნავიგბარში კონკრეტულ წყვეტის წერტილში, როგორიცაა 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-ის გამოყენებისას, გაითვალისწინეთ, რომ შეიძლება დაგჭირდეთ მუქი ფონი გქონდეთ offcanvas კონტენტზე, რათა თავიდან აიცილოთ ტექსტი გაუგებარი. ქვემოთ მოყვანილ მაგალითში ჩვენ ვამატებთ .navbar-darkდა , .bg-darkto , to და to სწორი სტილისთვის მუქი ტილოზე..navbar.text-bg-dark.offcanvas.dropdown-menu-dark.dropdown-menu.btn-close-white.btn-close

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

CSS

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, navbars ახლა იყენებენ ადგილობრივ CSS ცვლადებს .navbarრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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-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;

სასი მარყუჟი

საპასუხო ნავიბარის გაფართოება/ჩაკეცვა კლასები (მაგ., .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;
          }
        }
      }
    }
  }
}