Bootstrap

Bootstrap 4 Dropdowns

ستتعلم في هذا الدرس عمل قوائم منسدلة القائمة الرئيسية التي يتفرع منها قوائم فرعية بال Bootstrap

التاريخ

04 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1246

المواضيع

6
الشروحات chevron_left Bootstrap 4 Dropdowns chevron_left 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

لعكس فتح القوائم المنسدله لاعلي استخدم 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>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.