Bootstrap 4 Dropdowns
ستتعلم في هذا الدرس عمل قوائم منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية بال Bootstrap
التاريخ
04 ديسمبر 2021
الدروس
34
المستوى
العامة
اللغة
انجليزي
المشاهدات
1521
المواضيع
6
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>
</> Dropup
لعكس فتح القوائم المنسدله لاعلي استخدم dropup class بدلاً من dropup class
<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>