القوائم المنسدلة (Dropdowns)

تبديل طبقات التغطية السياقية لعرض قوائم من الروابط وأكثر من ذلك باستخدام إضافة الـ dropdown الخاصة بـ Bootstrap.

في هذه الصفحة

نظرة عامة

تعتبر الـ Dropdowns عبارة عن طبقات تغطية (overlays) سياقية قابلة للتبديل لعرض قوائم من الروابط وأكثر من ذلك. وقد تم جعلها تفاعلية باستخدام الـ JavaScript plugin الخاص بالـ dropdown المضمن في Bootstrap. يتم تبديل حالتها عن طريق النقر، وليس عن طريق تمرير الماوس؛ وهذا قرار تصميمي متعمد.

تم بناء الـ Dropdowns استناداً إلى مكتبة خارجية وهي Popper، والتي توفر تحديد المواقع الديناميكي وكشف منطقة العرض (viewport detection). تأكد من تضمين popper.min.js قبل الـ JavaScript الخاص بـ Bootstrap أو استخدم bootstrap.bundle.min.js / bootstrap.bundle.js التي تحتوي على Popper. ومع ذلك، لا يتم استخدام Popper لتحديد مواقع الـ dropdowns في الـ navbars لأن التحديد الديناميكي للمواقع غير مطلوب هناك.

إمكانية الوصول

يحدد معيار WAI ARIA أداة role="menu" فعلية، ولكن هذا مخصص للقوائم الشبيهة بالتطبيقات التي تطلق إجراءات أو دوال. لا يمكن أن تحتوي قوائم ARIA إلا على عناصر قائمة، وعناصر قائمة ذات مربعات اختيار، وعناصر قائمة ذات أزرار اختيار، ومجموعات أزرار اختيار، وقوائم فرعية.

من ناحية أخرى، تم تصميم الـ dropdowns في Bootstrap لتكون عامة وقابلة للتطبيق على مجموعة متنوعة من الحالات وهياكل الترميز. على سبيل المثال، من الممكن إنشاء قوائم منسدلة تحتوي على مدخلات وعناصر تحكم في النماذج إضافية، مثل حقول البحث أو نماذج تسجيل الدخول. لهذا السبب، لا يتوقع Bootstrap (ولا يضيف تلقائياً) أي من سمات role و aria- المطلوبة لقوائم ARIA الحقيقية. سيتعين على المطورين تضمين هذه السمات الأكثر تحديداً بأنفسهم.

ومع ذلك، يضيف Bootstrap دعماً مدمجاً لمعظم تفاعلات قائمة لوحة المفاتيح القياسية، مثل القدرة على التنقل عبر عناصر .dropdown-item الفردية باستخدام مفاتيح الأسهم وإغلاق القائمة باستخدام مفتاح Esc.

أمثلة

قم بتغليف مفتاح تبديل القائمة المنسدلة (الزر أو الرابط الخاص بك) وقائمة الـ dropdown داخل .dropdown، أو أي عنصر آخر يعلن عن position: relative;. من الناحية المثالية، يجب استخدام عنصر <button> كمشغل للقائمة المنسدلة، ولكن الإضافة (plugin) ستعمل مع عناصر <a> أيضاً. تستخدم الأمثلة الموضحة هنا عناصر <ul> دلالية حيثما كان ذلك مناسباً، ولكن يتم دعم الترميز المخصص.

زر مفرد (Single)

يمكن تحويل أي .btn مفرد إلى مفتاح تبديل للقائمة المنسدلة ببعض التغييرات في الترميز. إليك كيفية تشغيلها باستخدام عناصر <button>:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

بينما يعتبر عنصر <button> هو التحكم الموصى به لمفتاح تبديل القائمة المنسدلة، فقد تكون هناك حالات تضطر فيها إلى استخدام عنصر <a>. إذا فعلت ذلك، فنحن نوصي بإضافة سمة role="button" لنقل الغرض من التحكم بشكل مناسب إلى التقنيات المساعدة مثل قارئات الشاشة.

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

