انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: مجموعات الأزرار في بوتستراب 5

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

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

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

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

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

الصف 2 كود برمجي
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>
جرّب بنفسك

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