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

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

Дар ин саҳифа

Барраси

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

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

Дастрасӣ

Стандарти WAI ARIA role="menu" виҷети воқеиро муайян мекунад , аммо ин барои менюҳои ба барнома монанд аст, ки амалҳо ё функсияҳоро ба вуҷуд меоранд. Менюҳои ARIA метавонанд танҳо ҷузъҳои меню, ҷузъҳои менюи қуттии қайд, ҷузъҳои менюи тугмаи радио, гурӯҳҳои тугмаҳои радио ва зерменюҳоро дар бар гиранд.

Аз тарафи дигар, афтандаҳои Bootstrap барои он тарҳрезӣ шудаанд, ки умумӣ бошанд ва ба вазъиятҳои гуногун ва сохторҳои аломатгузорӣ татбиқ шаванд. Масалан, имконпазир аст, ки афтандаҳоеро эҷод кунед, ки дорои вурудоти иловагӣ ва идоракунии форма, ба монанди майдонҳои ҷустуҷӯ ё шаклҳои воридшавӣ мебошанд. Аз ин сабаб, Bootstrap ягон roleва aria-атрибутҳоеро, ки барои менюҳои ҳақиқии ARIA лозиманд, интизор нест (ё ба таври худкор илова мекунад). Муаллифон бояд худи ин сифатҳои мушаххасро дохил кунанд.

Бо вуҷуди ин, Bootstrap барои аксари мутақобилаи менюи стандартии клавиатура дастгирии дарунсохтро илова мекунад, ба монанди қобилияти ҳаракат тавассути .dropdown-itemунсурҳои алоҳида бо истифода аз тугмаҳои курсор ва пӯшидани меню бо ESCкалид.

Мисолхо

Гузаришчаи афтанда (тугма ё истиноди шумо) ва менюи афтандаро дар дохили .dropdown, ё унсури дигаре, ки position: relative;. Паппаҳоро аз унсурҳо оғоз кардан мумкин аст, <a>то <button>эҳтиёҷоти эҳтимолии шуморо беҳтар созанд. Намунаҳое, ки дар ин ҷо нишон дода шудаанд <ul>, дар ҷои мувофиқ унсурҳои семантикиро истифода мебаранд, аммо аломатгузории фармоишӣ дастгирӣ карда мешавад.

Тугмаи ягона

Ҳар як .btnсинглро бо баъзе тағиротҳои аломатгузорӣ ба гузариши афтанда табдил додан мумкин аст. Ин аст, ки чӣ тавр шумо метавонед онҳоро бо ҳарду <button>элемент кор кунед:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </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>
  </ul>
</div>

Ва бо <a>унсурҳои:

html

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

  <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>
  </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. Ҳеҷ гуна тағирот ба ҷузъҳои афтанда талаб карда намешавад.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <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>

Ва гузоштани он барои истифода дар навор:

html

<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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <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дар тарафи рост пайдо мешавад.

марказонидашуда

Менюи афтандаро дар маркази гузаранда бо .dropdown-centerунсури волидайн ҷойгир кунед.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Таркиб

.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>

Дар маркази афтанда

Менюи афтандаро дар болои гузаргоҳ бо .dropup-centerунсури волидайн ҷойгир кунед.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Менюҳои афтандаро дар тарафи рости элементҳо тавассути илова .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">
    Dropend
  </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 Dropend</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 dropstart">
  <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>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Шумо метавонед <a>ё <button>унсурҳоро ҳамчун ҷузъҳои афтанда истифода баред.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <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-и фармоишӣ ё утилитаҳои матнӣ услуб кунед.

html

<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ашёи ҷории маҷмӯа.

html

<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ҷузъҳои афтанда илова кунед, то онҳоро ҳамчун ғайрифаъол услуб кунед .

html

<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дар тарафи чап пайдо мешавад.

Сарҳо боло! Равандҳои афтанда ба шарофати Поппер ҷойгир карда мешаванд, ба истиснои ҳолатҳое, ки онҳо дар навор мавҷуд бошанд.

html

<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.

html

<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.

html

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

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

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

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </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">
  <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>

Сарлавҳаҳо

Барои нишон додани бахшҳои амалҳо дар ҳама гуна менюи афтанда сарлавҳа илова кунед.

html

<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>

Тақсимкунандагон

Гурӯҳҳои алоҳидаи ҷузъҳои менюи алоқамандро бо тақсимкунанда ҷудо кунед.

html

<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>

Матн

Ҳама гуна матни шакли озодро дар дохили менюи афтанда бо матн ҷойгир кунед ва утилитаҳои фосиларо истифода баред . Дар хотир доред, ки ба шумо эҳтимолан барои маҳдуд кардани паҳнои меню ба услубҳои иловагии андоза ниёз доред.

html

<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>

Шаклҳо

Форматро дар дохили менюи афтанда ҷойгир кунед ё онро ба менюи афтанда созед ва аз маржа ё утилитаҳои пуркунӣ истифода баред , то ба он фазои манфии лозимиро диҳед.

