in English

ნავიბარი

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

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

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

  • Navbars საჭიროებს შეფუთვას საპასუხო კოლაფსისთვის და .navbarფერის სქემის კლასებისთვის..navbar-expand{-sm|-md|-lg|-xl}
  • Navbars და მათი შინაარსი ნაგულისხმევად სითხეა. გამოიყენეთ სურვილისამებრ კონტეინერები მათი ჰორიზონტალური სიგანის შესაზღუდად.
  • გამოიყენეთ ჩვენი ინტერვალის და მოქნილი კომუნალური კლასები, რათა აკონტროლოთ მანძილი და გასწორება ნავი ზოლებში.
  • Navbars ნაგულისხმევად რეაგირებს, მაგრამ თქვენ შეგიძლიათ მარტივად შეცვალოთ ისინი ამის შესაცვლელად. საპასუხო ქცევა დამოკიდებულია ჩვენს Collapse JavaScript დანამატზე.
  • ნავიგაციის ზოლები ნაგულისხმევად იმალება ბეჭდვისას. აიძულეთ ისინი .d-printდაიბეჭდოს .navbar. იხილეთ ჩვენების სასარგებლო კლასი.
  • უზრუნველყავით ხელმისაწვდომობა ელემენტის გამოყენებით ან, თუ იყენებთ უფრო ზოგად ელემენტს , <nav>როგორიცაა .<div>role="navigation"
ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

მხარდაჭერილი შინაარსი

Navbars მოყვება ჩაშენებული მხარდაჭერა რამდენიმე ქვეკომპონენტისთვის. საჭიროებისამებრ აირჩიეთ შემდეგი:

  • .navbar-brandთქვენი კომპანიის, პროდუქტის ან პროექტის სახელისთვის.
  • .navbar-navსრული სიმაღლის და მსუბუქი ნავიგაციისთვის (ჩაშვების მხარდაჭერის ჩათვლით).
  • .navbar-togglerჩვენს კოლაფსის დანამატთან და ნავიგაციის გადართვის სხვა ქცევებთან გამოსაყენებლად.
  • .form-inlineნებისმიერი ფორმის კონტროლისა და მოქმედებისთვის.
  • .navbar-textვერტიკალურად ორიენტირებული ტექსტის სტრიქონების დასამატებლად.
  • .collapse.navbar-collapseნავიბარის შიგთავსის დაჯგუფებისა და დამალვისთვის მშობლის წყვეტის წერტილის მიხედვით.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ეს მაგალითი იყენებს ფერის ( bg-light) და ინტერვალის ( my-2, my-lg-0, mr-sm-0, my-sm-0) სასარგებლო კლასებს.

ბრენდი

.navbar-brandშეიძლება გამოყენებულ იქნას უმეტეს ელემენტებზე, მაგრამ წამყვანი მუშაობს საუკეთესოდ, რადგან ზოგიერთ ელემენტს შეიძლება დასჭირდეს სასარგებლო კლასები ან მორგებული სტილი .

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

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

სურათების დამატება, .navbar-brandსავარაუდოდ, ყოველთვის მოითხოვს მორგებულ სტილებს ან კომუნალურ პროგრამებს სათანადო ზომისთვის. აქ არის რამდენიმე მაგალითი საჩვენებლად.

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Navbar ნავიგაციის ბმულები ეფუძნება ჩვენს .navვარიანტებს საკუთარი მოდიფიკატორის კლასით და მოითხოვს გადამრთველი კლასების გამოყენებას სათანადო რეაგირებადი სტილისთვის. ნავიგაცია ნავიგაციაში ასევე გაიზრდება და დაიკავებს რაც შეიძლება მეტ ჰორიზონტალურ სივრცეს, რათა თქვენი ნავიგაციის შიგთავსი უსაფრთხოდ იყოს გასწორებული.

