Bootstrap

Bootstrap 4 Dropdowns

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

التاريخ

04 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1521

المواضيع

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>

</> Dropup

لعكس فتح القوائم المنسدله لاعلي استخدم dropup class بدلاً من dropup class
<div class="dropup">

</> 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
عدد التقييمات