BS4 navigatsiya menyulari (navs)
Navigatsiya menyulari
Oddiy gorizontal menyu yaratmoqchi bo‘lsangiz, <ul> elementiga .nav klassini, har bir <li> ga .nav-item klassini, ularning havolalariga esa .nav-link klassini qo‘shing:
Misol
<ul class="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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
O‘zingiz sinab ko‘ring »
Tekislangan navigatsiya
Navigatsiyani markazga tekislash uchun .justify-content-center klassini, o‘ngga tekislash uchun esa .justify-content-end klassini qo‘shing.
Misol
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
O‘zingiz sinab ko‘ring »
Vertikal navigatsiya
Vertikal navigatsiya yaratish uchun .flex-column klassini qo‘shing:
Tablar (tabs)
.nav-tabs klassi yordamida navigatsiya menyusini navigatsiya tablariga aylantiring. Faol/joriy havolaga .active klassini qo‘shing. Agar tablar almashtiriladigan bo‘lishini istasangiz, ushbu sahifadagi oxirgi misolni ko‘ring.
Misol
<ul class="nav nav-tabs">
<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>
O‘zingiz sinab ko‘ring »
Pills (yumaloq tugmalar)
.nav-pills klassi yordamida navigatsiya menyusini navigatsiya pill’lariga (yumaloq tugmalarga) aylantiring. Agar pill’lar almashtiriladigan bo‘lishini istasangiz, ushbu sahifadagi oxirgi misolni ko‘ring.
Misol
<ul class="nav nav-pills">
<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>
O‘zingiz sinab ko‘ring »
Kenglik bo‘yicha tekislangan tablar/pill’lar
.nav-justified klassi yordamida tablar/pill’larni kenglik bo‘yicha tekislang (teng kenglikda):
Misol
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli pill’lar
Misol
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli tablar
Misol
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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>
<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>
O‘zingiz sinab ko‘ring »
Almashtiriladigan / dinamik tablar
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tablarni almashtiriladigan qilish uchun har bir havolaga data-toggle="tab" atributini qo‘shing. So‘ngra har bir tab uchun noyob ID ga ega .tab-pane klassini qo‘shing va ularni .tab-content klassiga ega <div> elementi ichiga o‘rang.
Agar tablar ustiga bosilganda ular asta-sekin paydo bo‘lishi va yo‘qolishini (fade) istasangiz, .tab-pane ga
.fade klassini qo‘shing:
Misol
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
O‘zingiz sinab ko‘ring »
Almashtiriladigan / dinamik pill’lar
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Xuddi shu kod pill’lar uchun ham amal qiladi; faqat data-toggle atributini data-toggle="pill" ga o‘zgartiring:
Misol
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap 4 Nav bo‘yicha to‘liq ma’lumotnoma
Barcha tab parametrlari, metodlari va hodisalari bo‘yicha to‘liq ma’lumotnoma uchun Bootstrap 4 JS Tab ma’lumotnomamizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!