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

القوائم المنسدلة في بوتستراب 5Bootstrap 5 Dropdowns

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

Basic Dropdown Structure بناء القائمة المنسدلة الأساسية

تُعدّ القوائم المنسدلة Dropdowns من أكثر المكوّنات التفاعلية حضوراً في لوحات التحكم وأشرطة الإجراءات، إذ تجمع عدّة أوامر سياقية خلف زر واحد أنيق. يعتمد Bootstrap 5.3 في حساب إحداثيات القائمة على مكتبة التموضع الذكي Popper المدمجة مسبقاً داخل ملف bootstrap.bundle.min.js، مع تشغيل كامل عبر السمة data-bs-toggle="dropdown" دون أي حاجة لمكتبة jQuery.

يتألف الهيكل القياسي من حاوية .dropdown تضم زر فتح يحمل الكلاس .dropdown-toggle، وتليه قائمة <ul class="dropdown-menu"> بداخلها عناصر .dropdown-item المبنية على أزرار أو روابط دلالية.

HTML 
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle"
    type="button" data-bs-toggle="dropdown"
    aria-expanded="false">Account Actions</button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">
      Edit Profile</button></li>
    <li><button class="dropdown-item" type="button">
      API Keys</button></li>
  </ul>
</div>
جرّب بنفسك

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

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

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

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>
جرّب بنفسك

Dropdown Sizing Dark Theme أحجام القوائم والنمط الداكن

تتكيف القوائم المنسدلة مع جميع أحجام الأزرار في بوتستراب؛ فسواء طبّقت .btn-lg للأشرطة البارزة أو .btn-sm داخل صفوف الجداول المدمجة، سيعمل المشغل المنفرد والمنقسم بالتناسق ذاته. كما يوفّر الإطار الكلاس .dropdown-menu-dark لمنح القائمة خلفية داكنة متباينة تتناغم مع الأشرطة الداكنة.

Dropup Dropend Dropstart اتجاهات فتح القوائم المنطقية

ألغى Bootstrap 5 الكلاسين الفيزيائيين القديمين dropright وdropleft واستبدلهما بالاتجاهات المنطقية الداعمة للعربية: استخدم .dropup لفتح القائمة للأعلى (أو .dropup-center لتوسيطها أعلى الزر)، و.dropend لفتحها باتجاه نهاية السطر، و.dropstart لفتحها باتجاه بداية السطر.

خريطة الاتجاهات المنطقية للقوائم المنسدلة dropup وdropend وdropstart وتكيفها مع العربية

Menu Alignment Options محاذاة القوائم المنسدلة

تتحاذى القائمة افتراضياً مع حافة البداية للزر، ولكن عندما يقع الزر في أقصى طرف الشاشة يمكنك إضافة .dropdown-menu-end لمحاذاة القائمة مع حافة النهاية ومنع قصّها، أو استخدام .dropdown-center على الحاوية لتوسيط القائمة تحت الزر تماماً.

كما يمكنك تطبيق المحاذاة المتجاوبة مثل .dropdown-menu-lg-end؛ علماً أن بوتستراب يوقف تموضع Popper الديناميكي تلقائياً عند استخدام كلاسات المحاذاة المتجاوبة ليحترم نقطة التوقف المحددة في CSS.

HTML 
<div class="d-flex gap-2">
  <div class="btn-group dropend">
    <button type="button" data-bs-toggle="dropdown"
      class="btn btn-secondary dropdown-toggle">
      Dropend</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Side</a></li>
    </ul>
  </div>
</div>
جرّب بنفسك

Headers Dividers and Text العناوين والفواصل داخل القائمة

لتنظيم القوائم الغنية بصرياً ودلالياً، يوفّر بوتستراب ثلاثة عناصر مساعدة داخل .dropdown-menu: عنوان المجموعة <h6 class="dropdown-header"> لتصنيف الأوامر، والخط الفاصل <hr class="dropdown-divider"> لعزل الإجراءات الحساسة كحذف العنصر أو تسجيل الخروج، والنص الوصفي الثابت .dropdown-item-text لعرض البريد الإلكتروني أو الرصيد الحالي دون استجابة للنقر.

