منو کشویی در Bootstrap ورژن 4

کشویی ساده

یک منوی کشویی یک منوی قابل تنظیم است که به کاربر اجازه می دهد یک مقدار از یک لیست از پیش تعریف شده را انتخاب کند

 <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 یک منوی کشویی را نشان می دهد.

برای باز کردن منوی کشویی، از یک دکمه یا یک لینک با یک کلاس از کشویی استفاده کنید و ویژگی.dropdown-toggle و data-toggle="dropdown"

کلاس .dropdown-menuرا به عنصر <div> اضافه کنید تا در واقع منوی کشویی را بسازید. سپس کلاس .dropdown-itemرا به هر عنصر (لینک یا دکمه) داخل منوی کشویی اضافه کنید.

تقسیم کننده کشو

کلاس .dropdown-divider برای جدا کردن لینک ها در داخل منوی کشویی با یک مرز نازک افقی استفاده می شود.

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

سرتیتر در کشو

کلاس .dropdown-header برای اضافه کردن هدر در داخل منوی کشویی استفاده می شود

 <div class="dropdown-header">Dropdown header 1</div> 

غیر فعال کردن و فعال کردن گزینه ها

یک آیتم کشویی خاص را با کلاس .active فعال کنید (یک رنگ پس زمینه آبی اضافه می کند)

برای غیرفعال کردن یک آیتم در منوی کشویی، از کلاس .disabled  استفاده کنید (رنگ متن خاکستری و نماد "بدون نشانه" را روی شناور نشان می دهد):

 <a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a> 

موقعیت منو کشویی

برای راست چین کردن، کلاس .dropdown-menu-right را به عنصر با .dropdown-menu اضافه کنید:

 <div class="dropdown-menu dropdown-menu-right"> 

Dropup

اگر می خواهید منوی کشویی به جای پایین به سمت بالا بپردازید، عنصر <div> را با class = "dropdown" را به "dropup" تغییر دهید:

 <div class="dropup"> 

تقسیم منو ها

 <div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>