Выпадальныя спісы

Пераключайце кантэкстныя накладкі для адлюстравання спісаў спасылак і многае іншае з дапамогай выпадальнага плагіна Bootstrap.

На гэтай старонцы

Агляд

Выпадаючыя спісы - гэта кантэкстныя накладкі, якія можна пераключаць, для адлюстравання спісаў спасылак і іншага. Яны зроблены інтэрактыўнымі з уключаным плагінам Bootstrap для выпадальнага меню JavaScript. Яны пераключаюцца націскам, а не навядзеннем; гэта наўмыснае дызайнерскае рашэнне .

Выпадаючыя спісы створаны на аснове старонняй бібліятэкі Popper , якая забяспечвае дынамічнае пазіцыянаванне і выяўленне вокны прагляду. Не забудзьцеся ўключыць popper.min.js перад JavaScript Bootstrap або выкарыстоўваць bootstrap.bundle.min.js/ bootstrap.bundle.js, які змяшчае Popper. Popper не выкарыстоўваецца для размяшчэння выпадаючых спісаў у панэлі навігацыі, хоць дынамічнае пазіцыянаванне не патрабуецца.

Даступнасць

Стандарт WAI ARIA вызначае фактычны role="menu"віджэт , але гэта адносіцца да прыкладных меню, якія запускаюць дзеянні або функцыі. Меню ARIA могуць утрымліваць толькі пункты меню, пункты меню сцяжкоў, пункты меню перамыкачоў, групы перамыкачоў і падменю.

Выпадаючыя спісы Bootstrap, з іншага боку, распрацаваны як агульныя і дастасавальныя да розных сітуацый і структур разметкі. Напрыклад, можна ствараць выпадальныя спісы, якія змяшчаюць дадатковыя ўводы і элементы кіравання формамі, такія як палі пошуку або формы ўваходу. Па гэтай прычыне Bootstrap не чакае (і не дадае аўтаматычна) ніякіх атрыбутаў roleі , неабходных для сапраўдных меню ARIA . Аўтары самі павінны ўключыць гэтыя больш канкрэтныя атрыбуты.aria-

Тым не менш, Bootstrap сапраўды дадае ўбудаваную падтрымку большасці стандартных узаемадзеянняў з меню клавіятуры, такіх як магчымасць перамяшчацца па асобных .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для належнага інтэрвалу вакол выпадальнага меню.

Мы выкарыстоўваем гэты дадатковы клас для памяншэння гарызанталі paddingпа абодва бакі карэткі на 25% і выдалення таго 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" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Па змаўчанні выпадаючае меню аўтаматычна размяшчаецца на 100% зверху і ўздоўж левага боку бацькоўскага меню. Вы можаце змяніць гэта з дапамогай накіраваных .drop*класаў, але вы таксама можаце кіраваць імі з дапамогай дадатковых класаў-мадыфікатараў.

Дадайце .dropdown-menu-endда .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>

Формы

Размясціце форму ў выпадальным меню або ператварыце яе ў выпадаючае меню і выкарыстоўвайце ўтыліты поля або запаўнення , каб даць ёй неабходнае адмоўнае месца.

<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($gray-900, 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;
    }
  }
}

Выкарыстанне

З дапамогай атрыбутаў дадзеных або JavaScript плагін выпадальнага меню пераключае схаваны кантэнт (выпадаючыя меню), пераключаючы .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>

Праз JavaScript

