Source

بٹن گروپ

بٹن گروپ کے ساتھ ایک لائن پر بٹنوں کی ایک سیریز کو ایک ساتھ گروپ کریں، اور JavaScript کے ساتھ انہیں سپر پاور کریں۔

بنیادی مثال

بٹنوں کی ایک سیریز کو اندر کے ساتھ .btnلپیٹیں .btn-group۔ ہمارے بٹن پلگ ان کے ساتھ اختیاری JavaScript ریڈیو اور چیک باکس طرز کا رویہ شامل کریں ۔

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

عمودی تغیر

بٹنوں کا ایک سیٹ افقی کے بجائے عمودی طور پر اسٹیک کیا ہوا دکھائیں۔ اسپلٹ بٹن ڈراپ ڈاؤن یہاں تعاون یافتہ نہیں ہیں۔

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