Bootstrap 4 Dropdowns
ستتعلم في هذا الدرس عمل قوائم منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية بال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap 4 Dropdowns
</> Bootstrap 4 Dropdowns
ال قوائم Dropdowns هي قائمة منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية
لعمل القوائم المنسدلة قم بالاتي :
- قم بعمل parant div ثم اضف له dropdown Class
- ثم قم بوضع بداخلة button يحمل dropdown-toggle وهو الزي يقوم بفتح واغلاق القوائم الفرعية
- لعمل قوائم فرعية قم بانشاء اسفل ال button عنصر جديد يحمل dropdown-menu وقم بوضع محتوي القائمة داخل a Element يضاف له dropdown-item
Result
يظهر الكود بهذا الشكل على المتصفح
<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 Divider
ال dropdown-divider class يستحدم لعمل فاصل border افقي بين ال links داخل ال dropdown
Result
يظهر الكود بهذا الشكل على المتصفح
<div class="dropdown-divider"></div>
</> Dropdown Position
لعمل dropdown من جهة اليسار او من جهة اليمين استخدم dropright class او dropleft class الاسهم التي بينهم يتم انشائها تلقائي من جهة اليمين او اليسار علي حسب ال class
<div class="dropdown dropleft float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropleft 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>
<div class="dropdown dropleft float-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropleft 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 Menu Right
لتغيير فتح روابط ال dropdown من جهة اليمين او اليسار استخدم ال dropdown-menu-right class مع ال dropdown-menu class
<div class="container">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Open From Right
</button>
<div class="dropdown-menu dropdown-menu-right">
<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>
</div>
</> Dropup
<div class="dropup">
</> Dropdown Text
ال dropdown-item-text class يستخدم في اضافة نصوص بدلاً من ال links وتغيير ال items style لل dropdown
<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>
</> Split Button Dropdowns
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
