ნავიბარი
დოკუმენტაცია და მაგალითები 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.0/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.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>
Navbar ნავიგაციის ბმულები ეფუძნება ჩვენს .nav
ვარიანტებს საკუთარი მოდიფიკატორის კლასით და მოითხოვს გადამრთველი კლასების გამოყენებას სათანადო რეაგირებადი სტილისთვის. ნავიგაცია ნავიგაციაში ასევე გაიზრდება და დაიკავებს რაც შეიძლება მეტ ჰორიზონტალურ სივრცეს, რათა თქვენი ნავიგაციის შიგთავსი უსაფრთხოდ იყოს გასწორებული.
აქტიური მდგომარეობები - ერთად .active
- მიმდინარე გვერდის აღსანიშნავად შეიძლება გამოყენებულ იქნას უშუალოდ .nav-link
s-ზე ან მათ უშუალო მშობელზე .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" 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>
საჭიროებისამებრ გაასწორეთ თქვენი შიდა ფორმების შიგთავსი კომუნალურ პროგრამებთან.
<nav class="navbar navbar-light bg-light justify-content-between">
<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-*
კომუნალური საშუალებებით.
მიუხედავად იმისა, რომ ეს არ არის საჭირო, შეგიძლიათ გადაიტანოთ ნავი ზოლი .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">
<h4 class="text-white">Collapsed content</h4>
<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>