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

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

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

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

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

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

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

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