Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Равзанаҳои афтанда

Ҷойгиркунии қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра бо плагини афтанда Bootstrap.

Дар ин саҳифа

Барраси

Равандҳои афтанда ивазшаванда, қабатҳои контекстӣ барои намоиши рӯйхати истинодҳо ва ғайра мебошанд. Онҳо бо плагини афтанда JavaScript бо Bootstrap интерактивӣ сохта шудаанд. Онҳо бо пахшкунӣ иваз карда мешаванд, на бо гузоштан; Ин тасмими тарҳрезии қасдан аст.

Равзанҳои афтанда дар китобхонаи тарафи сеюм, Popper сохта шудаанд , ки мавқеъгирии динамикӣ ва муайянкунии намоишро таъмин мекунад. Боварӣ ҳосил кунед, ки popper.min.js -ро пеш аз JavaScript-и Bootstrap дохил кунед ё bootstrap.bundle.min.js/ bootstrap.bundle.jsки Попперро дар бар мегирад, истифода баред. Поппер барои ҷойгиркунии афтандаҳо дар наворҳо истифода намешавад, гарчанде ки мавқеъгирии динамикӣ талаб карда намешавад.

Дастрасӣ

Стандарти WAI ARIArole="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ба a .dropdown-menuба рост мувофиқ кардани менюи афтанда. Ҳангоми истифодаи Bootstrap дар RTL, дастурҳо инъикос карда мешаванд, яъне .dropdown-menu-endдар тарафи чап пайдо мешавад.

Сарҳо боло! Равандҳои афтанда ба шарофати Поппер ҷойгир карда мешаванд, ба истиснои ҳолатҳое, ки онҳо дар навор мавҷуд бошанд. 
<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"ки атрибутро ба тугмаҳои афтанда дар наворҳо илова кунед, зеро Поппер дар наворҳо истифода намешавад.

Имкониятҳои ҳамоҳангсозӣ

Бо назардошти аксари вариантҳои дар боло нишондодашуда, дар ин ҷо як намоиши танӯраи ошхонаи хурди вариантҳои гуногуни ҳамоҳангсозии афтанда дар як ҷо.

<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). Барои маълумоти бештар ба ҳуҷҷатҳои detectOverflow Popper муроҷиат кунед .
reference сатр | элемент | объект 'toggle' Унсури истинод аз менюи афтанда. Қиматҳои 'toggle', 'parent', истинод ба HTMLElement ё объектеро қабул мекунад getBoundingClientRect. Барои маълумоти бештар ба ҳуҷҷатҳои созандаи Поппер ва ҳуҷҷатҳои унсури виртуалӣ муроҷиат кунед.
display сатр 'dynamic' Бо нобаёнӣ, мо Попперро барои ҷойгиркунии динамикӣ истифода мебарем. Инро бо static.
offset массив | сатр | функсия [0, 2]

Ҷойгиркунии афтанда нисбат ба ҳадафаш. Шумо метавонед сатрро дар атрибутҳои додаҳо бо арзишҳои аз вергул ҷудошуда интиқол диҳед, ба монанди:data-bs-offset="10,20"

Вақте ки функсия барои муайян кардани ҷуброн истифода мешавад, он бо объекте даъват карда мешавад, ки ҷойгиркунии поппер, истинод ва ректҳои попперро ҳамчун далели аввалини худ дорад. Элементи триггерии гиреҳи DOM ҳамчун далели дуюм интиқол дода мешавад. Функсия бояд массивро бо ду адад баргардонад: .[skidding, distance]

Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Поппер муроҷиат кунед .
autoClose булӣ | сатр true

Рафтори худкор пӯшидани афтандаро танзим кунед:

  • true- афтанда бо пахш кардани менюи афтанда берун ё дохили он баста мешавад.
  • false- афтанда бо зеркунии тугмаи гузариш ва дастӣ занг hideё toggleусул баста мешавад. (Инчунин бо пахш кардани escтугма баста намешавад)
  • 'inside'- афтанда (танҳо) бо пахш кардани менюи афтанда баста мешавад.
  • 'outside'- афтанда бо пахши берун аз менюи афтанда баста мешавад (танҳо).
popperConfig null | объект | функсия null

Барои тағир додани конфигуратсияи пешфарзии Popper Bootstrap, ба конфигуратсияи Popper нигаред .

Вақте ки функсия барои сохтани конфигуратсияи Popper истифода мешавад, он бо объекте даъват карда мешавад, ки конфигуратсияи пешфарзии Popper Bootstrap-ро дар бар мегирад. Он ба шумо барои истифода ва якҷоя кардани пешфарз бо конфигуратсияи шахсии худ кӯмак мекунад. Функсия бояд объекти конфигуратсияро барои Поппер баргардонад.

Истифодаи функсия бо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...
})