html

<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>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <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>
</div>

Барои тағир додани макони афтанда data-bs-offsetё -ро истифода баред .data-bs-reference

html

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </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>
    </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" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <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>
</div>

Рафтори худкор пӯшидан

Бо нобаёнӣ, менюи афтанда ҳангоми пахш кардани менюи афтанда ё берун аз он баста мешавад. Шумо метавонед ин autoCloseхосиятро барои тағир додани ин рафтори афтанда истифода баред.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </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">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </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>

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, афтандаҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .dropdown-menuбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Мутобиқсозӣ тавассути тағирёбандаҳои CSS-ро дар синф дидан мумкин аст, .dropdown-menu-darkки мо арзишҳои мушаххасро бидуни илова кардани селекторҳои такрории CSS бекор мекунем.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Тағйирёбандаҳои Sass

Тағирёбандаҳо барои ҳамаи афтандаҳо:

$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:             var(--#{$prefix}border-color-translucent);
$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-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Тағирёбандаҳо барои афтанда торик :

$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 type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Тавассути JavaScript

Ба афтандаҳо тавассути JavaScript занг занед:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

`data-bs-toggle="dropdown"`хануз талаб карда мешавад

Новобаста аз он, ки шумо афтандаро тавассути JavaScript занг мезанед ё ба ҷои он data-api-ро истифода мебаред, data-bs-toggle="dropdown"ҳамеша бояд дар элементи триггери афтанда мавҷуд бошад.

Имконот

Азбаски вариантҳоро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст, шумо метавонед номи опсияро ба data-bs-монанди дар data-bs-animation="{value}". Ҳангоми интиқоли параметрҳо тавассути атрибутҳои додаҳо, боварӣ ҳосил кунед, ки навъи парвандаи номи опсияро аз “ camelCase ” ба “ kebab-case ” иваз кунед. Масалан, data-bs-custom-class="beautifier"ба ҷои data-bs-customClass="beautifier".

Аз Bootstrap 5.2.0, ҳама ҷузъҳо атрибутҳои таҷрибавии ҳифзшударо дастгирӣ мекунанд data-bs-config, ки метавонад конфигуратсияи ҷузъҳои оддиро ҳамчун сатри JSON ҷойгир кунад. Вақте ки элемент дорои data-bs-config='{"delay":0, "title":123}'ва data-bs-title="456"атрибутҳо мебошад, titleарзиши ниҳоӣ хоҳад буд 456ва атрибутҳои додаҳои алоҳида арзишҳои дар data-bs-config. Илова бар ин, атрибутҳои мавҷудаи маълумот қодиранд арзишҳои JSON ба монанди data-bs-delay='{"show":0,"hide":150}'.

Ном	Навъи	Пешфарз	Тавсифи
`autoClose`	булӣ, сатр	`true`	Рафтори худкор пӯшидани афтандаро танзим кунед: `true`- афтанда бо пахш кардани менюи афтанда берун ё дохили он баста мешавад. `false`- афтанда бо пахш кардани тугмаи гузариш ва дастӣ занг `hide`ё `toggle`усул баста мешавад. (Инчунин бо пахш кардани `esc`тугма баста намешавад) `'inside'`- афтанда (танҳо) бо пахш кардани менюи афтанда баста мешавад. `'outside'`- афтанда бо пахши берун аз менюи афтанда баста мешавад (танҳо). Эзоҳ: афтанда ҳамеша метавонад бо `ESC`калид баста шавад.
`boundary`	сатр, элемент	`'clippingParents'`	Сарҳади маҳдудияти изофабори менюи афтанда (танҳо ба тағирдиҳандаи preventOverflow-и Поппер дахл дорад). Бо нобаёнӣ он аст `clippingParents`ва метавонад истинодҳои HTMLElement-ро қабул кунад (танҳо тавассути JavaScript). Барои маълумоти бештар ба ҳуҷҷатҳои detectOverflow Popper муроҷиат кунед .
`display`	сатр	`'dynamic'`	Бо нобаёнӣ, мо Попперро барои ҷойгиркунии динамикӣ истифода мебарем. Инро бо `static`.
`offset`	массив, сатр, функсия	`[0, 2]`	Ҷуброни афтанда нисбат ба ҳадафаш. Шумо метавонед сатрро дар атрибутҳои додаҳо бо арзишҳои аз вергул ҷудошуда интиқол диҳед, ба монанди: `data-bs-offset="10,20"`. Вақте ки функсия барои муайян кардани ҷуброн истифода мешавад, он бо объекте даъват карда мешавад, ки ҷойгиркунии поппер, истинод ва ректҳои попперро ҳамчун аргументи аввалини худ дорад. Элементи триггерии гиреҳи DOM ҳамчун далели дуюм интиқол дода мешавад. Функсия бояд массивро бо ду рақам баргардонад: skidding , distance . Барои маълумоти бештар ба ҳуҷҷатҳои офсетии Поппер муроҷиат кунед .
`popperConfig`	нул, объект, функсия	`null`	Барои тағир додани конфигуратсияи пешфарзии Popper Bootstrap, ба конфигуратсияи Popper нигаред . Вақте ки функсия барои сохтани конфигуратсияи Popper истифода мешавад, он бо объекте даъват карда мешавад, ки конфигуратсияи пешфарзии Popper Bootstrap-ро дар бар мегирад. Он ба шумо кӯмак мекунад, ки пешфарзро бо конфигуратсияи шахсии худ истифода баред ва якҷоя кунед. Функсия бояд объекти конфигуратсияро барои Поппер баргардонад.
`reference`	сатр, элемент, объект	`'toggle'`	Унсури истинод аз менюи афтанда. Қиматҳои `'toggle'`, `'parent'`, истинод ба HTMLElement ё объектеро қабул мекунад `getBoundingClientRect`. Барои маълумоти иловагӣ ба ҳуҷҷатҳои созандаи Поппер ва ҳуҷҷатҳои унсури виртуалӣ муроҷиат кунед.

Истифодаи функсия бо`popperConfig`

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

Усулҳо

Усул	Тавсифи
`dispose`	Раванди афтанда элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад)
`getInstance`	Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли афтанда бо унсури DOM алоқамандро гиред, шумо метавонед онро чунин истифода баред: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Усули статикӣ, ки як мисоли афтандаеро, ки ба унсури DOM алоқаманд аст, бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро пинҳон мекунад.
`show`	Менюи афтанда панели навор ё паймоиши ҷадвалбандиҳоро нишон медиҳад.
`toggle`	Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро иваз мекунад.
`update`	Мавқеи афтанда элементро навсозӣ мекунад.

