عرض مصدر Bootstrap/button group

اجمع سلسلةً من الأزرار معًا ضمن سطرٍ واحد بمكوِّن مجموعة الأزرار في إطار العمل Bootstrap؛ وزوِّها إليها وظائف جديدة باستخدام JavaScript.

== مثال قاعديّ ==
استخدم الصنف <code>‎.btn-group</code> لتغليف مجموعة أزرار يُطبَّق عليها الصنف <code>‎.btn</code>. يمكنك إضافة سلوك مشابه لصناديق التأشير Check boxes وأزرار الانتقاء Radio buttons باستخدام [[Buttons|مُلحَق JavaScript في Bootstrap الخاصّ بالأزرار]].<syntaxhighlight lang="html">
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">يسار</button>
  <button type="button" class="btn btn-secondary">وسط</button>
  <button type="button" class="btn btn-secondary">يمين</button>
</div>


</syntaxhighlight>

===== تأكّد من قيمة الخاصيّة <code>role</code> وأضف لافتة =====
يجب توفير قيمة مناسبة للخاصيّة <code>role</code>  لتوصيل فكرة تجميع سلسلة من الأزرار إلى التقنيّات المساعدة في القراءة (مثل قارئات الشاشة). يمكن أن تكون القيمة <code>role="group"‎</code> مناسبة لمجموعة من الأزرار، في ما يتوجّب أن تكون لأشرطة الأدوات القيمة <code>role="toolbar"‎</code>.

علاوةً على ذلك؛ يجب أنْ تُضاف لافتات Labels صريحة لمجموعات الأزرار وأشرطة الأدوات؛ إذْ أنّ التقنيّات المساعدة في القراءة لن تقرأها في غياب هذه اللّافتات؛ على الرغم من وجود الدور (<code>role</code>) الصحيح. تستخدم الأمثلة المذكورة هنا اللافتة <code>aria-label</code>؛ إلّا أنّه يمكن استخدام قيم بديلة مثل <code>aria-labelledby</code>.

== شريط أدوات مكوَّن من أزرار ==
يمكن تجميع عدد من مجموعات الأزرار ضمن شريط أدوات من الأزرار لإنشاء مكوِّنات أكثر تعقيدا. استخدم الأصناف الخدميّة حسب الحاجة للمباعدة بين المجموعات، الأزرار وغيرها.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>لا يوجد مانع من الخلط بين مجموعات الإدخال ومجموعات الأزرار (<code>‎.input-group</code>) ضمن شريط الأدوات. ستحتاج على الأرجح إلى أدواتٍ للمباعدة، على نحو مشابه للمثال أعلاه.<syntaxhighlight lang="html">
<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="مثال على مجموعة إدخال" aria-label="مثال على مجموعة إدخال" 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="مثال على مجموعة إدخال" aria-label="مثال على مجموعة إدخال" aria-describedby="btnGroupAddon2">
  </div>
</div>


</syntaxhighlight>

== تحديد القياس ==
أضف الأصناف <code>‎.btn-group-*‎</code> إلى كلّ مجموعة أزرار <code>‎.btn-group</code>، بما في ذلك المجموعات في المستويات الفرعيّة إنْ وُجدت، بدلًا من إضافة أصناف الحجم إلى كلّ زرّ في المجموعة.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== مجموعات الأزرار الفرعيّة ==
ضع مجموعة أزرار (<code>‎.btn-group</code>) داخل مجموعة أزرار أخرى عندما تريد إنشاء قوائم منسدلة ضمن مجموعة من الأزرار.<syntaxhighlight lang="html">
<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">
      قائمة منسدلة
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">رابط في قائمة منسدلة</a>
      <a class="dropdown-item" href="#">رابط في قائمة منسدلة</a>
    </div>
  </div>
</div>


</syntaxhighlight>

== التموضع العمودي ==
يمكن جعل تجمّعًا من الأزرار يظهر عموديًّا بدلاً من التموضع أفقيّا. '''شقّ المجموعة لتظهر فيها عناصر القائمة المنسدلة غير مدعوم'''.

== مصادر ==
* [https://getbootstrap.com/docs/4.0/components/button-group صفحة Button group في توثيق Bootstrap].
[[تصنيف:Bootstrap]]
[[تصنيف:Bootstrap components]]