مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

بٽڻ گروپ

ھڪڙي لڪير تي بٽڻن جو ھڪڙو سلسلو گڏ ڪريو يا انھن کي عمودي ڪالمن ۾ اسٽيڪ ڪريو.

بنيادي مثال

.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>