تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
Check
in English

هبوط قطرة

قم بتبديل التراكبات السياقية لعرض قوائم الروابط والمزيد باستخدام البرنامج الإضافي المنسدل Bootstrap.

على هذه الصفحة

ملخص

القوائم المنسدلة هي تراكبات سياقية قابلة للتبديل لعرض قوائم الروابط والمزيد. لقد تم جعلها تفاعلية مع البرنامج المساعد JavaScript لقائمة Bootstrap المنسدلة. يتم تبديلهم عن طريق النقر وليس بالمرور ؛ هذا قرار تصميم مقصود .

القوائم المنسدلة مبنية على مكتبة طرف ثالث ، Popper ، والتي توفر تحديد المواقع الديناميكي واكتشاف منفذ العرض. تأكد من تضمين popper.min.js قبل JavaScript في Bootstrap أو استخدم bootstrap.bundle.min.js/ bootstrap.bundle.jsالذي يحتوي على Popper. لا يتم استخدام Popper لوضع القوائم المنسدلة في أشرطة التنقل على الرغم من أن تحديد المواقع الديناميكي غير مطلوب.

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

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

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

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

أمثلة

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

زر واحد

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

لغة البرمجة 
<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>

ومع <a>العناصر:

لغة البرمجة 
<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">
    Action
  </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>

زر الانقسام

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

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

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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>

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

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

لغة البرمجة 
<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:

لغة البرمجة 
<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">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <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

يتم عكس الاتجاهات عند استخدام Bootstrap في RTL ، مما يعني .dropstartظهور المعنى على الجانب الأيمن.

توسيط

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

لغة البرمجة 
<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إلى العنصر الأصلي.

<!-- 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-centerالعنصر الرئيسي.

لغة البرمجة 
<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إلى العنصر الرئيسي.

<!-- 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>العناصر كعناصر قائمة منسدلة.

لغة البرمجة 
<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 المخصص أو الأدوات المساعدة النصية.

لغة البرمجة 
<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إلى العناصر في القائمة المنسدلة لجعلها نمطًا نشطًا . لنقل الحالة النشطة إلى التقنيات المساعدة ، استخدم aria-currentالسمة - باستخدام pageالقيمة للصفحة الحالية ، أو trueللعنصر الحالي في مجموعة.

لغة البرمجة 
<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إلى العناصر في القائمة المنسدلة لتصميمها على أنها معطلة .

لغة البرمجة 
<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">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 إلا عندما تكون موجودة في شريط التنقل.
لغة البرمجة 
<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>

محاذاة مستجيبة

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

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

لغة البرمجة 
<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.

لغة البرمجة 
<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"سمة إلى أزرار القائمة المنسدلة في أشرطة التنقل ، حيث لا يتم استخدام Popper في أشرطة التنقل.

خيارات المحاذاة

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

لغة البرمجة 
<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>

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

الرؤوس

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

لغة البرمجة 
<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>

المقسمات

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

لغة البرمجة 
<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 class="dropdown-menu p-4 text-muted" 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>

نماذج

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

جديد هنا؟ اشتراك هل نسيت كلمة السر؟
لغة البرمجة 
<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 protected]">
    </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>
لغة البرمجة 
<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 protected]">
    </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>

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

لغة البرمجة 
<div class="d-flex">
  <div class="dropdown me-1">
    <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">
    <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الخيار لتغيير سلوك القائمة المنسدلة.

لغة البرمجة 
<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 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="outside" 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="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

المتغيرات

تمت الإضافة في الإصدار 5.2.0

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

  --#{$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};

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

  --#{$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};

متغيرات ساس

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

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

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

$dropdown-link-disabled-color:      $gray-500;

$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

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

$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;

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

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

الخلطات

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

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

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

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

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

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

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

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

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

إستعمال

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

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

عبر سمات البيانات

أضف 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

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

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
data-bs-toggle="dropdown"لا يزال مطلوبًا

بغض النظر عما إذا كنت تتصل بالقائمة المنسدلة عبر JavaScript أو تستخدم واجهة برمجة تطبيقات البيانات بدلاً من ذلك ، data-bs-toggle="dropdown"يلزم دائمًا أن تكون موجودًا في عنصر تشغيل القائمة المنسدلة.

خيارات

نظرًا لأنه يمكن تمرير الخيارات عبر سمات البيانات أو 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"النهائية وستتجاوز سمات البيانات المنفصلة القيم المعطاة . بالإضافة إلى ذلك ، يمكن لسمات البيانات الحالية استيعاب قيم JSON مثل .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

اسم يكتب تقصير وصف
autoClose منطقي ، خيط true قم بتكوين سلوك الإغلاق التلقائي للقائمة المنسدلة:
  • true- سيتم إغلاق القائمة المنسدلة عن طريق النقر خارج أو داخل القائمة المنسدلة.
  • false- سيتم إغلاق القائمة المنسدلة عن طريق النقر فوق زر التبديل والاتصال hideأو toggleالطريقة يدويًا. (لن يتم إغلاقها أيضًا عن طريق الضغط على escالمفتاح)
  • 'inside'- سيتم إغلاق القائمة المنسدلة (فقط) من خلال النقر داخل القائمة المنسدلة.
  • 'outside'- سيتم إغلاق القائمة المنسدلة (فقط) بالنقر خارج القائمة المنسدلة.
ملاحظة: يمكن دائمًا إغلاق القائمة المنسدلة ESCبالمفتاح.
boundary سلسلة ، عنصر 'clippingParents' حدود قيد تجاوز السعة بالقائمة المنسدلة (تنطبق فقط على معدل منع تجاوز تدفق Popper). بشكل افتراضي clippingParents، يمكن قبول مرجع HTMLElement (عبر JavaScript فقط). لمزيد من المعلومات ، راجع مستندات DiscoverOverflow الخاصة بـ Popper .
display سلسلة 'dynamic' بشكل افتراضي ، نستخدم Popper لتحديد المواقع الديناميكي. تعطيل هذا باستخدام static.
offset مجموعة ، سلسلة ، وظيفة [0, 2] إزاحة القائمة المنسدلة بالنسبة إلى هدفها. يمكنك تمرير سلسلة في سمات البيانات بقيم مفصولة بفواصل مثل data-bs-offset="10,20":. عندما يتم استخدام دالة لتحديد الإزاحة ، يتم استدعاؤها بكائن يحتوي على موضع بوبر ، والمرجع ، ومستقيم بوبر كوسيطة أولى لها. يتم تمرير عقدة DOM المشغلة كوسيطة ثانية. يجب أن تُرجع الدالة مصفوفة برقمين : الانزلاق والمسافة . لمزيد من المعلومات راجع مستندات تعويض Popper .
popperConfig فارغة ، كائن ، وظيفة null لتغيير تكوين Popper الافتراضي الخاص بـ Bootstrap ، راجع تكوين Popper . عند استخدام وظيفة لإنشاء تكوين Popper ، يتم استدعاؤها بكائن يحتوي على تكوين Popper الافتراضي الخاص بـ Bootstrap. يساعدك على استخدام ودمج الافتراضي مع التكوين الخاص بك. يجب أن تقوم الوظيفة بإرجاع كائن تكوين لـ Popper.
reference سلسلة ، عنصر ، كائن 'toggle' عنصر مرجعي من القائمة المنسدلة. يقبل قيم 'toggle'، 'parent'مرجع HTMLElement أو تقديم كائن getBoundingClientRect. لمزيد من المعلومات ، راجع مستندات مُنشئ Popper ومستندات العناصر الافتراضية .

استخدام وظيفة معpopperConfig 

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

طُرق

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

الأحداث

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

نوع الحدث وصف
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...
})