منسدلة بسيطة
هناك قائمة منسدلة هي القائمة و toggleable التي تسمح للمستخدم لاختيار قيمة واحدة من قائمة محددة مسبقا:
مثال
<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 يستخدم الطبقة إلى وصلات منفصلة داخل القائمة المنسدلة مع الحدود أفقي رفيع:
المنسدلة رأس
و .dropdown-header يستخدم فئة لإضافة رؤوس داخل القائمة المنسدلة:
تعطيل عنصر
لتعطيل عنصر في القائمة المنسدلة، استخدم .disabled الفئة:
الوظيفة القائمة المنسدلة
إلى اليمين محاذاة القائمة المنسدلة، إضافة .dropdown-menu-right فئة إلى عنصر مع .dropdown-القائمة:
إسقاط ما يصل
إذا كنت ترغب في القائمة المنسدلة لتوسيع صعودا بدلا من الأسفل، تغيير <div> العنصر مع class="dropdown" إلى "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> انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
استكمال التمهيد منسدلة المرجعي
للإشارة كاملة من جميع الخيارات المنسدلة والأساليب والأحداث، انتقل إلى لدينا التمهيد شبيبة منسدلة المرجعي .