Выклік выпадаючых меню праз JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`яшчэ патрабуецца

Незалежна ад таго, выклікаеце вы выпадальны спіс праз JavaScript або замест гэтага выкарыстоўваеце data-api, data-bs-toggle="dropdown"ён заўсёды павінен прысутнічаць у спускавым элеменце выпадальнага меню.

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-, як у data-bs-offset="". Не забудзьцеся змяніць тып рэгістра назвы опцыі з camelCase на kebab-case пры перадачы опцый праз атрыбуты даных. Напрыклад, замест выкарыстання data-bs-autoClose="false"выкарыстоўвайце data-bs-auto-close="false".

Імя	Тып	Па змаўчанні	Апісанне
`boundary`	радок \| элемент	`'clippingParents'`	Мяжа абмежавання перапаўнення выпадальнага меню (прымяняецца толькі да мадыфікатара preventOverflow Попера). Па змаўчанні гэта `'clippingParents'`і можа прымаць спасылку HTMLElement (толькі праз JavaScript). Для атрымання дадатковай інфармацыі звярніцеся да дакументаў Popper's detectOverflow .
`reference`	радок \| элемент \| аб'ект	`'toggle'`	Спасылкавы элемент выпадальнага меню. Прымае значэнні `'toggle'`, `'parent'`, спасылкі HTMLElement або аб'екта, які забяспечвае `getBoundingClientRect`. Для атрымання дадатковай інфармацыі звярніцеся да дакументацыі канструктара Popper і дакументацыі віртуальных элементаў .
`display`	радок	`'dynamic'`	Па змаўчанні мы выкарыстоўваем Popper для дынамічнага пазіцыянавання. Адключыце гэта з дапамогай `static`.
`offset`	масіў \| радок \| функцыя	`[0, 2]`	Зрушэнне выпадальнага меню адносна мэты. Вы можаце перадаць радок у атрыбутах дадзеных са значэннямі, падзеленымі коскамі, напрыклад:`data-bs-offset="10,20"` Калі функцыя выкарыстоўваецца для вызначэння зрушэння, яна выклікаецца з аб'ектам, які змяшчае размяшчэнне попера, спасылку і прамастаянні попера ў якасці першага аргумента. Запускаючы элемент DOM вузел перадаецца ў якасці другога аргумента. Функцыя павінна вяртаць масіў з двума лікамі: .`[skidding, distance]` Для атрымання дадатковай інфармацыі звярніцеся да афсетнай дакументацыі Попера .
`autoClose`	лагічны \| радок	`true`	Наладзьце паводзіны аўтаматычнага закрыцця выпадальнага меню: `true`- выпадальнае меню будзе закрыта пстрычкай па-за або ўнутры выпадальнага меню. `false`- выпадальнае меню будзе закрыта націскам кнопкі пераключэння і ручным выклікам метаду `hide`або . `toggle`(Таксама не будзе закрыта націскам кнопкі `esc`) `'inside'`- выпадальнае меню будзе закрыта (толькі) пстрычкай ўнутры выпадальнага меню. `'outside'`- выпадальнае меню будзе закрыта (толькі) пстрычкай па-за межамі выпадальнага меню.
`popperConfig`	нуль \| аб'ект \| функцыя	`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`	Спрацоўвае неадкладна пры выкліку метаду паказу экземпляра.
`shown.bs.dropdown`	Запускаецца, калі выпадальнае меню стала бачным для карыстальніка і пераходы CSS завершаны.
`hide.bs.dropdown`	Спрацоўвае неадкладна, калі быў выкліканы метад схаванага асобніка.
`hidden.bs.dropdown`	Выклікаецца, калі выпадальнае меню перастае быць схаваным ад карыстальніка і пераходы CSS завершаны.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Выпадальныя спісы

Агляд

Даступнасць

Прыклады

Адзіная кнопка

Кнопка раздзялення

Праклейванне

Цёмныя выпадальныя меню

Напрамкі

RTL

Выпадзенне

Дропрайт

Кропля ўлева

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Адаптыўнае выраўноўванне

Варыянты выраўноўвання

Змест меню

Загалоўкі

Раздзяляльнікі

Тэкст

Формы

Паводзіны аўтаматычнага закрыцця

Сас

Пераменныя

Міксіны

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

`data-bs-toggle="dropdown"`яшчэ патрабуецца

Параметры

Выкарыстанне функцыі з`popperConfig`

Метады

Падзеі

Выпадальныя спісы

Агляд

Даступнасць

Прыклады

Адзіная кнопка

Кнопка раздзялення

Праклейванне

Цёмныя выпадальныя меню

Напрамкі

RTL

Выпадзенне

Дропрайт

Кропля ўлева

Пункты меню

Актыўны

Інваліды

Выраўноўванне меню

Адаптыўнае выраўноўванне

Варыянты выраўноўвання

Змест меню

Загалоўкі

Выпадальны загаловак

Раздзяляльнікі

Тэкст

Формы

Выпадаючыя параметры

Паводзіны аўтаматычнага закрыцця

Сас

Пераменныя

Міксіны

Выкарыстанне

Праз атрыбуты дадзеных

Праз JavaScript

data-bs-toggle="dropdown"яшчэ патрабуецца

Параметры

Выкарыстанне функцыі зpopperConfig

Метады

Падзеі

`data-bs-toggle="dropdown"`яшчэ патрабуецца

Выкарыстанне функцыі з`popperConfig`