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

Split Button Dropdowns القوائم ذات الأزرار المنقسمة

صمّم القوائم المنسدلة التفاعلية في بوتستراب 5 بالاعتماد على Popper وجافاسكريبت القياسية، بدءاً من الأزرار المفردة والمنقسمة والاتجاهات المنطقية حتى المحاذاة المتجاوبة وخيارات الإغلاق التلقائي.
2 صفوف تعليمية
بوتستراب 5
1 مشاهدة

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

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

عندما يكون هناك إجراء رئيسي شائع الاستخدام (مثل «حفظ التغييرات») إلى جانب خيارات ثانوية أقل تكراراً (مثل «حفظ كمسودة» أو «تصدير نسخة»)، استخدم نمط الزر المنقسم بجمع زر الإجراء المباشر مع زر سهم مستقل يحمل الكلاس .dropdown-toggle-split داخل مجموعة .btn-group.

يقلص كلاس .dropdown-toggle-split الحشو الأفقي حول السهم تلقائياً، ويلزم تزويده بنص مخفي بصرياً .visually-hidden حتى يفهم مستخدمو قارئات الشاشة وظيفة زر السهم المنفصل.

الصف 2 كود برمجي
HTML 
<div class="btn-group">
  <button type="button" class="btn btn-success">
    Publish</button>
  <button type="button" data-bs-toggle="dropdown"
    class="btn btn-success dropdown-toggle
    dropdown-toggle-split" aria-expanded="false">
    <span class="visually-hidden">Toggle Menu</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Schedule</a></li>
  </ul>
</div>
جرّب بنفسك

جميع فقرات هذا الدرس (القوائم المنسدلة في بوتستراب 5)