تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
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>

الاختلاف العمودي

اجعل مجموعة من الأزرار تظهر مكدسة رأسيًا وليس أفقيًا. القوائم المنسدلة لزر الانقسام غير مدعومة هنا.

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