აქტიური მდგომარეობები — ერთად .active— მიმდინარე გვერდის აღსანიშნავად შეიძლება გამოყენებულ იქნას პირდაპირ .nav-links-ზე ან მათ უშუალო მშობელზე .nav-item.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

და რადგან ჩვენ ვიყენებთ კლასებს ჩვენი ნავიგებისთვის, თქვენ შეგიძლიათ თავიდან აიცილოთ სიაზე დაფუძნებული მიდგომა მთლიანად, თუ გსურთ.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

თქვენ ასევე შეგიძლიათ გამოიყენოთ ჩამოსაშლელი ფაილები თქვენს ნავიგბარში. ჩამოსაშლელი მენიუები საჭიროებს შესაფუთ ელემენტს პოზიციონირებისთვის, ასე რომ, დარწმუნდით, რომ გამოიყენეთ ცალკეული და ჩადგმული ელემენტები .nav-itemდა .nav-linkროგორც ეს ნაჩვენებია ქვემოთ.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

ფორმები

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

დაუყოვნებელი ბავშვის ელემენტების .navbarგამოყენება flex განლაგება და ნაგულისხმევი იქნება justify-content: space-between. გამოიყენეთ დამატებითი flex უტილიტები , როგორც საჭიროა ამ ქცევის კორექტირებისთვის.

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

შეყვანის ჯგუფებიც მუშაობს:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <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="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

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

ნავიბარის თემატიკა არასოდეს ყოფილა ადვილი თემატური კლასებისა და background-colorუტილიტების კომბინაციის წყალობით. აირჩიეთ .navbar-lightღია ფონის ფერებით გამოსაყენებლად ან .navbar-darkმუქი ფონის ფერებისთვის. შემდეგ, მორგება .bg-*კომუნალური საშუალებებით.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

კონტეინერები

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

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

როდესაც კონტეინერი თქვენს ნავიგბარშია, მისი ჰორიზონტალური შიგთავსი ამოღებულია თქვენს მითითებულ .navbar-expand{-sm|-md|-lg|-xl}კლასზე დაბალ წერტილებზე. ეს უზრუნველყოფს, რომ არ გავაორმაგოთ ზედმეტად ჩასმა ქვედა ხედის პორტებზე, როდესაც თქვენი ნავი ზოლი ჩაკეცილია.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

განთავსება

გამოიყენეთ ჩვენი პოზიციის უტილიტები , რათა განათავსოთ ნავი ზოლები არასტატიკური პოზიციებზე. აირჩიეთ ზევით დაფიქსირებული, ქვემოზე დამაგრებული ან ზევით მიმაგრებული (გადახვევა გვერდთან ერთად, სანამ არ მიაღწევს ზედა, შემდეგ რჩება). ფიქსირებული navbars გამოიყენება position: fixed, რაც იმას ნიშნავს, რომ ისინი ამოღებულნი არიან DOM-ის ნორმალური ნაკადიდან და შეიძლება მოითხოვონ მორგებული CSS (მაგ., padding-top) <body>სხვა ელემენტებთან გადახურვის თავიდან ასაცილებლად.

ასევე გაითვალისწინეთ, რომ .sticky-topიყენებს position: sticky, რომელიც არ არის სრულად მხარდაჭერილი ყველა ბრაუზერში .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

გადახვევა

დაამატეთ .navbar-nav-scrollნავიგაციის .navbar-collapseზოლის ქვეკომპონენტს (ან სხვა ნავიგაციის ქვეკომპონენტს), რათა ჩაეშვათ ვერტიკალური გადახვევა ჩაკეცილი ნავიბარის შიგთავსში. ნაგულისხმევად, გადახვევა იწყება 75vh(ან ხედის სიმაღლის 75%), მაგრამ თქვენ შეგიძლიათ ეს გადალახოთ inline ან მორგებული სტილებით. უფრო დიდ ხედებში, როდესაც ნავიგალური ზოლი გაფართოვდება, შინაარსი გამოჩნდება ისე, როგორც ნაგულისხმევი ნავიგალური პანელი.

