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

Dropdown button

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

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> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز