Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS tablar/pill’lar

ULASHISH

Menyular

Aksariyat veb-sahifalarda qandaydir menyu bo‘ladi.

HTML’da menyu ko‘pincha tartiblanmagan ro‘yxat <ul> ko‘rinishida belgilanadi (va keyin bezatiladi), masalan:

<ul>   <li><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>

Agar yuqoridagi ro‘yxatdan gorizontal menyu yaratmoqchi bo‘lsangiz, <ul> ga .list-inline klassini qo‘shing:

<ul class="list-inline">
O‘zingiz sinab ko‘ring »

Yoki yuqoridagi menyuni Bootstrap’ning tablari va pill’lari yordamida ko‘rsatishingiz mumkin (quyida ko‘ring).

Eslatma: Tablar va pill’larni qanday qilib almashtiriladigan/dinamik qilishni bilish uchun ushbu sahifadagi oxirgi misolni ko‘ring.

Tablar (tabs)

Tablar <ul class="nav nav-tabs"> yordamida yaratiladi:

Maslahat: Joriy sahifani ham <li class="active"> bilan belgilang.

Quyidagi misolda navigatsiya tablari yaratiladi:

Misol

<ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli tablar

Tablar ochiluvchi menyularni ham o‘z ichiga olishi mumkin.

Quyidagi misolda "Menu 1" ga ochiluvchi menyu qo‘shiladi:

Misol

<ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1     <span class="caret"></span></a>     <ul class="dropdown-menu">       <li><a href="#">Submenu 1-1</a></li>       <li><a href="#">Submenu 1-2</a></li>       <li><a href="#">Submenu 1-3</a></li>     </ul>   </li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>
O‘zingiz sinab ko‘ring »

Pills (yumaloq tugmalar)

Pill’lar <ul class="nav nav-pills"> yordamida yaratiladi. Joriy sahifani ham <li class="active"> bilan belgilang:

Misol

<ul class="nav nav-pills">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>
O‘zingiz sinab ko‘ring »

Vertikal pill’lar

Pill’larni vertikal holatda ham ko‘rsatish mumkin. Buning uchun shunchaki .nav-stacked klassini qo‘shing:

Misol

<ul class="nav nav-pills nav-stacked">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>
O‘zingiz sinab ko‘ring »

Qator ichidagi vertikal pill’lar

Text...

Text...

Text...

Quyidagi misolda vertikal pill menyusi oxirgi ustunga joylashtiriladi. Shunday qilib, katta ekranda menyu o‘ng tomonda ko‘rsatiladi. Kichik ekranda esa kontent avtomatik ravishda bir ustunli maketga moslashadi:

Misol

<div class="col-md-3">   <ul class="nav nav-pills nav-stacked">     <li class="active"><a href="#">Home</a></li>     <li><a href="#">Menu 1</a></li>     <li><a href="#">Menu 2</a></li>     <li><a href="#">Menu 3</a></li>   </ul> </div>
O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli pill’lar

Pill’lar ham ochiluvchi menyularni o‘z ichiga olishi mumkin.

Quyidagi misolda "Menu 1" ga ochiluvchi menyu qo‘shiladi:

Misol

<ul class="nav nav-pills nav-stacked">   <li class="active"><a href="#">Home</a></li>   <li class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1     <span class="caret"></span></a>     <ul class="dropdown-menu">       <li><a href="#">Submenu 1-1</a></li>       <li><a href="#">Submenu 1-2</a></li>       <li><a href="#">Submenu 1-3</a></li>     </ul>   </li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul>
O‘zingiz sinab ko‘ring »

Markazlashtirilgan tablar va pill’lar

Tablar va pill’larni markazlashtirish/kenglik bo‘yicha tekislash uchun .nav-justified klassidan foydalaning.

E’tibor bering, 768px dan kichik ekranlarda ro‘yxat elementlari ustma-ust joylashadi (kontent markazda qoladi):

Misol

<!-- Centered Tabs --> <ul class="nav nav-tabs nav-justified">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</a></li> </ul> <!-- Centered Pills --> <ul class="nav nav-pills nav-justified">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li><a href="#">Menu 3</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

<ul class="nav nav-tabs">   <li class="active"><a data-toggle="tab" href="#home">Home</a></li>   <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> </ul> <div class="tab-content">   <div id="home" class="tab-pane fade in active">     <h3>HOME</h3>     <p>Some content.</p>   </div>   <div id="menu1" class="tab-pane fade">     <h3>Menu 1</h3>     <p>Some content in menu 1.</p>   </div>   <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Some content in menu 2.</p>   </div> </div>
O‘zingiz sinab ko‘ring »

Almashtiriladigan / dinamik pill’lar

Xuddi shu kod pill’lar uchun ham amal qiladi; faqat data-toggle atributini data-toggle="pill" ga o‘zgartiring:

Misol

<ul class="nav nav-pills">   <li class="active"><a data-toggle="pill" href="#home">Home</a></li>   <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>   <li><a data-toggle="pill" href="#menu2">Menu 2</a></li> </ul> <div class="tab-content">   <div id="home" class="tab-pane fade in active">     <h3>HOME</h3>     <p>Some content.</p>   </div>   <div id="menu1" class="tab-pane fade">     <h3>Menu 1</h3>     <p>Some content in menu 1.</p>   </div>   <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Some content in menu 2.</p>   </div> </div>
O‘zingiz sinab ko‘ring »

Mashqlar yordamida o‘zingizni sinang

Mashq:

Tab menyusini yaratish uchun kerakli klassni qo‘shing.

<ul class="">
  <li><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>

Mashqni boshlash

Bootstrap navigatsiyasi bo‘yicha to‘liq ma’lumotnoma

Barcha navigatsiya klasslari bo‘yicha to‘liq ma’lumot uchun Bootstrap navigatsiya ma’lumotnomamizga o‘ting.

Tablarning barcha parametrlari (options), metodlari va hodisalari (events) bo‘yicha to‘liq ma’lumot uchun Bootstrap JS Tab ma’lumotnomamizga o‘ting.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish