تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
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" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <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="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <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ظهور المعنى على الجانب الأيمن.

إسقاط ما يصل

تشغيل القوائم المنسدلة فوق العناصر عن طريق الإضافة .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>

إسقاط

تشغيل القوائم المنسدلة على يمين العناصر من خلال إضافتها .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">
    Dropright
  </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 Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Dropleft

تشغيل القوائم المنسدلة على يسار العناصر من خلال إضافتها .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">
  <div class="btn-group dropstart" role="group">
    <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>
  </div>
  <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" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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" href="#" tabindex="-1" 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 إلا عندما تكون موجودة في شريط التنقل.
<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" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
<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>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <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" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <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" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <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" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <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>

ساس

المتغيرات

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

$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:             rgba($black, .15);
$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($gray-900, 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:           $dropdown-padding-y $dropdown-item-padding-x;

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

$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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

عبر JavaScript

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

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"لا يزال مطلوبًا

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

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-، كما في data-bs-offset="". تأكد من تغيير نوع حالة اسم الخيار من camelCase إلى kebab-case عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال ، بدلاً من استخدام data-bs-autoClose="false"، استخدم data-bs-auto-close="false".

اسم يكتب تقصير وصف
boundary سلسلة | عنصر 'clippingParents' حدود قيد تجاوز السعة بالقائمة المنسدلة (تنطبق فقط على معدل منع تجاوز تدفق Popper). بشكل افتراضي 'clippingParents'، يمكن قبول مرجع HTMLElement (عبر JavaScript فقط). لمزيد من المعلومات ، راجع مستندات DiscoverOverflow الخاصة بـ Popper .
reference سلسلة | عنصر | هدف 'toggle' عنصر مرجعي من القائمة المنسدلة. يقبل قيم 'toggle'، 'parent'مرجع HTMLElement أو تقديم كائن getBoundingClientRect. لمزيد من المعلومات ، راجع مستندات مُنشئ Popper ومستندات العناصر الافتراضية .
display سلسلة 'dynamic' بشكل افتراضي ، نستخدم Popper لتحديد المواقع الديناميكي. تعطيل هذا باستخدام static.
offset مجموعة | سلسلة | وظيفة [0, 2]

إزاحة القائمة المنسدلة بالنسبة إلى هدفها. يمكنك تمرير سلسلة في سمات البيانات بقيم مفصولة بفواصل مثل:data-bs-offset="10,20"

عندما يتم استخدام دالة لتحديد الإزاحة ، يتم استدعاؤها بكائن يحتوي على موضع بوبر ، والمرجع ، ومستقيم بوبر كوسيطة أولى لها. يتم تمرير عقدة DOM المشغلة كوسيطة ثانية. يجب أن تُرجع الدالة مصفوفة تحتوي على رقمين :.[skidding, distance]

لمزيد من المعلومات راجع مستندات تعويض Popper .

autoClose منطقي | سلسلة true

قم بتكوين سلوك الإغلاق التلقائي للقائمة المنسدلة:

  • true- سيتم إغلاق القائمة المنسدلة عن طريق النقر خارج أو داخل القائمة المنسدلة.
  • false- سيتم إغلاق القائمة المنسدلة عن طريق النقر فوق زر التبديل والاتصال hideأو toggleالطريقة يدويًا. (لن يتم إغلاقها أيضًا عن طريق الضغط على escالمفتاح)
  • 'inside'- سيتم إغلاق القائمة المنسدلة (فقط) من خلال النقر داخل القائمة المنسدلة.
  • 'outside'- سيتم إغلاق القائمة المنسدلة (فقط) بالنقر خارج القائمة المنسدلة.
popperConfig فارغ | كائن | وظيفة null

لتغيير تكوين Popper الافتراضي الخاص بـ Bootstrap ، راجع تكوين Popper .

عند استخدام وظيفة لإنشاء تكوين Popper ، يتم استدعاؤها بكائن يحتوي على تكوين Popper الافتراضي الخاص بـ Bootstrap. يساعدك على استخدام ودمج الافتراضي مع التكوين الخاص بك. يجب أن تقوم الوظيفة بإرجاع كائن تكوين لـ Popper.

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

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

طُرق

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

الأحداث

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

طريقة وصف
show.bs.dropdown يتم إطلاقه فورًا عند استدعاء طريقة عرض المثيل.
shown.bs.dropdown نشط عندما أصبحت القائمة المنسدلة مرئية للمستخدم واكتملت انتقالات CSS.
hide.bs.dropdown ينطلق فورًا عند استدعاء أسلوب إخفاء المثيل.
hidden.bs.dropdown يتم تنشيطه عند انتهاء إخفاء القائمة المنسدلة عن المستخدم واكتمال انتقالات CSS.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})