BS4 tugmalar guruhi
Tugmalar guruhi
Bootstrap 4 bir qator tugmalarni tugmalar guruhiga (bitta qatorda) 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, katta tugmalar guruhi uchun .btn-group-lg klassidan, kichik tugmalar guruhi uchun esa .btn-group-sm klassidan foydalaning:
Katta tugmalar:
Standart tugmalar:
Kichik tugmalar:
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 4 vertikal tugmalar guruhini 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 »
Ichma-ich joylashgan tugmalar guruhlari va ochiluvchi menyular
Ochiluvchi menyular yaratish uchun tugmalar guruhlarini ichma-ich joylashtiring (ochiluvchi menyular haqida keyingi boblarda batafsil bilib olasiz):
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
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bo‘lingan (split) tugmali ochiluvchi menyular
Misol
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli vertikal tugmalar guruhi
Misol
<div class="btn-group-vertical">
<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
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
Yonma-yon joylashgan tugmalar guruhlari
Tugmalar guruhlari standart holatda "inline" bo‘ladi, shu sababli bir nechta guruh bo‘lsa, ular yonma-yon joylashadi:
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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!