Source

بٽڻ گروپ

بٽڻن جي هڪ سيريز کي هڪ واحد لڪير تي گڏ ڪريو بٽڻ گروپ سان، ۽ انهن کي جاوا اسڪرپٽ سان سپر پاور.

بنيادي مثال

.btnان سان گڏ بٽڻ جو هڪ سلسلو لپي .btn-group. اختياري جاوا اسڪرپٽ ريڊيو تي شامل ڪريو ۽ چيڪ باڪس طرز جو رويو اسان جي بٽڻن جي پلگ ان سان .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
صحيح کي يقيني بڻايو role۽ هڪ ليبل مهيا ڪريو

مددگار ٽيڪنالاجيز (جهڙوڪ اسڪرين ريڊرز) کي پهچائڻ لاءِ ته بٽڻن جو هڪ سلسلو گروپ ڪيو ويو آهي، هڪ مناسب roleخاصيت مهيا ڪرڻ جي ضرورت آهي. بٽڻ واري گروپن لاءِ، هي هوندو role="group"، جڏهن ته ٽول بار کي هڪ هجڻ گهرجي role="toolbar".

اضافي طور تي، گروپن ۽ ٽول بارن کي هڪ واضح ليبل ڏنو وڃي، جيئن سڀ کان وڌيڪ مددگار ٽيڪنالاجيون ٻي صورت ۾ انهن جو اعلان نه ڪندا، صحيح ڪردار جي خاصيت جي موجودگي جي باوجود. هتي مهيا ڪيل مثالن ۾، اسان استعمال ڪريون ٿا aria-label، پر متبادل جهڙوڪ aria-labelledbyپڻ استعمال ڪري سگهجن ٿيون.

بٽڻ ٽول بار

وڌيڪ پيچيده اجزاء لاءِ بٽڻ ٽول بار ۾ بٽڻ گروپن جي سيٽ کي گڏ ڪريو. يوٽيلٽي ڪلاس استعمال ڪريو جيئن ضرورت هجي گروپن، بٽڻن ۽ وڌيڪ کي ٻاهر رکڻ لاءِ.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-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-secondary">8</button>
  </div>
</div>

توهان جي ٽول بار ۾ بٽڻ گروپن سان ان پٽ گروپن کي گڏ ڪرڻ لاء آزاد محسوس ڪريو. مٿي ڏنل مثال وانگر، توهان کي امڪاني طور تي ڪجهه افاديت جي ضرورت هوندي جيتوڻيڪ شين کي صحيح طور تي جاء ڏيڻ لاء.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

عمودي تغير

بٽڻ جو هڪ سيٽ ٺاهيو عمودي طور تي اسٽيڪ ٿيل نه بلڪه افقي طور تي. Split Button dropdowns هتي سپورٽ نه آهن.

<div class="btn-group-vertical">
  ...
</div>