გთხოვთ, გაითვალისწინოთ, რომ ამ ქცევას აქვს პოტენციური ნაკლი - overflowროდესაც პარამეტრი overflow-y: auto(აუცილებელია კონტენტის აქ გადახვევა), overflow-xარის ტოლფასი auto, რომელიც ამოიჭრება ზოგიერთი ჰორიზონტალური კონტენტი.

აქ არის ნავიბარის მაგალითი, რომელიც იყენებს .navbar-nav-scroll, style="max-height: 100px;"ოპტიმალური დაშორების მიზნით.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-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">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

საპასუხო ქცევები

Navbars-ებს შეუძლიათ გამოიყენონ .navbar-toggler, .navbar-collapseდა .navbar-expand{-sm|-md|-lg|-xl}კლასები იმის დასადგენად, თუ როდის იშლება მათი შინაარსი ღილაკის მიღმა. სხვა კომუნალურ პროგრამებთან ერთად, შეგიძლიათ მარტივად აირჩიოთ კონკრეტული ელემენტების ჩვენება ან დამალვა.

ნავი ზოლებისთვის, რომლებიც არასოდეს იშლება, დაამატეთ .navbar-expandკლასი navbar-ზე. ნავი ზოლებისთვის, რომლებიც ყოველთვის იშლება, არ დაამატოთ არცერთი .navbar-expandკლასი.

გადამრთველი

Navbar-ის გადამრთველები ნაგულისხმევად არის გასწორებული მარცხნივ, მაგრამ თუ ისინი მიჰყვებიან ძმურ ელემენტს, როგორიცაა .navbar-brand, ისინი ავტომატურად გასწორდებიან უკიდურეს მარჯვნივ. თქვენი მარკირების შებრუნება შეცვლის გადამრთველის განთავსებას. ქვემოთ მოცემულია სხვადასხვა გადართვის სტილის მაგალითები.

არ არის .navbar-brandნაჩვენები ყველაზე პატარა წყვეტის წერტილში:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ბრენდის სახელით ნაჩვენებია მარცხნივ და გადამრთველი მარჯვნივ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

გადამრთველით მარცხნივ და ბრენდის სახელით მარჯვნივ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

გარე შინაარსი

ხანდახან გსურთ გამოიყენოთ დაშლის დანამატი კონტეინერის ელემენტის გასააქტიურებლად კონტენტისთვის, რომელიც სტრუქტურულად ზის გარეთ .navbar. იმის გამო, რომ ჩვენი დანამატი მუშაობს idდა data-targetემთხვევა, ეს მარტივად კეთდება!

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

როდესაც ამას აკეთებთ, ჩვენ გირჩევთ ჩართოთ დამატებითი JavaScript, რათა ფოკუსი პროგრამულად გადაიტანოთ კონტეინერში, როდესაც ის გახსნილია. წინააღმდეგ შემთხვევაში, კლავიატურის მომხმარებლებს და დამხმარე ტექნოლოგიების მომხმარებლებს, სავარაუდოდ, გაუჭირდებათ ახლად გამოვლენილი კონტენტის პოვნა - განსაკუთრებით იმ შემთხვევაში, თუ კონტეინერი, რომელიც გახსნილია , დოკუმენტის სტრუქტურაში გადამრთველის წინ მოდის. ჩვენ ასევე გირჩევთ დარწმუნდეთ, რომ გადამრთველს აქვს aria-controlsატრიბუტი, რომელიც მიუთითებს idკონტენტის კონტეინერზე. თეორიულად, ეს საშუალებას აძლევს დამხმარე ტექნოლოგიების მომხმარებლებს პირდაპირ გადამრთველიდან გადახტეს კონტეინერზე, რომელსაც ის აკონტროლებს – მაგრამ ამის მხარდაჭერა ამჟამად საკმაოდ ცალმხრივია.