جرّب جميع أنماط القوائم واتجاهاتها ومحتوياتها في المختبر التفاعلي الحي:

Auto Close and JS Control الإغلاق التلقائي والتحكم البرمجي

عندما تضع حقول تصفية أو مربعات اختيار داخل القائمة المنسدلة، لا تريد أن تُغلق القائمة فور نقرة المستخدم الأولى بالداخل! هنا تبرز قوة السمة data-bs-auto-close التي تقبل أربع قيم دقيقة: true (الافتراضي: تُغلق بأي نقرة)، وoutside (تُغلق فقط عند النقر خارج القائمة)، وinside (تُغلق عند النقر بالداخل فقط)، وfalse (لا تُغلق إلا بزر المشغل أو برمجياً).

وللتحكم البرمجي الكامل في جافاسكريبت القياسية، استدعِ bootstrap.Dropdown.getOrCreateInstance(toggleBtn) لتنفيذ دوال .show() و.hide() و.update() مع الاستماع لأحداث shown.bs.dropdown وhidden.bs.dropdown.

مخطط مقارنة أوضاع الإغلاق التلقائي عبر سمة data-bs-auto-close في بوتستراب 5
HTML 
<div class="dropdown d-inline-block">
  <button id="fltBtn" type="button"
    class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown"
    data-bs-auto-close="outside">
    Clickable Inside</button>
  <ul class="dropdown-menu p-2">
    <li><span class="dropdown-item-text">Stay open</span></li>
  </ul>
</div>
جرّب بنفسك

مرجع كلاسات وسمات مكوّن Dropdowns

الكلاس / السمةالعنصر المستهدفالوظيفة القياسية في Bootstrap 5.3
.dropdown-toggleزر الفتحينسق زر المشغل ويرسم سهم القائمة المنسدلة التلقائي.
.dropdown-toggle-splitزر السهم المنقسميضبط حشو زر السهم المنفصل داخل .btn-group.
.dropup / .dropend / .dropstartالحاوية الأبتوجّه فتح القائمة للأعلى أو للنهاية أو للبداية منطقياً.
.dropdown-menu-endقائمة .dropdown-menuتحاذي القائمة مع الحافة النهائية للزر بدلاً من البداية.
data-bs-auto-closeزر .dropdown-toggleتحدد متى تُغلق القائمة تلقائياً (true أو outside أو inside أو false).
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

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

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

تعرّفت في هذا الدرس على بناء القوائم المنسدلة عبر Popper، وتصميم الأزرار المنقسمة .dropdown-toggle-split، والاتجاهات المنطقية .dropend و.dropstart، والمحاذاة والعناوين والفواصل، والتحكم بالإغلاق التلقائي عبر data-bs-auto-close وكائن bootstrap.Dropdown. الخطوة التالية: انتقل الآن إلى الدرس التالي لإتقان مكوّن اللوحات الجانبية المنزلقة Offcanvas وبناء الأدراج والقوائم المتجاوبة.

مشاركة

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

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

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

المصطلحات4

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

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Popper Positioning Engine محرك التموضع الذكي Popper
المكتبة المدمجة داخل حزمة بوتستراب المسؤولة عن حساب إحداثيات القوائم المنسدلة ومنع خروجها عن حدود الشاشة.
للمراجعة
02 Split Button Dropdown القائمة ذات الزر المنقسم
مجموعة أزرار تفصل زر التنفيذ المباشر عن زر السهم المخصص لفتح الخيارات الإضافية.
للمراجعة
03 Logical Drop Directions اتجاهات الفتح المنطقية
كلاسات الاتجاه في بوتستراب 5 التي تتكيف تلقائياً مع اتجاه الصفحة العربية أو الإنجليزية بدلاً من الكلاسات الفيزيائية الملغاة.
للمراجعة
04 Auto-Close Mode نمط الإغلاق التلقائي
سمة تحدد ما إذا كانت القائمة تغلق عند النقر داخلها أو خارجها أو تبقى مفتوحة للتحكم اليدوي.
للمراجعة

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

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

