بٽڻ گروپ
ھڪڙي لڪير تي بٽڻن جو ھڪڙو سلسلو گڏ ڪريو يا انھن کي عمودي ڪالمن ۾ اسٽيڪ ڪريو.
بنيادي مثال
.btn
ان سان گڏ بٽڻ جو هڪ سلسلو لپي .btn-group
.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
صحيح کي يقيني بڻايو role
۽ هڪ ليبل مهيا ڪريو
مددگار ٽيڪنالاجيز (جهڙوڪ اسڪرين ريڊرز) کي پهچائڻ لاءِ ته بٽڻن جو هڪ سلسلو گروپ ڪيو ويو آهي، هڪ مناسب role
خاصيت مهيا ڪرڻ جي ضرورت آهي. بٽڻ واري گروپن لاءِ، هي هوندو role="group"
، جڏهن ته ٽول بار کي هڪ هجڻ گهرجي role="toolbar"
.
اضافي طور تي، گروپن ۽ ٽول بارن کي هڪ واضح ليبل ڏنو وڃي، جيئن سڀ کان وڌيڪ مددگار ٽيڪنالاجيون ٻي صورت ۾ انهن جو اعلان نه ڪندا، صحيح ڪردار جي خاصيت جي موجودگي جي باوجود. هتي مهيا ڪيل مثالن ۾، اسان استعمال ڪريون ٿا aria-label
، پر متبادل جهڙوڪ aria-labelledby
پڻ استعمال ڪري سگهجن ٿيون.
اهي ڪلاس پڻ ڳنڍين جي گروپن ۾ شامل ڪري سگھجن ٿا، .nav
نيويگيشن اجزاء جي متبادل طور .
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
مخلوط انداز
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
بيان ڪيل انداز
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
چيڪ بڪس ۽ ريڊيو بٽڻ گروپ
بٽڻ جھڙو چيڪ بڪس ۽ ريڊيو ٽوگل بٽڻن کي گڏ ڪريو بيحد ڏسڻ واري بٽڻ گروپ ۾.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
بٽڻ ٽول بار
وڌيڪ پيچيده اجزاء لاءِ بٽڻ ٽول بار ۾ بٽڻ گروپن جي سيٽ کي گڏ ڪريو. يوٽيلٽي ڪلاس استعمال ڪريو جيئن ضرورت هجي گروپن، بٽڻن ۽ وڌيڪ کي ٻاهر رکڻ لاءِ.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
توهان جي ٽول بار ۾ بٽڻ گروپن سان ان پٽ گروپن کي گڏ ڪرڻ لاء آزاد محسوس ڪريو. مٿي ڏنل مثال وانگر، توهان کي امڪاني طور تي ڪجهه افاديت جي ضرورت هوندي جيتوڻيڪ شين کي صحيح طور تي جاء ڏيڻ لاء.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
ماپڻ
ھڪڙي گروپ ۾ ھر بٽڻ تي بٽڻ جي سائز جا ڪلاس لاڳو ڪرڻ بدران، صرف ھر ھڪ ۾ شامل ڪريو .btn-group-*
، .btn-group
جنھن ۾ ھر ھڪ کي شامل ڪريو جڏھن گھڻن گروپن کي نستي ڪرڻ وقت.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
نستو
.btn-group
ھڪ ٻئي جي اندر رکو جڏھن توھان چاھيو ٿا ڊراپ ڊائون .btn-group
مينيو ملائي بٽڻن جي ھڪڙي سيريز سان.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
عمودي تغير
بٽڻ جو هڪ سيٽ ٺاهيو عمودي طور تي اسٽيڪ ٿيل نه بلڪه افقي طور تي. Split Button dropdowns هتي سپورٽ نه آهن.
<div class="btn-group-vertical">
...
</div>