رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

کشویی

با افزونه کشویی Bootstrap، همپوشانی های متنی را برای نمایش لیست پیوندها و موارد دیگر تغییر دهید.

بررسی اجمالی

کرکره ها همپوشانی های متنی و قابل تغییر برای نمایش لیست پیوندها و موارد دیگر هستند. آنها با افزونه جاوا اسکریپت کشویی Bootstrap تعاملی ساخته شده اند. آنها با کلیک کردن تغییر می کنند، نه با شناور کردن. این یک تصمیم طراحی عمدی است .

کرکره‌ها بر روی یک کتابخانه شخص ثالث به نام Popper ساخته شده‌اند که موقعیت‌یابی پویا و تشخیص پورت دید را ارائه می‌دهد. حتماً popper.min.js را قبل از جاوا اسکریپت بوت استرپ اضافه کنید یا از bootstrap.bundle.min.js/ bootstrap.bundle.jsکه حاوی Popper است استفاده کنید. پوپر برای قرار دادن کرکره‌ها در نوارهای ناوبری استفاده نمی‌شود، اگرچه موقعیت‌یابی پویا لازم نیست.

دسترسی

استاندارد WAI ARIArole="menu" یک ویجت واقعی را تعریف می کند ، اما این ویژه منوهای برنامه مانندی است که اقدامات یا عملکردها را راه اندازی می کنند. منوهای ARIA فقط می‌توانند شامل آیتم‌های منو، آیتم‌های منوی کادر انتخاب، آیتم‌های منوی دکمه‌های رادیویی، گروه‌های دکمه‌های رادیویی و منوهای فرعی باشند.

از سوی دیگر، فهرست‌های بازشوی Bootstrap به گونه‌ای طراحی شده‌اند که عمومی باشند و برای انواع موقعیت‌ها و ساختارهای نشانه‌گذاری قابل استفاده باشند. به عنوان مثال، امکان ایجاد کرکره‌هایی وجود دارد که حاوی ورودی‌های اضافی و کنترل‌های فرم، مانند فیلدهای جستجو یا فرم‌های ورود هستند. به همین دلیل، Bootstrap هیچ یک از ویژگی ها roleو aria-ویژگی های مورد نیاز برای منوهای ARIA واقعی را انتظار ندارد (و به طور خودکار اضافه نمی کند). نویسندگان باید خود این ویژگی‌های خاص‌تر را لحاظ کنند.

با این حال، بوت استرپ پشتیبانی داخلی را برای اکثر فعل و انفعالات استاندارد منوی صفحه کلید، مانند توانایی حرکت در .dropdown-itemعناصر جداگانه با استفاده از کلیدهای مکان نما و بستن منو با ESCکلید، اضافه می کند.

مثال ها

کلید کشویی (دکمه یا پیوند خود) و منوی کشویی را در داخل .dropdownیا عنصر دیگری که اعلان می کند ، بپیچید position: relative;. کرکره ها را می توان از <a>یا <button>عناصری فعال کرد تا بهتر با نیازهای بالقوه شما مطابقت داشته باشد. نمونه‌هایی که در اینجا نشان داده شده‌اند در صورت لزوم از عناصر معنایی استفاده می‌کنند <ul>، اما نشانه‌گذاری سفارشی پشتیبانی می‌شود.

تک دکمه

هر تکی .btnرا می توان با برخی تغییرات نشانه گذاری به یک ضامن کشویی تبدیل کرد. در اینجا نحوه قرار دادن آنها با هر یک از <button>عناصر آمده است:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

و با <a>عناصر:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

بهترین بخش این است که می توانید این کار را با هر نوع دکمه ای نیز انجام دهید:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

دکمه تقسیم

به طور مشابه، دکمه‌های کشویی را با نشانه‌گذاری تقریباً مشابه با دکمه‌های کشویی ایجاد کنید، اما .dropdown-toggle-splitبرای فاصله‌گذاری مناسب در اطراف کرکره کشویی اضافه کنید.

ما از این کلاس اضافی برای کاهش padding25٪ افقی در دو طرف حفاظ استفاده می کنیم و آن را حذف می کنیم margin-leftکه برای کشویی دکمه های معمولی اضافه شده است. این تغییرات اضافی، حواشی را در مرکز دکمه تقسیم نگه می دارد و یک ناحیه ضربه با اندازه مناسب تری در کنار دکمه اصلی ایجاد می کند.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

سایز بندی

کشویی دکمه‌ها با دکمه‌های همه اندازه‌ها، از جمله دکمه‌های کشویی پیش‌فرض و تقسیم‌بندی کار می‌کنند.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

کرکره های تاریک