أفضل ما في الأمر هو أنه يمكنك القيام بذلك باستخدام أي زر مختلف أيضاً:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Danger
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

الزر المزدوج ، المركب (Split)

بالمثل، قم بإنشاء قوائم منسدلة بأزرار مقسمة (split button) بنفس التوصيف (markup) تقريباً كما في القوائم المنسدلة ذات الزر الواحد، ولكن مع إضافة الفئة .dropdown-toggle-split لضمان وجود مسافات مناسبة حول سهم القائمة المنسدلة.

نحن نستخدم هذه الفئة الإضافية لتقليل الـ padding الأفقي على كلا جانبي السهم بنسبة 25% وإزالة الـ margin-left الذي يتم إضافته للقوائم المنسدلة ذات الأزرار العادية. هذه التغييرات الإضافية تحافظ على توسيط السهم في الزر المقسم وتوفر منطقة نقر ذات حجم أكثر ملاءمة بجانب الزر الرئيسي.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

التحجيم

تعمل القوائم المنسدلة للأزرار مع أزرار من جميع الأحجام، بما في ذلك أزرار القوائم المنسدلة الافتراضية والمقسمة.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

القوائم المنسدلة الداكنة

v5.3.0 مستبعد في الإصدار

اختر القوائم المنسدلة الأكثر دكانة لتتناسب مع شريط تنقل داكن أو نمط مخصص عن طريق إضافة .dropdown-menu-dark إلى .dropdown-menu موجودة. لا يلزم إجراء أي تغييرات على عناصر القائمة المنسدلة.

تنبيه! تم استبعاد المتغيرات الداكنة للمكونات في الإصدار v5.3.0 مع تقديم أوضاع الألوان. بدلاً من إضافة dropdown-menu-dark.، قم بتعيين "data-bs-theme="dark على العنصر الجذر، أو غلاف أب، أو المكون نفسه.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

ووضعه للاستخدام في شريط التنقل (navbar):

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </button>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

الإتجاهات

يتم عكس الاتجاهات في وضع RTL. وبناءً على ذلك، ستظهر الفئة dropstart. على الجانب الأيمن.

متمركزة (Centered)

اجعل القائمة المنسدلة متمركزة أسفل مفتاح التبديل باستخدام الفئة .dropdown-center على العنصر الأب.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

قائمة منسدلة للأعلى (Dropup)

قم بتشغيل القوائم المنسدلة فوق العناصر عن طريق إضافة .dropup إلى العنصر الأب.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

قائمة منسدلة للأعلى والوسط (Dropup centered)

اجعل القائمة المنسدلة للأعلى متمركزة فوق مفتاح التبديل باستخدام .dropup-center على العنصر الأب.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

اسقاط في النهاية (Dropend)

قم بتشغيل القوائم المنسدلة على يمين العناصر عن طريق إضافة .dropend إلى العنصر الأب.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

اسقاط في البداية (Dropstart)

قم بتشغيل القوائم المنسدلة على يسار العناصر عن طريق إضافة الفئة .dropstart إلى العنصر الأب.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

عناصر القائمة

يمكنك استخدام عناصر <a> أو <button> كعناصر للقائمة المنسدلة.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

يمكنك أيضاً إنشاء عناصر قائمة منسدلة غير تفاعلية باستخدام .dropdown-item-text. لا تتردد في تخصيص التنسيق بشكل أكبر باستخدام CSS مخصص أو أدوات النصوص (text utilities).

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

نشط (Active)

أضف الفئة .active إلى العناصر في القائمة المنسدلة لتنسيقها كعناصر نشطة. ولنقل الحالة النشطة إلى التقنيات المساعدة، استخدم سمة aria-current — باستخدام القيمة page للصفحة الحالية، أو true للعنصر الحالي في مجموعة.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

تعطيل (Disabled)

أضف الفئة .disabled إلى العناصر في القائمة المنسدلة لتنسيقها كعناصر معطلة.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

