Bootstrap 4 Dropdowns

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

لعمل القوائم المنسدلة قم بالاتي :

قم بعمل parant div ثم اضف له dropdown Class
ثم قم بوضع بداخلة button يحمل dropdown-toggle وهو الزي يقوم بفتح واغلاق القوائم الفرعية
لعمل قوائم فرعية قم بانشاء اسفل ال button عنصر جديد يحمل dropdown-menu وقم بوضع محتوي القائمة داخل a Element يضاف له dropdown-item

Result

HTML

<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

HTML

<div class="dropdown-divider"></div>

جرّب بنفسك

Dropdown Position

لعمل dropdown من جهة اليسار او من جهة اليمين استخدم dropright class او dropleft class الاسهم التي بينهم يتم انشائها تلقائي من جهة اليمين او اليسار علي حسب ال class

HTML

<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>

جرّب بنفسك

HTML

<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

HTML

<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

HTML

<div class="dropup">

جرّب بنفسك

Dropdown Text

ال dropdown-item-text class يستخدم في اضافة نصوص بدلاً من ال links وتغيير ال items style لل dropdown

HTML

<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

HTML

  <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>

جرّب بنفسك

Bootstrap 4 Dropdowns