برای مطابقت با نوار پیمایش تیره یا سبک سفارشی با افزودن .dropdown-menu-darkبه یک موجود، از منوهای کشویی تیره تر انتخاب .dropdown-menuکنید. هیچ تغییری در موارد کشویی لازم نیست.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

و قرار دادن آن برای استفاده در نوار ناوبری:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

جهت ها

RTL

هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند، به این معنی .dropstartکه در سمت راست ظاهر می شوند.

رها کردن

منوهای کشویی بالای عناصر را با افزودن .dropupبه عنصر والد فعال کنید.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

قطره چکان

.dropendبا افزودن به عنصر والد، منوهای کشویی را در سمت راست عناصر فعال کنید.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

رها شد

.dropstartبا افزودن به عنصر والد، منوهای کشویی را در سمت چپ عناصر فعال کنید.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

می توانید از عناصر <a>یا <button>عناصر به عنوان آیتم های کشویی استفاده کنید.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

همچنین می‌توانید آیتم‌های کشویی غیرتعاملی را با .dropdown-item-text. با استفاده از CSS سفارشی یا ابزارهای متنی، راحت تر استایل کنید.

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

فعال

.activeبه موارد در منوی کشویی اضافه کنید تا آنها را فعال کنید. برای انتقال حالت فعال به فناوری‌های کمکی، از aria-currentویژگی استفاده کنید - با استفاده از pageمقدار صفحه فعلی یا trueمورد فعلی در یک مجموعه.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

معلول

.disabledبه موارد در منوی کشویی اضافه کنید تا آنها را غیرفعال کنید.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

به طور پیش فرض، یک منوی کشویی به طور خودکار 100٪ از بالا و در امتداد سمت چپ والد خود قرار می گیرد. شما می توانید این را با .drop*کلاس های جهت تغییر دهید، اما می توانید آنها را با کلاس های اصلاح کننده اضافی نیز کنترل کنید.

.dropdown-menu-endبه a اضافه کنید .dropdown-menuتا منوی کشویی را تراز کنید. هنگام استفاده از Bootstrap در RTL، دستورالعمل ها منعکس می شوند، به این معنی .dropdown-menu-endکه در سمت چپ ظاهر می شوند.

سر بالا! کرکره ها به لطف Popper قرار می گیرند به جز زمانی که در نوار ناوبری قرار دارند.
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

هم ترازی پاسخگو

اگر می‌خواهید از هم‌ترازی پاسخ‌گو استفاده کنید، با افزودن data-bs-display="static"ویژگی، موقعیت پویا را غیرفعال کنید و از کلاس‌های تنوع پاسخ‌گو استفاده کنید.

برای تراز کردن منوی کشویی به سمت راست با نقطه شکست داده شده یا بزرگتر، اضافه کنید .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

برای تراز کردن منوی کشویی سمت چپ با نقطه شکست داده شده یا بزرگتر، .dropdown-menu-endو اضافه کنید .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

توجه داشته باشید که نیازی به افزودن data-bs-display="static"ویژگی به دکمه‌های کشویی در نوارهای ناوبری ندارید، زیرا Popper در نوارهای ناوبری استفاده نمی‌شود.

گزینه های تراز

با در نظر گرفتن اکثر گزینه های نشان داده شده در بالا، در اینجا یک نسخه نمایشی سینک آشپزخانه کوچک از گزینه های مختلف تراز کشویی در یک مکان وجود دارد.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

سرصفحه ها

یک سرصفحه برای برچسب زدن بخش‌های عملکردها در هر منوی کشویی اضافه کنید.

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

تقسیم کننده ها

گروه هایی از آیتم های منوی مرتبط را با یک تقسیم کننده جدا کنید.

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

متن

هر متن آزاد را در یک منوی کشویی با متن قرار دهید و از ابزارهای فاصله استفاده کنید . توجه داشته باشید که احتمالاً برای محدود کردن عرض منو به سبک‌های سایز اضافی نیاز دارید.

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

تشکیل می دهد

یک فرم را در یک منوی کشویی قرار دهید، یا آن را در یک منوی کشویی قرار دهید، و از ابزارهای حاشیه یا padding استفاده کنید تا فضای منفی مورد نیاز خود را به آن بدهید.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

از data-bs-offsetیا data-bs-referenceبرای تغییر مکان کشویی استفاده کنید.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

رفتار بسته شدن خودکار

به طور پیش فرض، هنگام کلیک کردن در داخل یا خارج از منوی کشویی، منوی کشویی بسته می شود. می‌توانید از autoCloseگزینه تغییر این رفتار فهرست کشویی استفاده کنید.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

ساس

متغیرها

متغیرها برای همه کشویی ها:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

متغیرهای کشویی تاریک :

