بناء القائمة المنسدلة الأساسية | القوائم المنسدلة في بوتستراب 5

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

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

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

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

الصف 2 كود برمجي

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>

جرّب بنفسك

الصف 3 ملاحظة هامة

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

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

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