Source

ნავიბარი

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

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

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

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

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

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

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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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" href="#">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.1/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.1/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" href="#">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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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გამოიყენება მოქნილი განლაგებით და ნაგულისხმევად იქნება justify-content: 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გვერდის ცენტრში, ან დაამატოთ ის შიგნით, რომ მხოლოდ ფიქსირებული ან სტატიკური ზედა ნავი ზოლის შიგთავსის ცენტრში მოათავსოთ .

<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>

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

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" href="#">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" href="#">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" href="#">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>

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

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

<div class="pos-f-t">
  <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>