$dropdown-dark-color:               $gray-300;
$dropdown-dark-bg:                  $gray-800;
$dropdown-dark-border-color:        $dropdown-border-color;
$dropdown-dark-divider-bg:          $dropdown-divider-bg;
$dropdown-dark-box-shadow:          null;
$dropdown-dark-link-color:          $dropdown-dark-color;
$dropdown-dark-link-hover-color:    $white;
$dropdown-dark-link-hover-bg:       rgba($white, .15);
$dropdown-dark-link-active-color:   $dropdown-link-active-color;
$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
$dropdown-dark-link-disabled-color: $gray-500;
$dropdown-dark-header-color:        $gray-500;

متغیرهایی برای کارت های مبتنی بر CSS که تعاملی بودن یک کشویی را نشان می دهد:

$caret-width:                 .3em;
$caret-vertical-align:        $caret-width * .85;
$caret-spacing:               $caret-width * .85;

مخلوط ها

مخلوط‌ها برای تولید کرت‌های مبتنی بر CSS استفاده می‌شوند و می‌توانند در scss/mixins/_caret.scss.

@mixin caret-down {
  border-top: $caret-width solid;
  border-right: $caret-width solid transparent;
  border-bottom: 0;
  border-left: $caret-width solid transparent;
}

@mixin caret-up {
  border-top: 0;
  border-right: $caret-width solid transparent;
  border-bottom: $caret-width solid;
  border-left: $caret-width solid transparent;
}

@mixin caret-end {
  border-top: $caret-width solid transparent;
  border-right: 0;
  border-bottom: $caret-width solid transparent;
  border-left: $caret-width solid;
}

@mixin caret-start {
  border-top: $caret-width solid transparent;
  border-right: $caret-width solid;
  border-bottom: $caret-width solid transparent;
}

@mixin caret($direction: down) {
  @if $enable-caret {
    &::after {
      display: inline-block;
      margin-left: $caret-spacing;
      vertical-align: $caret-vertical-align;
      content: "";
      @if $direction == down {
        @include caret-down();
      } @else if $direction == up {
        @include caret-up();
      } @else if $direction == end {
        @include caret-end();
      }
    }

    @if $direction == start {
      &::after {
        display: none;
      }

      &::before {
        display: inline-block;
        margin-right: $caret-spacing;
        vertical-align: $caret-vertical-align;
        content: "";
        @include caret-start();
      }
    }

    &:empty::after {
      margin-left: 0;
    }
  }
}

استفاده

از طریق ویژگی های داده یا جاوا اسکریپت، افزونه کشویی محتوای پنهان (منوهای کشویی) را با تغییر دادن .showکلاس در والد .dropdown-menuتغییر می دهد. این data-bs-toggle="dropdown"ویژگی برای بستن منوهای کشویی در سطح برنامه مورد استفاده قرار می گیرد، بنابراین ایده خوبی است که همیشه از آن استفاده کنید.

در دستگاه‌های دارای قابلیت لمس، باز کردن یک منوی کشویی، mouseoverکنترل‌کننده‌های خالی را به فرزندان اصلی <body>عنصر اضافه می‌کند. مسلماً این هک زشت برای حل یک اشتباه در نمایندگی رویداد iOS ضروری است ، که در غیر این صورت از ضربه زدن به هر جایی خارج از کرکره از راه‌اندازی کدی که فهرست کشویی را می‌بندد، جلوگیری می‌کند. پس از بسته شدن منوی بازشو، این کنترل کننده های خالی اضافی mouseoverحذف می شوند.

از طریق ویژگی های داده

data-bs-toggle="dropdown"برای تغییر حالت کشویی به پیوند یا دکمه اضافه کنید.

<div class="dropdown">
  <button id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

از طریق جاوا اسکریپت

کشویی ها را از طریق جاوا اسکریپت فراخوانی کنید:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"هنوز مورد نیاز است

صرف نظر از اینکه فهرست کشویی خود را از طریق جاوا اسکریپت فراخوانی می‌کنید یا در عوض از data-api استفاده می‌کنید، data-bs-toggle="dropdown"همیشه لازم است در عنصر ماشه کشویی وجود داشته باشد.

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-bs-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-bs-offset="". هنگام عبور گزینه ها از طریق ویژگی های داده، حتماً نوع حروف نام گزینه را از camelCase به kebab-case تغییر دهید. به عنوان مثال، به جای استفاده از data-bs-autoClose="false"، استفاده کنید data-bs-auto-close="false".

