لیست فله‌ای Bootstrap 5

لیست فله‌ای پایه

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

مثال

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    دکمه فله‌ای
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">لینک 1</a></li>
    <li><a class="dropdown-item" href="#">لینک 2</a></li>
    <li><a class="dropdown-item" href="#">لینک 3</a></li>
  </ul>
</div>

به طور شخصی امتحان کنید

توضیح مثال

.dropdown شبکه‌ای که به منوی فله‌ای اشاره دارد، استفاده کنید.

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

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

خط افقی منوی فروزشده

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

مثال

<li><hr class="dropdown-divider"></hr></li>

به طور شخصی امتحان کنید

عنوان منوی فروزشده

.dropdown-header کلاس برای افزودن عنوان به منوی فروزشده استفاده می‌شود:

مثال

<li><h5 class="dropdown-header">عنوان فروزشده 1</h5></li>

به طور شخصی امتحان کنید

آیتم‌های غیرفعال و فعال

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

برای غیرفعال کردن یکی از آیتم‌های منوی فروزشده، از .disabled کلاس (در حالت قرارگیری روی آن رنگ متن خفیف و نماد "no-parking-sign" اضافه می‌شود).

مثال

<li><a class="dropdown-item" href="#">معمولی</a></li>
<li><a class="dropdown-item active" href="#">فعال</a></li>
<li><a class="dropdown-item disabled" href="#">غیرفعال</a></li>

به طور شخصی امتحان کنید

محل منوی فروزشده

شما همچنین می‌توانید از .dropend یا .dropstart کلاس به عنصر فروزشده اضافه کنید تا منوی "dropend" یا "dropstart" ایجاد شود. توجه داشته باشید که علامت/میله به صورت خودکار اضافه می‌شود:

Dropright

<div class="dropdown dropend">

به طور شخصی امتحان کنید

Dropleft

<div class="dropdown dropstart">

به طور شخصی امتحان کنید

منوی فروزشده راست‌چین

برای قرار دادن منوی فروزشده در سمت راست، لطفاً .dropdown-menu-end کلاس به عناصر دارای .dropdown-menu عناصر:

مثال

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

به طور شخصی امتحان کنید

منوی بالا زن

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

مثال

<div class="dropup">

به طور شخصی امتحان کنید

متن کشویی

.dropdown-item-text کلاس برای اضافه کردن متن ساده به آیتم‌های کشویی استفاده می‌شود، یا برای اضافه کردن سبک پیش‌فرض به لینک‌ها استفاده می‌شود.

مثال

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">لینک 1</a></li>
  <li><a class="dropdown-item" href="#">لینک 2</a></li>
  <li><a class="dropdown-item" href="#">لینک 3</a></li>
  <li><a class="dropdown-item-text" href="#">لینک متنی</a></li>
  <li><span class="dropdown-item-text">متن ساده</span></li>
</ul>

به طور شخصی امتحان کنید

گروه‌بندی دکمه‌ها و لیست‌های کشویی

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">داجونگ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">میلتی‌مدیا</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">تلفن همراه</a></li>
      <li><a class="dropdown-item" href="#">تبلت</a></li>
    </ul>
  </div>
</div>

به طور شخصی امتحان کنید

گروه‌بندی عمودی دکمه‌ها و لیست‌های کشویی

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">هواوی</button>
  <button type="button" class="btn btn-primary">داجونگ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">میلتی‌مدیا</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">تلفن همراه</a></li>
      <li><a class="dropdown-item" href="#">تبلت</a></li>
    </ul>
  </div>
</div>

به طور شخصی امتحان کنید