الاختصارات4

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

0 / 4 مفهومةأول بطاقة، أول خطوة
01 RTL RTL
Right-to-Left
اتجاه الواجهة العربية الذي تنعكس فيه كلاسات dropend وdropdown-menu-end تلقائياً.
للمراجعة
02 LTR LTR
Left-to-Right
اتجاه الواجهة الإنجليزية القياسي لحساب البداية والنهاية المنطقية.
للمراجعة
03 ARIA ARIA
Accessible Rich Internet Applications
سمات الإتاحة التي تعلن حالة فتح القائمة والعنصر النشط لمستخدمي التقنيات المساعدة.
للمراجعة
04 UI UI
User Interface
الطبقة المرئية للتطبيق التي تُنظَّم أوامرها الثانوية داخل القوائم السياقية.
للمراجعة

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

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

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

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

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

  1. أنشئ مجموعة btn-group تضم زر إجراء رئيسي وزر سهم منقسم بكلاس dropdown-toggle-split بداخله عنصر visually-hidden، يفتح قائمة تحتوي خيارين وفاصل dropdown-divider.

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

  2. اضبط زر قائمة منسدلة بسمة data-bs-auto-close="outside" يحتوي مربعي اختيار form-check وزر إتمام يستدعي دالة hide() عبر كائن bootstrap.Dropdown.

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

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

مساحة التحدي

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

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

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

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

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

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

أي ملف سكريبت يجب تضمينه لتعمل القوائم المنسدلة في بوتستراب 5 مع مكتبة Popper مباشرة؟

تتضمن حزمة bootstrap.bundle.min.js مكتبة Popper الضرورية لحساب إحداثيات القوائم المنسدلة.

02

ما الكلاسان المنطقيان في بوتستراب 5 اللذان حلّا محل كلاسي dropright وdropleft الملغيين؟

استبدل بوتستراب 5 الاتجاهات الفيزيائية بالاتجاهين المنطقيين dropend وdropstart لدعم العربية والإنجليزية تلقائياً.

03

ما القيمة الصحيحة لسمة data-bs-auto-close لإبقاء القائمة مفتوحة عند النقر بداخلها وإغلاقها فقط عند النقر خارجها؟

تعني القيمة outside أن الإغلاق التلقائي يحدث عند النقر خارج حدود القائمة فقط.

04

ما الكلاس الذي يحاذي القائمة المنسدلة مع الحافة النهائية للزر بدلاً من حافة البداية؟

يستخدم بوتستراب 5 كلاس dropdown-menu-end لمحاذاة القائمة مع نهاية الزر منطقياً.

05

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

لأن زر السهم لا يحوي نصاً مرئياً، يضمن وجود visually-hidden قراءة وظيفته بوضوح للمكفوفين.

06

ما الكلاس المخصص لعرض سطر نصي معلوماتي غير تفاعلي بنفس حشو عناصر القائمة المنسدلة؟

يمنح كلاس dropdown-item-text النص الثابت نفس الهوامش الداخلية لعناصر القائمة دون جعله قابلاً للنقر.

07

تكفي إضافة كلاس disabled على عنصر القائمة لمنع المستخدم غير المصرح له أمنياً من استدعاء العملية على الخادم.

التعطيل في المتصفح بصري وتفاعلي فقط، ولا بد من فحص الصلاحيات برمجياً على الخادم دائماً.

08

يمكن للمستخدم التنقل بين عناصر القائمة المنسدلة بسهمي الأعلى والأسفل وإغلاقها بمفتاح Escape.

يدعم مكوّن Dropdown اختصارات لوحة المفاتيح القياسية للتنقل والإغلاق وإعادة التركيز للزر.