BS5 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-xxl|xl|lg|md|sm (navigatsiya panelini xxlarge, extra large, large, medium yoki small ekranlarda vertikal joylashtiradi).
Navigatsiya paneli ichiga havolalar qo‘shish uchun class="navbar-nav" klassiga ega <ul> elementidan (yoki <div> dan) 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">
<div class="container-fluid">
<!-- 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>
</div>
</nav>
O‘zingiz sinab ko‘ring »
Vertikal navigatsiya paneli
Har doim vertikal bo‘ladigan navigatsiya panelini yaratish uchun .navbar-expand-* klassini olib tashlang:
Misol
<!-- A grey vertical navbar -->
<nav class="navbar bg-light">
...
</nav>
O‘zingiz sinab ko‘ring »
Markazga tekislangan navigatsiya paneli
Navigatsiya panelini markazga tekislash uchun .justify-content-center klassini qo‘shing:
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">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" 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>
</div>
</nav>
<!-- Black background with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue background 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">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
O‘zingiz sinab ko‘ring »
.navbar-brand klassi rasmlar bilan ishlatilganda Bootstrap 5 rasmni navigatsiya paneliga vertikal bo‘yicha moslab, avtomatik ravishda bezaydi.
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</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">
<div class="container-fluid">
<span class="navbar-text">Navbar text</span>
</div>
</nav>
O‘zingiz sinab ko‘ring »
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-bs-toggle="collapse" and data-bs-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-bs-target qiymatiga mos keladigan id bering: "thetarget".
Misol
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<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>
</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
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
O‘zingiz sinab ko‘ring »
Navigatsiya panelidagi formalar va tugmalar
Navigatsiya paneli ichiga formalarni ham joylashtirishingiz mumkin:
Misol
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</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!