نام تایپ کنید پیش فرض شرح
boundary رشته | عنصر 'clippingParents' مرز محدودیت سرریز از منوی کشویی (فقط برای اصلاح کننده Popper's preventOverflow اعمال می شود). به طور پیش‌فرض 'clippingParents'می‌تواند یک مرجع HTMLElement را بپذیرد (فقط از طریق جاوا اسکریپت). برای اطلاعات بیشتر به Popper's detectOverflow docs مراجعه کنید.
reference رشته | عنصر | هدف - شی 'toggle' عنصر مرجع منوی کشویی. مقادیر 'toggle'،، 'parent'یک مرجع HTMLElement یا یک شی ارائه دهنده را می پذیرد getBoundingClientRect. برای اطلاعات بیشتر به اسناد سازنده Popper و اسناد عناصر مجازی مراجعه کنید.
display رشته 'dynamic' به طور پیش فرض، ما از Popper برای موقعیت یابی پویا استفاده می کنیم. این را با غیر فعال کنید static.
offset آرایه | رشته | عملکرد [0, 2]

افست کشویی نسبت به هدفش. شما می توانید یک رشته را در ویژگی های داده با مقادیر جدا شده با ویرگول مانند:data-bs-offset="10,20"

هنگامی که یک تابع برای تعیین افست استفاده می شود، با یک شی شامل محل popper، مرجع، و popper rects به عنوان اولین آرگومان فراخوانی می شود. گره DOM عنصر محرک به عنوان آرگومان دوم ارسال می شود. تابع باید یک آرایه با دو عدد برگرداند: .[skidding, distance]

برای اطلاعات بیشتر به اسناد افست پوپر مراجعه کنید .

autoClose بولی | رشته true

رفتار بسته شدن خودکار منوی کشویی را پیکربندی کنید:

  • true- منوی کشویی با کلیک کردن در خارج یا داخل منوی کشویی بسته می شود.
  • false- با کلیک کردن روی دکمه جابجایی و فراخوانی دستی hideیا toggleمتد، فهرست بازشو بسته می‌شود. (همچنین با فشار دادن escکلید بسته نمی شود)
  • 'inside'- منوی کشویی (فقط) با کلیک کردن در داخل منوی کشویی بسته می شود.
  • 'outside'- منوی کشویی (فقط) با کلیک کردن در خارج از منوی کشویی بسته می شود.
popperConfig null | شی | عملکرد null

برای تغییر تنظیمات Popper پیش‌فرض Bootstrap، به پیکربندی Popper مراجعه کنید .

هنگامی که یک تابع برای ایجاد پیکربندی Popper استفاده می شود، با یک شی که حاوی تنظیمات پیش فرض Popper Bootstrap است فراخوانی می شود. این به شما کمک می کند تا از تنظیمات پیش فرض استفاده کرده و با پیکربندی خود ادغام کنید. تابع باید یک شی پیکربندی برای Popper برگرداند.

استفاده از تابع باpopperConfig

var dropdown = new bootstrap.Dropdown(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

مواد و روش ها

روش شرح
toggle منوی کشویی یک نوار ناوبری مشخص یا پیمایش تب شده را تغییر می دهد.
show منوی کشویی یک نوار ناوبری مشخص یا پیمایش تب شده را نشان می دهد.
hide منوی کشویی یک نوار ناوبری داده شده یا پیمایش تب شده را پنهان می کند.
update موقعیت منوی کشویی یک عنصر را به روز می کند.
dispose فهرست بازشوی یک عنصر را از بین می برد. (داده های ذخیره شده در عنصر DOM را حذف می کند)
getInstance روش ایستا که به شما امکان می دهد نمونه کشویی مرتبط با یک عنصر DOM را دریافت کنید، می توانید از آن به صورت زیر استفاده کنید:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance روش ایستا که یک نمونه کشویی مرتبط با یک عنصر DOM را برمی گرداند یا در صورتی که اولیه نشده بود یک نمونه جدید ایجاد می کند. می توانید از آن به این صورت استفاده کنید:bootstrap.Dropdown.getOrCreateInstance(element)

مناسبت ها

همه رویدادهای کرکره‌ای در عنصر تغییردهنده شلیک می‌شوند و سپس حباب می‌شوند. بنابراین می‌توانید شنونده‌های رویداد را در .dropdown-menuعنصر والد اضافه کنید. hide.bs.dropdownو hidden.bs.dropdownرویدادها دارای یک clickEventویژگی هستند (فقط زمانی که نوع اصلی رویداد باشد click) که حاوی یک شی رویداد برای رویداد کلیک است.

روش شرح
show.bs.dropdown با فراخوانی متد show instance فورا فعال می شود.
shown.bs.dropdown زمانی فعال می شود که کشویی برای کاربر قابل مشاهده باشد و انتقال CSS تکمیل شود.
hide.bs.dropdown هنگامی که متد hide instance فراخوانی شد، بلافاصله آتش می‌گیرد.
hidden.bs.dropdown پس از مخفی شدن فهرست کشویی از کاربر و تکمیل انتقال CSS، فعال می شود.
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})