Bootstrap 4 القوائم المنسدلة
القائمة المنسدلة الأساسية
القائمة المنسدلة هي قائمة قابلة للتبديل تسمح للمستخدم باختيار قيمة واحدة من قائمة محددة مسبقًا:
مثال
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
شرح المثال
يشير .dropdownالفصل إلى قائمة منسدلة.
لفتح القائمة المنسدلة ، استخدم زرًا أو رابطًا مع فئة من .dropdown-toggleوالسمة
data-toggle="dropdown".
أضف .dropdown-menuالفصل إلى <div>عنصر لإنشاء القائمة المنسدلة بالفعل. ثم أضف
.dropdown-itemالفصل إلى كل عنصر (روابط أو أزرار) داخل القائمة المنسدلة.
مقسم القائمة المنسدلة
يستخدم .dropdown-dividerالفصل لفصل الروابط داخل القائمة المنسدلة بحد أفقي رفيع:
مثال
<div class="dropdown-divider"></div>
رأس القائمة المنسدلة
يستخدم .dropdown-headerالفصل لإضافة رؤوس داخل القائمة المنسدلة:
مثال
<div class="dropdown-header">Dropdown header 1</div>
تعطيل والعناصر النشطة
قم بتمييز عنصر قائمة منسدلة محدد مع .activeالفصل (يضيف لون خلفية أزرق).
لتعطيل عنصر في القائمة المنسدلة ، استخدم .disabledالفصل الدراسي (يحصل على لون نص رمادي فاتح ورمز "علامة ممنوع الوقوف" عند التمرير):
مثال
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
موقف القائمة المنسدلة
يمكنك أيضًا إنشاء قائمة "منسدلة" أو "منسدلة" ، عن طريق إضافة .droprightأو .dropleftفئة إلى عنصر القائمة المنسدلة. لاحظ أنه تتم إضافة علامة الإقحام / السهم تلقائيًا:
إسقاط
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
القائمة المنسدلة اليمنى
لمحاذاة القائمة المنسدلة إلى اليمين ، أضف .dropdown-menu-rightالفئة إلى العنصر باستخدام القائمة المنسدلة.
مثال
<div class="dropdown-menu dropdown-menu-right">
إسقاط ما يصل
إذا كنت تريد توسيع القائمة المنسدلة لأعلى بدلاً من الأسفل ، فغيّر عنصر <div> بالفئة = "القائمة المنسدلة" إلى "dropup":
مثال
<div class="dropup">
نص القائمة المنسدلة
تُستخدم .dropdown-item-textالفئة لإضافة نص عادي إلى عنصر قائمة منسدلة ، أو تُستخدم على الروابط لتصميم الارتباط الافتراضي.
مثال
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
أزرار مجمعة مع قائمة منسدلة
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
تقسيم القوائم المنسدلة
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
مجموعة الأزرار العمودية مع القائمة المنسدلة
مثال
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
إكمال مرجع Bootstrap 4 المنسدلة
للحصول على مرجع كامل لجميع خيارات القائمة المنسدلة والأساليب والأحداث ، انتقل إلى مرجع القائمة المنسدلة Bootstrap 4 JS .