BS tugmalar guruhi
Tugmalar guruhi
Bootstrap bir qator tugmalarni (bitta qatorda) tugmalar guruhiga birlashtirish imkonini beradi:
Tugmalar guruhini yaratish uchun .btn-group klassiga ega <div> elementidan foydalaning:
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
O‘zingiz sinab ko‘ring »
Maslahat: Guruhdagi har bir tugmaga alohida o‘lcham berish o‘rniga, guruhdagi barcha tugmalarning o‘lchamini belgilash uchun .btn-group-lg|sm|xs klassidan foydalaning:
Misol
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
O‘zingiz sinab ko‘ring »
Vertikal tugmalar guruhi
Bootstrap vertikal tugmalar guruhlarini ham qo‘llab-quvvatlaydi:
Vertikal tugmalar guruhini yaratish uchun .btn-group-vertical klassidan foydalaning:
Misol
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
O‘zingiz sinab ko‘ring »
Kenglik bo‘yicha tekislangan tugmalar guruhlari
Ekranning butun kengligini egallash uchun .btn-group-justified klassidan foydalaning:
<a> elementlari bilan misol:
Misol
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
O‘zingiz sinab ko‘ring »
Eslatma: <button> elementlari uchun har bir tugmani .btn-group klassi ichiga o‘rashingiz kerak:
Misol
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
O‘zingiz sinab ko‘ring »
Ichma-ich joylashgan tugmalar guruhlari va ochiluvchi menyular
Ochiluvchi menyular yaratish uchun tugmalar guruhlarini ichma-ich joylashtiring:
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bo‘lingan tugmali ochiluvchi menyular (split button)
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!