تجميع الأزرار بـ btn-group | مجموعات الأزرار في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما تشترك عدة أزرار في التحكم بوظيفة واحدة مترابطة — مثل أزرار تبديل طريقة العرض بين «يومي» و«أسبوعي» و«شهري»، أو أزرار محاذاة الفقرات في محرر النصوص — فإن تركها منفصلة يضعف إدراك المستخدم لترابطها. يجمع الكلاس .btn-group سلسلة من عناصر .btn في شريط واحد متلاصق عبر تصفير استدارة الزوايا الداخلية ودمج الحدود المزدوجة بذكاء بحيث تبقى استدارة الطرفين الخارجيين فقط وتنعكس تلقائياً في الواجهة العربية RTL.

الصف 2 صورة توضيحية

الصف 3 كود برمجي

HTML

<div class="btn-group" role="group" aria-label="View mode">
  <button type="button" class="btn btn-primary active"
    aria-current="page">Day</button>
  <button type="button" class="btn btn-primary">
    Week
  </button>
  <button type="button" class="btn btn-primary">
    Month
  </button>
</div>

جرّب بنفسك

الصف 4 ملاحظة هامة

Basic Button Group Markup تجميع الأزرار بـ btn-group

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (مجموعات الأزرار في بوتستراب 5)