Bootstrap 4 Dropdowns
ستتعلم في هذا الدرس عمل قوائم منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية بال Bootstrap
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
Bootstrap 4 Dropdowns
</> Bootstrap 4 Dropdowns add_circle_outline
ال قوائم Dropdowns هي قائمة منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية
لعمل القوائم المنسدلة قم بالاتي :
- قم بعمل parant div ثم اضف له dropdown Class
- ثم قم بوضع بداخلة button يحمل dropdown-toggle وهو الزي يقوم بفتح واغلاق القوائم الفرعية
- لعمل قوائم فرعية قم بانشاء اسفل ال button عنصر جديد يحمل dropdown-menu وقم بوضع محتوي القائمة داخل a Element يضاف له dropdown-item
<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 add_circle_outline
ال dropdown-divider class يستحدم لعمل فاصل border افقي بين ال links داخل ال dropdown
<div class="dropdown-divider"></div>
</> Dropdown Position add_circle_outline
لعمل 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 add_circle_outline
لتغيير فتح روابط ال 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 add_circle_outline
<div class="dropup">
</> Dropdown Text add_circle_outline
ال 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 add_circle_outline
<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
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