بشكل افتراضي، يتم تحديد موقع القائمة المنسدلة تلقائياً بنسبة 100% من الأعلى وعلى طول الجانب الأيسر من العنصر الأب. يمكنك تغيير ذلك باستخدام فئات الاتجاه .drop*، ولكن يمكنك أيضاً التحكم فيها باستخدام فئات تعديل إضافية.

أضف .dropdown-menu-end إلى .dropdown-menu لمحاذاة القائمة المنسدلة إلى اليمين. يتم عكس الاتجاهات عند استخدام Bootstrap في وضع RTL، مما يعني أن .dropdown-menu-end ستظهر على الجانب الأيسر.

تنبيه! يتم تحديد مواقع القوائم المنسدلة بفضل Popper إلا عندما تكون موجودة داخل شريط تنقل (navbar).

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

المحاذاة المتجاوبة (Responsive alignment)

إذا كنت ترغب في استخدام المحاذاة المتجاوبة، فقم بتعطيل تحديد المواقع الديناميكي عن طريق إضافة سمة data-bs-display="static" واستخدم فئات التباين المتجاوبة.

لمحاذاة القائمة المنسدلة إلى اليمين مع نقطة التوقف المحددة أو أكبر، أضف .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

لمحاذاة القائمة المنسدلة إلى اليسار مع نقطة التوقف المحددة أو أكبر، أضف .dropdown-menu-end و .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

لاحظ أنه لا تحتاج إلى إضافة سمة data-bs-display="static" إلى أزرار القوائم المنسدلة في الـ navbars، بما أن Popper لا يُستخدم في الـ navbars.

خيارات المحاذاة (Alignment options)

باستخدام معظم الخيارات الموضحة أعلاه، إليك عرض توضيحي شامل لمختلف خيارات محاذاة القوائم المنسدلة في مكان واحد.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

محتوى القائمة

الرؤوس (Headers)

أضف رأساً (header) لتسمية أقسام الإجراءات في أي قائمة منسدلة.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

فواصل (Dividers)

افصل مجموعات عناصر القائمة ذات الصلة باستخدام فاصل.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

نصوص طويلة (Text)

ضع أي نص حر داخل قائمة منسدلة مع استخدام أدوات التباعد (spacing utilities). لاحظ أنك ستحتاج على الأرجح إلى أنماط تحجيم إضافية لتقييد عرض القائمة.

html

<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
  <p>
    Some example text that’s free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

النماذج (Forms)

ضع نموذجاً داخل قائمة منسدلة، أو اجعله هو القائمة المنسدلة، واستخدم أدوات الهوامش أو التباعد (margin or padding utilities) لتوفير المساحة التي تحتاجها.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

خيارات القائمة المنسدلة (options)

استخدم data-bs-offset أو data-bs-reference لتغيير موقع القائمة المنسدلة.

html

<div class="d-flex">
  <div class="dropdown">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group me-1">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

سلوك الإغلاق التلقائي

بشكل افتراضي، يتم إغلاق القائمة المنسدلة عند النقر داخل أو خارج القائمة المنسدلة. يمكنك استخدام خيار autoClose لتغيير هذا السلوك للقائمة المنسدلة.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap، تستخدم القوائم المنسدلة الآن متغيرات CSS محلية على الفئة .dropdown-menu لتعزيز التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass، لذا فإن التخصيص عبر Sass لا يزال مدعوماً أيضاً.

scss/_dropdown.scss

--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

تتضمن عناصر القائمة المنسدلة متغيراً واحداً على الأقل غير محدد في .dropdown. وهذا يتيح لك تقديم قيمة جديدة بينما يعتمد Bootstrap على قيمة احتياطية (fallback value).

--bs-dropdown-item-border-radius

يمكن رؤية التخصيص من خلال متغيرات CSS في الفئة .dropdown-menu-dark حيث نقوم بتجاوز قيم محددة دون إضافة محددات CSS مكررة.

scss/_dropdown.scss

--#{$prefix}dropdown-color: #{$dropdown-dark-color};
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