Ҳодисаҳо

Ҳама рӯйдодҳои афтанда дар унсури ивазкунанда ба кор андохта мешаванд ва сипас боло мешаванд. Ҳамин тавр, шумо инчунин метавонед шунавандагони рӯйдодҳоро дар .dropdown-menuунсури волидайни ' илова кунед. hide.bs.dropdownва hidden.bs.dropdownрӯйдодҳо clickEventамвол доранд (танҳо вақте ки навъи аслии Ҳодиса click) дорои Объекти рӯйдод барои ҳодисаи клик мебошад.

Навъи ҳодиса	Тавсифи
`hide.bs.dropdown`	`hide`Вақте ки усули инстансия даъват карда шуд, фавран оташ мезанад .
`hidden.bs.dropdown`	Вақте ки афтанда пинҳон шудан аз корбар анҷом ёфт ва гузаришҳои CSS ба анҷом расид, ба кор андохта мешавад.
`show.bs.dropdown`	`show`Вақте ки усули инстансия даъват карда мешавад, фавран оташ мезанад .
`shown.bs.dropdown`	Вақте ки афтанда ба корбар намоён карда шуд ва гузаришҳои CSS анҷом ёфтанд, кор карда мешавад.

const myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', event => {
  // do something...
})

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

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягона

Тугмаи тақсим

Андоза

Равзанаҳои сиёҳ

Роҳнамо

RTL

марказонидашуда

Таркиб

Дар маркази афтанда

Dropend

Оғоз

Унсурҳои меню

Фаъол

Маъюб

Ҳамоҳангсозии меню

Ҳамоҳангсозии ҷавобӣ

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

Мазмуни меню

Сарлавҳаҳо

Тақсимкунандагон

Матн

Шаклҳо

Рафтори худкор пӯшидан

CSS

Тағйирёбандаҳо

Тағйирёбандаҳои Sass

Миксинҳо

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

`data-bs-toggle="dropdown"`хануз талаб карда мешавад

Имконот

Истифодаи функсия бо`popperConfig`

Усулҳо

Ҳодисаҳо

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

Барраси

Дастрасӣ

Мисолхо

Тугмаи ягона

Тугмаи тақсим

Андоза

Равзанаҳои сиёҳ

Роҳнамо

RTL

марказонидашуда

Таркиб

Дар маркази афтанда

Dropend

Оғоз

Унсурҳои меню

Фаъол

Маъюб

Ҳамоҳангсозии меню

Ҳамоҳангсозии ҷавобӣ

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

Мазмуни меню

Сарлавҳаҳо

Сарлавҳаи афтанда

Тақсимкунандагон

Матн

Шаклҳо

Имконоти афтанда

Рафтори худкор пӯшидан

CSS

Тағйирёбандаҳо

Тағйирёбандаҳои Sass

Миксинҳо

Истифода

Тавассути атрибутҳои додаҳо

Тавассути JavaScript

data-bs-toggle="dropdown"хануз талаб карда мешавад

Имконот

Истифодаи функсия боpopperConfig

Усулҳо

Ҳодисаҳо

`data-bs-toggle="dropdown"`хануз талаб карда мешавад

Истифодаи функсия бо`popperConfig`