انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 23
دورة بوتستراب 5

مجموعات الأزرار في بوتستراب 5Bootstrap 5 Button Groups

تعلّم بناء مجموعات الأزرار وأشرطة الأدوات في بوتستراب 5.3 عبر btn-group والأنماط المفرغة وشريط btn-toolbar والتحكم بالأحجام والترتيب الرأسي وضوابط الإتاحة ARIA.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
1
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

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

مخطط بنية مجموعات الأزرار وأشرطة الأدوات وأدوار ARIA في بوتستراب 5.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>
جرّب بنفسك

Outline and Mixed Groups الأنماط المفرغة والمختلطة

تتألق مجموعات الأزرار بشكل خاص عند استخدام الأنماط المفرغة .btn-outline-primary أو .btn-outline-secondary؛ إذ يبرز الخيار الحامل لكلاس .active بخلفية ممتلئة واضحة وسط الأزرار المفرغة الهادئة، كما يمكنك المزج الدلالي بين الألوان داخل مجموعة عمليات مثل «اعتماد» بالأخضر و«مراجعة» بالأصفر و«رفض» بالأحمر.

HTML 
<div class="btn-group" role="group" aria-label="Filter">
  <button type="button"
    class="btn btn-outline-primary active">All</button>
  <button type="button"
    class="btn btn-outline-primary">Live</button>
  <button type="button"
    class="btn btn-outline-primary">Draft</button>
</div>
جرّب بنفسك

Button Toolbars Layout بناء أشرطة الأدوات btn-toolbar

لبناء شريط أدوات تحرير متكامل — مثل مجموعة تنسيق النص بجانب مجموعة المحاذاة ومجموعة التراجع — نغلف عدة عناصر .btn-group داخل حاوية أب تحمل الكلاس .btn-toolbar وسمة role="toolbar"، ثم نضبط المسافات الفاصلة بين كل مجموعة وأخرى باستخدام كلاسات التباعد المنطقية مثل .me-2 أو .gap-2.

HTML 
<div class="btn-toolbar gap-2" role="toolbar">
  <div class="btn-group" role="group" aria-label="Font">
    <button type="button" class="btn btn-primary">B</button>
    <button type="button" class="btn btn-primary">I</button>
  </div>
  <div class="btn-group" role="group" aria-label="Step">
    <button type="button" class="btn btn-dark">1</button>
    <button type="button" class="btn btn-dark">2</button>
  </div>
</div>
جرّب بنفسك

Button Group Sizing أحجام مجموعات الأزرار

بدلاً من تكرار كتابة كلاس الحجم على كل زر داخل المجموعة على حدة، وفّر وقتك بإضافة الكلاس .btn-group-lg أو .btn-group-sm مرة واحدة فقط على حاوية .btn-group الأب لترث جميع الأزرار الأبناء الحجم المطلوب بتناغم تام.

Vertical Button Groups مجموعات الأزرار الرأسية

عند تصميم شريط أدوات جانبي عائم على يمين أو يسار لوحة الرسم أو الخريطة التفاعلية، استبدل .btn-group بالكلاس .btn-group-vertical لترص الأزرار عمودياً فوق بعضها البعض مع استدارة الحافتين العلوية والسفلية فقط ودمج الخطوط الأفقية البينية بنظافة.

HTML 
<div class="btn-group-vertical" role="group"
  aria-label="Map zoom controls">
  <button type="button" class="btn btn-dark">Zoom +</button>
  <button type="button" class="btn btn-dark">Reset</button>
  <button type="button" class="btn btn-dark">Zoom -</button>
</div>
جرّب بنفسك

Button Group Accessibility إتاحة مجموعات الأزرار ARIA

بدون سمات الإتاحة الصحيحة، تقرأ التقنيات المساندة سلسلة من الأزرار المتتالية دون أن يدرك الكفيف أنها تمثل مجموعة خيارات مترابطة! لذلك يشدد توثيق Bootstrap 5.3 على قاعدتين ذهبيتين لا غنى عنهما: منح كل مجموعة role="group" بينما يأخذ شريط الأدوات الأب role="toolbar"، وتزويد كل مجموعة أو شريط باسم وصفي واضح عبر aria-label أو ربطه بعنوان ظاهر عبر aria-labelledby.

