BS4 navigatsiya paneli (navbar)
Navigatsiya panellari
Navigatsiya paneli — sahifaning yuqori qismida joylashadigan navigatsiya sarlavhasi:
Oddiy navigatsiya paneli
Bootstrap yordamida navigatsiya paneli ekran o‘lchamiga qarab kengayishi yoki yig‘ilishi mumkin.
Standart navigatsiya paneli .navbar klassi va undan keyin keladigan moslashuvchan yig‘ilish klassi yordamida yaratiladi: .navbar-expand-xl|lg|md|sm (navigatsiya panelini extra large, large, medium yoki small ekranlarda vertikal joylashtiradi).
Navigatsiya paneli ichiga havolalar qo‘shish uchun class="navbar-nav" klassiga ega <ul> elementidan foydalaning. So‘ngra .nav-item klassiga ega <li> elementlarini, ularning ichida esa .nav-link klassiga ega <a> elementini qo‘shing:
Misol
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
O‘zingiz sinab ko‘ring »
Vertikal navigatsiya paneli
Vertikal navigatsiya paneli yaratish uchun .navbar-expand-xl|lg|md|sm klassini olib tashlang:
Misol
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
O‘zingiz sinab ko‘ring »
Markazga tekislangan navigatsiya paneli
Navigatsiya panelini markazga tekislash uchun .justify-content-center klassini qo‘shing.
Quyidagi misolda navigatsiya paneli o‘rta, katta va juda katta ekranlarda markazga tekislanadi. Kichik ekranlarda esa u vertikal va chapga tekislangan holda ko‘rsatiladi (.navbar-expand-sm klassi tufayli):
Misol
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
O‘zingiz sinab ko‘ring »
Rangli navigatsiya paneli
Navigatsiya panelining fon rangini o‘zgartirish uchun istalgan .bg-color klassidan foydalaning (.bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark va .bg-light)
Maslahat: .navbar-dark klassi yordamida navigatsiya panelidagi barcha havolalarga oq matn rangini bering yoki qora matn rangini qo‘shish uchun .navbar-light klassidan foydalaning.
Misol
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</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>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
O‘zingiz sinab ko‘ring »
Faol/nofaol holat: Joriy havolani ajratib ko‘rsatish uchun <a> elementiga .active klassini, havolani bosib bo‘lmasligini bildirish uchun esa .disabled klassini qo‘shing.
Brend / logotip
.navbar-brand klassi sahifangizning brendi/logotipi/loyiha nomini ajratib ko‘rsatish uchun ishlatiladi:
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
O‘zingiz sinab ko‘ring »
.navbar-brand klassi rasmlarda ishlatilganda Bootstrap 4 rasmni navigatsiya paneliga vertikal bo‘yicha moslab, avtomatik ravishda bezaydi.
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
O‘zingiz sinab ko‘ring »
Navigatsiya panelini yig‘ish
Ko‘pincha, ayniqsa kichik ekranlarda, navigatsiya havolalarini yashirib, ularning o‘rniga bosilganda havolalarni ko‘rsatadigan tugma qo‘yish kerak bo‘ladi.
Yig‘iladigan navigatsiya panelini yaratish uchun class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget" ga ega tugmadan foydalaning. So‘ngra navigatsiya paneli kontentini (havolalar va h.k.) class="collapse navbar-collapse" ga ega div elementi ichiga o‘rang va unga tugmaning data-target qiymatiga mos keladigan id bering: "thetarget".
Misol
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
O‘zingiz sinab ko‘ring »
Maslahat: Navigatsiya paneli havolalarini HAR DOIM yashirib, faqat almashtirish tugmasini (toggler) ko‘rsatish uchun .navbar-expand-md klassini olib tashlashingiz ham mumkin.
Ochiluvchi menyuli navigatsiya paneli
Navigatsiya panellari ochiluvchi menyularni ham o‘z ichiga olishi mumkin:
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
O‘zingiz sinab ko‘ring »
Navigatsiya panelidagi formalar va tugmalar
Kiritish maydonlari va tugmalarni yonma-yon guruhlash uchun class="form-inline" ga ega <form> elementini qo‘shing:
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
O‘zingiz sinab ko‘ring »
Kiritish maydoni yoniga belgi (icon) yoki yordamchi matn biriktirish uchun .input-group-prepend yoki .input-group-append kabi boshqa input klasslaridan ham foydalanishingiz mumkin. Bu klasslar haqida Bootstrap kiritish maydonlari bobida batafsil bilib olasiz.
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
O‘zingiz sinab ko‘ring »
Navigatsiya panelidagi matn
Navigatsiya paneli ichidagi havola bo‘lmagan har qanday elementlarni vertikal bo‘yicha tekislash uchun .navbar-text klassidan foydalaning (to‘g‘ri ichki chekinish va matn rangini ta’minlaydi).
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
O‘zingiz sinab ko‘ring »
Qotirilgan navigatsiya paneli
Navigatsiya panelini sahifaning yuqori yoki pastki qismiga qotirib qo‘yish ham mumkin.
Qotirilgan navigatsiya paneli sahifa aylantirilishidan qat’i nazar, belgilangan joyda (yuqorida yoki pastda) ko‘rinib turadi.
.fixed-top klassi navigatsiya panelini sahifaning yuqori qismiga qotiradi:
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
O‘zingiz sinab ko‘ring »
Navigatsiya paneli sahifaning pastki qismida turishi uchun .fixed-bottom klassidan foydalaning:
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
O‘zingiz sinab ko‘ring »
Sahifa aylantirilib, navigatsiya panelidan o‘tib ketilganda u sahifaning yuqori qismida qotib qolishi uchun .sticky-top klassidan foydalaning. Eslatma: Bu klass IE11 va undan oldingi versiyalarda ishlamaydi (ular uni position:relative sifatida qabul qiladi).
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!