قائمة منسدلة Bootstrap 5

قائمة منسدلة أساسية

القائمة المنسدلة هي قائمة قابلة للتشغيل، تسمح للمستخدمين باختيار القيم من القائمة المسبقة التعريف:

مثال

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    الزر المنسدل
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">رابط 1</a></li>
    <li><a class="dropdown-item" href="#">رابط 2</a></li>
    <li><a class="dropdown-item" href="#">رابط 3</a></li>
  </ul>
</div>

جرب بنفسك

مثال توضيحي

.dropdown النوعية تشير إلى القائمة المنسدلة.

للفتح القائمة المنسدلة، يرجى استخدام .dropdown-toggle {} الصفتها class و الصفة data-toggle="dropdown"

أضف .dropdown-menu الصفتها class إلى <div> العنصر، يمكنه بناء قائمة التسوق الصعودية فعليًا. ثم أضف .dropdown-item أضف الصفتها class إلى كل عنصر في قائمة التسوق الصعودية (رابط أو زر).

خط الفصل في قائمة التسوق الصعودية

.dropdown-divider الصفتها class لتمييز الروابط في قائمة التسوق الصعودية بالخط الفاصل الأفقي:

مثال

<li><hr class="dropdown-divider"></hr></li>

جرب بنفسك

عناوين قائمة التسوق الصعودية

.dropdown-header الصفتها class لاضافة العناوين في قائمة التسوق الصعودية:

مثال

<li><h5 class="dropdown-header">الرأس الأول لقائمة التسوق 1</h5></li>

جرب بنفسك

المشاريع الممنوعة والنشطة

استخدم .active الصفتها class لتحديد عنصر معين في القائمة (إضافة لون خلفية أزرق).

لإيقاف تشغيل عنصر معين في قائمة التسوق الصعودية، استخدم .disabled الصفتها class (للحصول على لون نص خفيف عند التمرير ورمز "no-parking-sign").

مثال

<li><a class="dropdown-item" href="#">عادي</a></li>
<li><a class="dropdown-item active" href="#">نشط</a></li>
<li><a class="dropdown-item disabled" href="#">ممنوع</a></li>

جرب بنفسك

موقع قائمة التسوق الصعودية

يمكنك أيضًا من خلال تعيين .dropend أو .dropstart أضف صفتها class إلى عنصر القائمة لتكوين "dropend" أو "dropstart" قائمة. يُلاحظ أن رمز التداخل/السهم يتم إضافته تلقائيًا:

Dropright

<div class="dropdown dropend">

جرب بنفسك

Dropleft

<div class="dropdown dropstart">

جرب بنفسك

تباين الأيمن في قائمة التسوق الصعودية

للتباين الأيمن في قائمة التسوق الصعودية، استخدم .dropdown-menu-end أضف صفتها class إلى العناصر التي تحتوي على .dropdown-menu العناصر التالية:

مثال

<div class="dropdown-menu dropdown-menu-end">

جرب بنفسك

قائمة التسوق الصعودية

إذا كنت ترغب في فتح قائمة التسوق صعودًا بدلاً من الانخفاض، فأعدل عنصر <div> الذي يحتوي على class="dropdown" "dropup"

مثال

<div class="dropup">

جرب بنفسك

نص القائمة المنسدلة

.dropdown-item-text الصفة تستخدم لإضافة نص نظيف إلى العنصر المنسدل، أو لإضافة نمط رابط افتراضي إلى الرابط.

مثال

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">رابط 1</a></li>
  <li><a class="dropdown-item" href="#">رابط 2</a></li>
  <li><a class="dropdown-item" href="#">رابط 3</a></li>
  <li><a class="dropdown-item-text" href="#">رابط نصي</a></li>
  <li><span class="dropdown-item-text">نص نظيف</span></li>
</ul>

جرب بنفسك

مجموعات الأزرار والقوائم المنسدلة

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">شركة Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">هاتف نقال</a></li>
      <li><a class="dropdown-item" href="#">كمبيوتر لوحي</a></li>
    </ul>
  </div>
</div>

جرب بنفسك

مجموعات الأزرار العمودية والقوائم المنسدلة

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">شركة Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">هاتف نقال</a></li>
      <li><a class="dropdown-item" href="#">كمبيوتر لوحي</a></li>
    </ul>
  </div>
</div>

جرب بنفسك