متغيرات الـ (Sass)

متغيرات لجميع القوائم المنسدلة:

scss/_variables.scss

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    var(--#{$prefix}body-color);
$dropdown-bg:                       var(--#{$prefix}body-bg);
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            var(--#{$prefix}border-radius);
$dropdown-border-width:             var(--#{$prefix}border-width);
$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}); // stylelint-disable-line function-disallowed-list
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               var(--#{$prefix}box-shadow);

$dropdown-link-color:               var(--#{$prefix}body-color);
$dropdown-link-hover-color:         $dropdown-link-color;
$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color);

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

متغيرات لـ القائمة المنسدلة الداكنة:

scss/_variables.scss

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

متغيرات للـ carets القائمة على CSS والتي تشير إلى تفاعلية القائمة المنسدلة:

scss/_variables.scss

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

دمج/مزج الـ (Sass mixins)

تُستخدم الـ Mixins لإنشاء الـ carets القائمة على CSS ويمكن العثور عليها في scss/mixins/_caret.scss.

scss/mixins/_caret.scss

@mixin caret-down($width: $caret-width) {
  border-top: $width solid;
  border-right: $width solid transparent;
  border-bottom: 0;
  border-left: $width solid transparent;
}

@mixin caret-up($width: $caret-width) {
  border-top: 0;
  border-right: $width solid transparent;
  border-bottom: $width solid;
  border-left: $width solid transparent;
}

@mixin caret-end($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: 0;
  border-bottom: $width solid transparent;
  border-left: $width solid;
}

@mixin caret-start($width: $caret-width) {
  border-top: $width solid transparent;
  border-right: $width solid;
  border-bottom: $width solid transparent;
}

@mixin caret(
  $direction: down,
  $width: $caret-width,
  $spacing: $caret-spacing,
  $vertical-align: $caret-vertical-align
) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $spacing;
      vertical-align: $vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down($width);
      } @else if $direction == up {
        @include caret-up($width);
      } @else if $direction == end {
        @include caret-end($width);
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $spacing;
        vertical-align: $vertical-align;
        content: "";
        @include caret-start($width);
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

الاستخدام (Usage)

عن طريق سمات البيانات (data attributes) أو الـ JavaScript، تقوم إضافة الـ dropdown بتبديل المحتوى المخفي (قوائم الـ dropdown) عن طريق تبديل الفئة .show على العنصر الأب .dropdown-menu. يتم الاعتماد على السمة data-bs-toggle="dropdown" لإغلاق قوائم الـ dropdown على مستوى التطبيق، لذا من الجيد استخدامها دائماً.

في الأجهزة التي تدعم اللمس، يؤدي فتح القائمة المنسدلة إلى إضافة معالجات mouseover فارغة إلى الأبناء المباشرين لعنصر <body>. هذه الحيلة القبيحة - كما هو معترف بها - ضرورية للالتفاف على مشكلة في تفويض الأحداث في iOs، والتي قد تمنع نقرة في أي مكان خارج القائمة المنسدلة من تشغيل الكود الذي يغلق القائمة المنسدلة. بمجرد إغلاق القائمة المنسدلة، يتم إزالة معالجات mouseover الفارغة الإضافية هذه.

عن طريق سمات البيانات (Via data attributes)

أضف data-bs-toggle="dropdown" إلى رابط أو زر لتبديل القائمة المنسدلة.

<div class="dropdown">
  <button type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

عبر الـ (JavaScript)

يجب أن تحتوي القوائم المنسدلة (Dropdowns) على data-bs-toggle="dropdown" في عنصر التشغيل الخاص بها، بغض النظر عما إذا كنت تستدعي القائمة المنسدلة عبر الـ JavaScript أو تستخدم الـ data-api.

استدعِ القوائم المنسدلة عبر الـ JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

خيارات

بما أنه يمكن تمرير الخيارات عبر سمات البيانات (data attributes) أو الـ JavaScript، يمكنك إضافة اسم الخيار إلى -data-bs ، كما في "data-bs-animation="{value}. تأكد من تغيير نوع حالة اسم الخيار من “camelCase” إلى “kebab-case” عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال، استخدم "data-bs-custom-class="beautifier بدلاً من "data-bs-customClass="beautifier.

بدءاً من Bootstrap 5.2.0، تدعم جميع المكونات سمة بيانات محجوزة تجريبية وهي data-bs-config والتي يمكن أن تحتوي على تكوين بسيط للمكون كسلسلة JSON. عندما يحتوي العنصر على سمات 'data-bs-config='{"delay":0, "title":123} و "data-bs-title="456، ستكون قيمة title النهائية هي 456 وستقوم سمات البيانات المنفصلة بتجاوز القيم المعطاة في data-bs-config. بالإضافة إلى ذلك، يمكن لسمات البيانات الموجودة أن تحتوي على قيم JSON مثل 'data-bs-delay='{"show":0,"hide":150}.

كائن التكوين النهائي هو النتيجة المدمجة لـ data-bs-config و -data-bs و js object حيث يقوم آخر مفتاح-قيمة مُعطى بتجاوز القيم الأخرى.

الاسم	النوع	الإفتراضي	الوصف
`autoClose`	boolean, string	`true`	تهيئة سلوك الإغلاق التلقائي للقائمة المنسدلة: `true` - سيتم إغلاق القائمة المنسدلة عند النقر خارج أو داخل قائمة المنسدلة. `false` - سيتم إغلاق القائمة المنسدلة عن طريق النقر على زر التبديل واستدعاء طريقة `hide` أو `toggle` يدوياً. (أيضاً لن يتم إغلاقها بالضغط على مفتاح `Esc`) `'inside'` - سيتم إغلاق القائمة المنسدلة (فقط) عند النقر داخل قائمة المنسدلة. `'outside'` - سيتم إغلاق القائمة المنسدلة (فقط) عند النقر خارج قائمة المنسدلة. ملاحظة: يمكن دائماً إغلاق القائمة المنسدلة باستخدام مفتاح `Esc`.
`boundary`	string, element	`'clippingParents'`	حدود قيود التجاوز (Overflow) للقائمة المنسدلة (ينطبق فقط على مُعدل preventOverflow الخاص بـ Popper). بشكل افتراضي تكون `clippingParents` ويمكن أن تقبل مرجع HTMLElement (عبر الـ JavaScript فقط). لمزيد من المعلومات، راجع مستندات detectOverflow الخاصة بـ Popper.
`display`	string	`'dynamic'`	بشكل افتراضي، نستخدم Popper لتحديد المواقع الديناميكي. قم بتعطيل ذلك باستخدام `static`.
`offset`	array, string, function	`[0, 2]`	إزاحة القائمة المنسدلة بالنسبة لهدفها. يمكنك تمرير سلسلة نصية في سمات البيانات بقيم مفصولة بفاصلة مثل: `data-bs-offset="10,20"`. عندما يتم استخدام دالة لتحديد الإزاحة، يتم استدعاؤها بكائن يحتوي على وضعية popper، والمرجع، ومستطيلات popper كأول وسيط لها. يتم تمرير عقدة DOM للعنصر المشغل كوسيط ثانٍ. يجب أن تعيد الدالة مصفوفة تحتوي على رقمين: skidding، distance. لمزيد من المعلومات، راجع مستندات offset الخاصة بـ Popper.
`popperConfig`	null, object, function	`null`	لتغيير إعدادات Popper الافتراضية في Bootstrap، راجع إعدادات Popper. عندما يتم استخدام دالة لإنشاء إعدادات Popper، يتم استدعاؤها بكائن يحتوي على إعدادات Popper الافتراضية لـ Bootstrap. يساعدك ذلك في استخدام ودمج الإعدادات الافتراضية مع إعداداتك الخاصة. يجب أن تعيد الدالة كائن إعدادات لـ Popper.
`reference`	string, element, object	`'toggle'`	العنصر المرجعي للقائمة المنسدلة. يقبل القيم `'toggle'`، `'parent'`، أو مرجع HTMLElement أو كائناً يوفر `getBoundingClientRect`. لمزيد من المعلومات، راجع مستندات constructor و مستندات virtual element الخاصة بـ Popper.

استخدام الدالة (function) مع `popperConfig`

const dropdown = new bootstrap.Dropdown(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

الطرق، الأساليب (Methods)

الأسلوب	الوصف
`dispose`	يقوم بتدمير القائمة المنسدلة للعنصر. (يزيل البيانات المخزنة في عنصر DOM)
`getInstance`	طريقة ثابتة (Static method) تتيح لك الحصول على نسخة القائمة المنسدلة المرتبطة بعنصر DOM، يمكنك استخدامها بهذا الشكل: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	طريقة ثابتة (Static method) تعيد نسخة القائمة المنسدلة المرتبطة بعنصر DOM أو تنشئ نسخة جديدة في حال لم يتم تهيئتها. يمكنك استخدامها بهذا الشكل: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	يخفي قائمة المنسدلة لشريط تنقل (navbar) أو تنقل مبوب معين.
`show`	يظهر قائمة المنسدلة لشريط تنقل (navbar) أو تنقل مبوب معين.
`toggle`	يبدل حالة ظهور قائمة المنسدلة لشريط تنقل (navbar) أو تنقل مبوب معين.
`update`	يحدث موقع القائمة المنسدلة للعنصر.

الأحداث (Events)

يتم إطلاق جميع أحداث القوائم المنسدلة عند عنصر التبديل ثم تنتقل إلى الأعلى (bubbled up). لذا يمكنك أيضاً إضافة مستمعي أحداث (event listeners) على العنصر الأب لـ .dropdown-menu. تمتلك الأحداث hide.bs.dropdown و hidden.bs.dropdown خاصية clickEvent (فقط عندما يكون نوع الحدث الأصلي هو click) والتي تحتوي على كائن حدث (Event Object) لحدث النقر.

نوع الحدث	الوصف
`hide.bs.dropdown`	يتم إطلاقه فوراً عند استدعاء طريقة `hide` الخاصة بالنسخة.
`hidden.bs.dropdown`	يتم إطلاقه عندما تنتهي عملية إخفاء القائمة المنسدلة عن المستخدم واكتمال انتقالات CSS.
`show.bs.dropdown`	يتم إطلاقه فوراً عند استدعاء طريقة `show` الخاصة بالنسخة.
`shown.bs.dropdown`	يتم إطلاقه عندما تصبح القائمة المنسدلة مرئية للمستخدم واكتمال انتقالات CSS.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

القوائم المنسدلة (Dropdowns)

نظرة عامة

إمكانية الوصول

أمثلة

زر مفرد (Single)

الزر المزدوج ، المركب (Split)

التحجيم

القوائم المنسدلة الداكنة

الإتجاهات

متمركزة (Centered)

قائمة منسدلة للأعلى (Dropup)

قائمة منسدلة للأعلى والوسط (Dropup centered)

اسقاط في النهاية (Dropend)

اسقاط في البداية (Dropstart)

عناصر القائمة

نشط (Active)

تعطيل (Disabled)

محاذاة القائمة (Menu alignment)

المحاذاة المتجاوبة (Responsive alignment)

خيارات المحاذاة (Alignment options)

محتوى القائمة

الرؤوس (Headers)

Dropdown header

فواصل (Dividers)

نصوص طويلة (Text)

النماذج (Forms)

خيارات القائمة المنسدلة (options)

سلوك الإغلاق التلقائي

الـ (CSS)

المتغيرات (Variables)

متغيرات الـ (Sass)

دمج/مزج الـ (Sass mixins)

الاستخدام (Usage)

عن طريق سمات البيانات (Via data attributes)

عبر الـ (JavaScript)

خيارات

استخدام الدالة (function) مع popperConfig

الطرق، الأساليب (Methods)

الأحداث (Events)

استخدام الدالة (function) مع `popperConfig`