Bootstrap المنسدلة
القائمة المنسدلة الأساسية
القائمة المنسدلة هي قائمة قابلة للتبديل تسمح للمستخدم باختيار قيمة واحدة من قائمة محددة مسبقًا:
مثال
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
شرح المثال
يشير .dropdownالفصل إلى قائمة منسدلة.
لفتح القائمة المنسدلة ، استخدم زرًا أو رابطًا مع فئة من .dropdown-toggleوالسمة
data-toggle="dropdown".
ينشئ .caretالفصل رمز سهم إقحام () ، مما يشير إلى أن الزر عبارة عن قائمة منسدلة.
أضف .dropdown-menuالفصل إلى <ul>عنصر لإنشاء القائمة المنسدلة بالفعل.
مقسم القائمة المنسدلة
يستخدم .dividerالفصل لفصل الروابط داخل القائمة المنسدلة بحد أفقي رفيع:
مثال
<li class="divider"></li>
رأس القائمة المنسدلة
يستخدم .dropdown-headerالفصل لإضافة رؤوس داخل القائمة المنسدلة:
مثال
<li class="dropdown-header">Dropdown header 1</li>
تعطيل والعناصر النشطة
قم بتمييز عنصر قائمة منسدلة محدد بالفئة النشطة (يضيف لون خلفية أزرق).
لتعطيل عنصر في القائمة المنسدلة ، استخدم .disabledالفصل الدراسي (يحصل على لون نص رمادي فاتح ورمز "علامة ممنوع الوقوف" عند التمرير):
مثال
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
موقف القائمة المنسدلة
لمحاذاة القائمة المنسدلة إلى اليمين ، أضف .dropdown-menu-rightالفئة إلى العنصر باستخدام القائمة المنسدلة.
مثال
<ul class="dropdown-menu dropdown-menu-right">
إسقاط ما يصل
إذا كنت تريد توسيع القائمة المنسدلة لأعلى بدلاً من الأسفل ، فغيّر عنصر <div> بالفئة = "القائمة المنسدلة" إلى "dropup":
مثال
<div class="dropup">
المنسدلة سهولة الوصول
للمساعدة في تحسين إمكانية الوصول للأشخاص الذين يستخدمون برامج قراءة الشاشة ، يجب عليك تضمين السمات والسمات التالية roleعند aria-*إنشاء قائمة منسدلة:
مثال
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
استكمال مرجع قائمة Bootstrap المنسدلة
للحصول على مرجع كامل لجميع خيارات القائمة المنسدلة والأساليب والأحداث ، انتقل إلى مرجع قائمة Bootstrap JS المنسدلة .