العنصر المعماريالكلاس القياسيالدور والسمة الإلزامية للإتاحة
مجموعة أفقية مترابطة.btn-grouprole="group" مع aria-label واضح
شريط أدوات متعدد المجموعات.btn-toolbarrole="toolbar" مع aria-label شامل
تكبير أو تصغير المجموعة.btn-group-lg / .btn-group-smيوضع على الحاوية الأب بدلاً من تكراره على الأبناء
مجموعة أدوات رأسية.btn-group-verticalrole="group" وتوحيد عرض الأزرار عمودياً
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس تجميع الأزرار المترابطة أفقياً بكلاس btn-group ورأسياً بكلاس btn-group-vertical، وبناء أشرطة الأدوات المتعددة عبر btn-toolbar، وضبط الأحجام الموحدة، وتطبيق عقود الإتاحة القياسية role="group" وrole="toolbar". الخطوة التالية: انتقل الآن إلى الدرس الرابع والعشرين لتعلّم تصميم الشارات النسبية والكبسولية وعدادات الإشعارات الزاوية باستخدام مكوّن Badges.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Button Group مجموعة الأزرار
حاوية تدمج سلسلة أزرار متجاورة في وحدة متصلة واحدة مع توحيد حدودها الداخلية.
للمراجعة
02 Button Toolbar شريط أدوات الأزرار
حاوية مرنة تجمع عدة مجموعات أزرار مستقلة مع فواصل تباعد لبناء أشرطة التحكم.
للمراجعة
03 Vertical Button Group مجموعة الأزرار الرأسية
نمط يرص الأزرار عمودياً فوق بعضها البعض مع دمج الحدود الأفقية البينية.
للمراجعة
04 Group Sizing Modifier معدّل حجم المجموعة
كلاس يوضع على حاوية المجموعة لتكبير أو تصغير جميع الأزرار بداخلها دفعة واحدة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 ARIA ARIA
Accessible Rich Internet Applications
تحدد أدوار المجموعات وأشرطة الأدوات وأوصافها النصية لقارئات الشاشة.
للمراجعة
02 RTL RTL
Right-to-Left
يعكس استدارة الطرفين الأول والأخير لمجموعة الأزرار تلقائياً في الواجهة العربية.
للمراجعة
03 UI UI
User Interface
عناصر التحكم المرئية التي تكتسب وضوحاً أعلى عند تجميع الأوامر المتشابهة.
للمراجعة
04 DOM DOM
Document Object Model
شجرة عناصر الأزرار المتجاورة التي ينسقها بوتستراب بمحددات الطفل الأول والأخير.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ شريط btn-toolbar بسمة role="toolbar" وكلاس gap-2 يضم مجموعتين منفصلتين بكلاس btn-group ووصف aria-label لكل منهما.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. ادمج الكلاسين btn-group-vertical وbtn-group-sm لبناء ثلاثة أزرار رأسية مضغوطة يكون أوسطها نشطاً بكلاس active.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما السمة الدلالية الواجب إضافتها إلى حاوية .btn-group المفردة لدعم قارئات الشاشة؟

تأخذ كل مجموعة أزرار مترابطة role="group" مع aria-label، بينما يأخذ شريط الأدوات الأب role="toolbar".

02

أي كلاس يجمع عدة مجموعات .btn-group معاً لبناء شريط أدوات متكامل في Bootstrap 5؟

الكلاس .btn-toolbar مع role="toolbar" هو الحاوية القياسية المخصصة لدمج عدة مجموعات أزرار.

03

لتصغير جميع الأزرار داخل مجموعة .btn-group يكفي إضافة الكلاس .btn-group-sm على الحاوية الأب دون تكرار .btn-sm على كل زر.

نعم، يورّث .btn-group-sm و.btn-group-lg مقاسات الحجم تلقائياً لجميع الأزرار داخل المجموعة.

04

أي كلاس يُستخدم لرص مجموعة من الأزرار عمودياً فوق بعضها البعض بدلاً من الصف الأفقي؟

يُستخدم الكلاس .btn-group-vertical كبديل مباشر لـ .btn-group عند الرغبة في التكديس العمودي.

05

إذا احتوت أزرار المجموعة على أيقونات فقط بدون نص ظاهر، فإن وضع aria-label على حاوية .btn-group يغني تماماً عن تسمية كل زر بمفرده.

خطأ؛ تسمية المجموعة تصف الإطار العام فقط، ويجب منح كل زر أيقوني aria-label خاصاً بوظيفته مثل Bold أو Italic.

06

كيف نحقق مسافة فاصلة نظيفة ومتجاوبة بين مجموعات الأزرار المتجاورة داخل .btn-toolbar؟

يعتمد .btn-toolbar على Flexbox، لذا تمنحك كلاسات .gap-2 أو .me-2 فواصل قياسية متوافقة مع RTL.

07

ما الدور الصحيح لسمة role على عنصر .btn-toolbar الذي يضم عدة مجموعات أزرار؟

يأخذ الشريط الأب role="toolbar" بينما تأخذ كل مجموعة فرعية بداخله role="group".

08

لماذا يرفع Bootstrap 5 قيمة z-index للزر عند التركيز عليه داخل .btn-group؟

بسبب تداخل الحدود بمقدار -1px، يضمن رفع z-index عدم انقطاع إطار التركيز خلف الزر المجاور.