Bootstrap

Bootstrap 4 Dropdowns

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

التاريخ

04 ديسمبر 2021

الدروس

34

المستوى

العامة

اللغة

انجليزي

المشاهدات

1438

المواضيع

6
الشروحات chevron_left Bootstrap 4 Dropdowns chevron_left Bootstrap

Bootstrap 4 Dropdowns

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

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