Awọn idasile

Yipada awọn agbekọja ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ ati diẹ sii pẹlu ohun itanna silẹ Bootstrap.

Lori iwe yi

Akopọ

Awọn isubu jẹ iyipada, awọn agbekọja ọrọ-ọrọ fun iṣafihan awọn atokọ ti awọn ọna asopọ ati diẹ sii. Wọn jẹ ibaraenisepo pẹlu ohun itanna JavaScript dropdown Bootstrap to wa. Wọn ti yipada nipasẹ titẹ, kii ṣe nipa gbigbe; eyi jẹ ipinnu apẹrẹ ero inu .

Awọn idasile jẹ itumọ lori ile-ikawe ẹnikẹta, Popper , eyiti o pese ipo ti o ni agbara ati wiwa wiwo wiwo. Rii daju pe o ni popper.min.js ṣaaju Bootstrap's JavaScript tabi lo bootstrap.bundle.min.js/ bootstrap.bundle.jseyiti o ni Popper ninu. A ko lo Popper si ipo awọn silẹ ni awọn navbars botilẹjẹpe ipo ti o ni agbara ko nilo.

Wiwọle

Boṣewa WAI ARIA role="menu" n ṣalaye ẹrọ ailorukọ gangan , ṣugbọn eyi jẹ pato si awọn akojọ aṣayan ohun elo ti o nfa awọn iṣe tabi awọn iṣẹ. Awọn akojọ aṣayan ARIA le ni awọn ohun akojọ aṣayan nikan, awọn apoti akojọ aṣayan apoti, awọn ohun akojọ aṣayan bọtini redio, awọn ẹgbẹ bọtini redio, ati awọn akojọ aṣayan-ipin.

Bootstrap's dropdowns, ni ida keji, jẹ apẹrẹ lati jẹ jeneriki ati iwulo si ọpọlọpọ awọn ipo ati awọn ẹya isamisi. Fun apẹẹrẹ, o ṣee ṣe lati ṣẹda awọn silẹ ti o ni awọn igbewọle afikun ninu ati awọn idari fọọmu, gẹgẹbi awọn aaye wiwa tabi awọn fọọmu iwọle. Fun idi eyi, Bootstrap ko nireti (tabi ṣafikun laifọwọyi) eyikeyi roleati awọn aria-abuda ti o nilo fun awọn akojọ aṣayan ARIA otitọ. Awọn onkọwe yoo ni lati ṣafikun awọn abuda kan pato diẹ sii funrararẹ.

Bibẹẹkọ, Bootstrap ṣe afikun atilẹyin ti a ṣe sinu pupọ julọ awọn ibaraenisọrọ akojọ aṣayan bọtini itẹwe, gẹgẹbi agbara lati gbe nipasẹ awọn .dropdown-itemeroja kọọkan nipa lilo awọn bọtini kọsọ ati pa akojọ aṣayan pẹlu ESCbọtini.

Awọn apẹẹrẹ

Fi ipari si toggle dropdown (bọtini tabi ọna asopọ rẹ) ati akojọ aṣayan silẹ laarin .dropdown, tabi nkan miiran ti o sọ position: relative;. Awọn idasile le jẹ okunfa lati <a>tabi <button>awọn eroja lati baamu awọn iwulo agbara rẹ dara julọ. Awọn apẹẹrẹ ti o han nibi lo awọn <ul>eroja atunmọ nibiti o yẹ, ṣugbọn isamisi aṣa jẹ atilẹyin.

Bọtini ẹyọkan

Eyikeyi ẹyọkan .btnle yipada si yiyi silẹ silẹ pẹlu diẹ ninu awọn iyipada isamisi. Eyi ni bii o ṣe le fi wọn ṣiṣẹ pẹlu awọn <button>eroja mejeeji:

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>

Ati pẹlu <a>awọn eroja:

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>

Apakan ti o dara julọ ni pe o le ṣe eyi pẹlu iyatọ bọtini eyikeyi, paapaa:

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

Bọtini pipin

Bakanna, ṣẹda awọn ifasilẹ bọtini pipin pẹlu isamisi isamisi kanna bi awọn silẹ bọtini ẹyọkan, ṣugbọn pẹlu afikun .dropdown-toggle-splitfun aye to dara ni ayika itọju sisọ silẹ.

A lo kilasi afikun yii lati dinku petele paddingni ẹgbẹ mejeeji ti itọju nipasẹ 25% ati yọkuro margin-lefteyiti o ṣafikun fun awọn silẹ bọtini deede. Awọn iyipada afikun wọnyẹn jẹ ki abojuto dojukọ ni bọtini pipin ati pese agbegbe ti o ni iwọn deede diẹ sii lẹgbẹẹ bọtini akọkọ.

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

Titobi

Bọtini sisọ silẹ ṣiṣẹ pẹlu awọn bọtini ti gbogbo titobi, pẹlu aiyipada ati awọn bọtini itusilẹ pipin.

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

Dudu dropdowns

Jade sinu awọn ju silẹ dudu lati baramu navbar dudu tabi aṣa aṣa nipa fifi kun .dropdown-menu-darksi ohun ti o wa tẹlẹ .dropdown-menu. Ko si awọn ayipada ti o nilo si awọn nkan sisọ silẹ.

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>

Ati fifi sii lati lo ninu navbar kan:

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>

Awọn itọnisọna

RTL

Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni RTL, itumo .dropstartyoo han ni apa ọtun.

Aarin

Ṣe awọn dropdown akojọ ti dojukọ ni isalẹ awọn toggle pẹlu .dropdown-centerlori awọn obi ano.

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>

Sisọ silẹ

Nfa awọn akojọ aṣayan silẹ loke awọn eroja nipa fifi kun .dropupsi eroja obi.

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

Idasilẹ aarin

Ṣe awọn dropup akojọ ti dojukọ loke awọn toggle pẹlu .dropup-centerlori awọn obi ano.

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>

Ju silẹ

Nfa awọn akojọ aṣayan silẹ ni apa ọtun ti awọn eroja nipa fifi kun .dropendsi eroja obi.

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

Ibẹrẹ silẹ

Nfa awọn akojọ aṣayan silẹ ni apa osi ti awọn eroja nipa fifi kun .dropstartsi eroja obi.

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

O le lo <a>tabi <button>awọn eroja bi awọn ohun kan silẹ.

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>

O tun le ṣẹda awọn ohun kan silẹ ti kii ṣe ibaraẹnisọrọ pẹlu .dropdown-item-text. Lero lati ni ara siwaju pẹlu CSS aṣa tabi awọn ohun elo ọrọ.

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>

Ti nṣiṣe lọwọ

Fikun -un .activesi awọn ohun kan ninu sisọ silẹ lati ṣe ara wọn bi lọwọ . Lati fihan ipo ti nṣiṣe lọwọ si awọn imọ-ẹrọ iranlọwọ, lo aria-currentabuda — lilo pageiye fun oju-iwe lọwọlọwọ, tabi truefun ohun ti o wa lọwọlọwọ ninu ṣeto.

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>

Alaabo

Ṣafikun .disabledawọn ohun kan ninu sisọ silẹ lati ṣe ara wọn bi alaabo .

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>

Nipa aiyipada, akojọ aṣayan silẹ ti wa ni ipo laifọwọyi 100% lati oke ati ni apa osi ti obi rẹ. O le yi eyi pada pẹlu awọn .drop*kilasi itọnisọna, ṣugbọn o tun le ṣakoso wọn pẹlu awọn kilasi iyipada afikun.

Fikun -un .dropdown-menu-endsi .dropdown-menuapa ọtun mö akojọ aṣayan silẹ. Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni RTL, itumo .dropdown-menu-endyoo han ni apa osi.

Efeti sile! Dropdowns wa ni ipo ọpẹ si Popper ayafi nigba ti won wa ninu a navbar.

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>

Titete idahun

Ti o ba fẹ lo titete idahun, mu ipo ti o ni agbara ṣiṣẹ nipa fifi abuda kun data-bs-display="static"ati lo awọn kilasi iyatọ idahun.

Lati mö ọtun akojọ aṣayan silẹ pẹlu aaye fifọ ti a fun tabi tobi, ṣafikun .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>

Lati mö apa osi akojọ aṣayan silẹ pẹlu aaye fifọ ti a fun tabi tobi, ṣafikun .dropdown-menu-endati .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>

Ṣe akiyesi pe o ko nilo lati ṣafikun abuda kan data-bs-display="static"si awọn bọtini sisọ silẹ ni awọn navbars, nitori a ko lo Popper ni awọn navbars.

Awọn aṣayan titete

Gbigba pupọ julọ awọn aṣayan ti o han loke, eyi ni demo rii ibi idana ounjẹ kekere ti ọpọlọpọ awọn aṣayan titete isọ silẹ ni aye kan.

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>

Awọn akọle

Ṣafikun akọsori kan si aami awọn apakan awọn iṣe ni eyikeyi akojọ aṣayan silẹ.

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>

Awọn onipinpin

Awọn ẹgbẹ ọtọtọ ti awọn ohun akojọ aṣayan ti o jọmọ pẹlu onipinpin.

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>

Ọrọ

Fi ọrọ fọọmu eyikeyi sinu akojọ aṣayan silẹ pẹlu ọrọ ati lo awọn ohun elo ayeraye . Ṣe akiyesi pe o ṣeese yoo nilo awọn aṣa iwọn afikun lati ṣe idiwọ iwọn akojọ aṣayan.

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>

Awọn fọọmu

Fi fọọmu kan sinu akojọ aṣayan silẹ, tabi ṣe sinu akojọ aṣayan silẹ, ati lo ala tabi awọn ohun elo padding lati fun ni aaye odi ti o nilo.

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>

Lo data-bs-offsettabi data-bs-referencelati yi ipo silẹ silẹ.

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>

Iwa isunmọ aifọwọyi

Nipa aiyipada, akojọ aṣayan silẹ ti wa ni pipade nigbati o ba tẹ inu tabi ita akojọ aṣayan silẹ. O le lo autoCloseaṣayan lati yi ihuwasi ti sisọ silẹ.

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

Awọn oniyipada

Fi kun v5.2.0

Gẹgẹbi apakan ti isunmọ ti awọn iyipada CSS ti Bootstrap, awọn silẹ ni bayi lo awọn oniyipada CSS agbegbe lori .dropdown-menufun imudara isọdi akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$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};

Isọdi-ara nipasẹ awọn oniyipada CSS ni a le rii lori .dropdown-menu-darkkilasi nibiti a ti bori awọn iye kan pato laisi fifi awọn yiyan CSS ẹda-iwe kun.

  --#{$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 oniyipada

Awọn iyipada fun gbogbo awọn silẹ:

$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

Awọn iyipada fun sisọ silẹ dudu :

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

Awọn oniyipada fun awọn itọju ti o da lori CSS ti o tọka iṣiṣẹpọ silẹ silẹ:

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

Mixins

Awọn Mixins ni a lo lati ṣe ipilẹṣẹ awọn itọju ti o da lori CSS ati pe o le rii ni 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;
    }
  }
}

Lilo

Nipasẹ awọn abuda data tabi JavaScript, ohun itanna silẹ yoo yi akoonu ti o farapamọ pada (awọn akojọ aṣayan silẹ) nipa yiyi .showkilasi pada lori obi .dropdown-menu. Ẹya data-bs-toggle="dropdown"naa gbarale fun pipade awọn akojọ aṣayan silẹ ni ipele ohun elo, nitorinaa o jẹ imọran ti o dara lati lo nigbagbogbo.

Lori awọn ẹrọ ti o ni ifọwọkan, ṣiṣi silẹ silẹ n ṣe afikun awọn olutọju ofo mouseoversi awọn ọmọ lẹsẹkẹsẹ ti <body>nkan naa. Eleyi Admittedly ilosiwaju gige jẹ pataki lati ṣiṣẹ ni ayika a quirk ni iOS' iṣẹlẹ aṣoju , eyi ti yoo bibẹkọ ti se kan tẹ ni kia kia nibikibi ti ita ti awọn dropdown lati nfa awọn koodu ti o tilekun awọn dropdown. Ni kete ti awọn dropdown ti wa ni pipade, awọn afikun sofo mouseovermimu ti wa ni kuro.

Nipasẹ awọn abuda data

Ṣafikun data-bs-toggle="dropdown"si ọna asopọ kan tabi bọtini lati yi jisilẹ silẹ.

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

Nipasẹ JavaScript

Pe awọn silẹ nipasẹ JavaScript:

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

`data-bs-toggle="dropdown"`si tun beere

Laibikita boya o pe dropdown rẹ nipasẹ JavaScript tabi dipo lo data-api, data-bs-toggle="dropdown"nigbagbogbo nilo lati wa lori ipin okunfa ti sisọ silẹ.

Awọn aṣayan

Bi awọn aṣayan ṣe le kọja nipasẹ awọn abuda data tabi JavaScript, o le fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="{value}". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati “ CamelCase ” si “ kebab-case ” nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, lo data-bs-custom-class="beautifier"dipo data-bs-customClass="beautifier".

Bi ti Bootstrap 5.2.0, gbogbo awọn paati ṣe atilẹyin abuda data ipamọ idanwodata-bs-config ti o le ṣe atunto paati ti o rọrun bi okun JSON kan. Nigbati ohun kan ba ni data-bs-config='{"delay":0, "title":123}'ati data-bs-title="456"awọn abuda, iye ikẹhin titleyoo jẹ 456ati awọn abuda data lọtọ yoo dojuti awọn iye ti a fun lori data-bs-config. Ni afikun, awọn abuda data ti o wa ni anfani lati gbe awọn iye JSON bii data-bs-delay='{"show":0,"hide":150}'.

Oruko	Iru	Aiyipada	Apejuwe
`autoClose`	boolian, okun	`true`	Tunto ihuwasi isunmọ aifọwọyi ti sisọ silẹ: `true`- awọn dropdown yoo wa ni pipade nipa tite ita tabi inu awọn dropdown akojọ. `false`- awọn dropdown yoo wa ni pipade nipa tite bọtini toggle ati ọwọ pipe `hide`tabi `toggle`ọna. (Bakannaa kii yoo ni pipade nipa titẹ `esc`bọtini) `'inside'`- awọn dropdown yoo wa ni pipade (nikan) nipa tite inu awọn dropdown akojọ. `'outside'`- awọn dropdown yoo wa ni pipade (nikan) nipa tite ita awọn dropdown akojọ. Akiyesi: silẹ le wa ni pipade nigbagbogbo pẹlu `ESC`bọtini.
`boundary`	okun, ano	`'clippingParents'`	Ààlà àkúnwọ́sílẹ̀ àkúnwọ́sílẹ̀ ti àtòjọ ìsokọ̀sílẹ̀ (kan nikan si Popper's preventOverflow modifier). Nipa aiyipada o jẹ `clippingParents`ati pe o le gba itọkasi HTMLElement (nipasẹ JavaScript nikan). Fun alaye diẹ sii tọka si Popper's detectOverflow docs .
`display`	okun	`'dynamic'`	Nipa aiyipada, a lo Popper fun ipo ti o ni agbara. Mu eyi ṣiṣẹ pẹlu `static`.
`offset`	orun, okun, iṣẹ	`[0, 2]`	Aiṣedeede ti sisọ silẹ ni ibatan si ibi-afẹde rẹ. O le kọja okun kan ninu awọn abuda data pẹlu awọn iye ti o ya sọtọ komama bii: `data-bs-offset="10,20"`. Nigba ti a ba lo iṣẹ kan lati pinnu aiṣedeede, a npe ni pẹlu ohun ti o ni ibi-popper, itọkasi, ati popper rects bi ariyanjiyan akọkọ rẹ. Ipin DOM ti o nfa ti kọja bi ariyanjiyan keji. Iṣẹ naa gbọdọ da opo kan pada pẹlu awọn nọmba meji: skidding , ijinna . Fun alaye diẹ sii tọka si awọn iwe aiṣedeede Popper .
`popperConfig`	asan, ohun, iṣẹ	`null`	Lati yi Bootstrap aiyipada atunto Popper pada, wo iṣeto Popper . Nigbati a ba lo iṣẹ kan lati ṣẹda iṣeto Popper, o pe pẹlu ohun kan ti o ni iṣeto ni aiyipada Bootstrap. O ṣe iranlọwọ fun ọ lati lo ati dapọ aiyipada pẹlu iṣeto ni tirẹ. Iṣẹ naa gbọdọ da ohun atunto pada fun Popper.
`reference`	okun, ano, ohun	`'toggle'`	Itọkasi ano ti awọn dropdown akojọ. Gba awọn iye ti `'toggle'`, `'parent'`, itọkasi HTMLElement tabi ohun ti n pese `getBoundingClientRect`. Fun alaye diẹ sii tọka si awọn iwe-itumọ agbero Popper ati awọn docs ano foju .

Lilo iṣẹ pẹlu`popperConfig`

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

Awọn ọna

Ọna	Apejuwe
`dispose`	Pa ohun ano ká dropdown. (Yọ data ti o fipamọ sori nkan DOM kuro)
`getInstance`	Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ sisọ silẹ ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi `bootstrap.Dropdown.getInstance(element)`:.
`getOrCreateInstance`	Ọna aimi eyiti o da apẹẹrẹ silẹ silẹ ti o ni nkan ṣe si nkan DOM tabi ṣẹda ọkan tuntun ti ko ba ṣe ipilẹṣẹ. O le lo bi eleyi `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Tọju akojọ aṣayan silẹ ti navbar ti a fun tabi lilọ kiri taabu.
`show`	Ṣe afihan akojọ aṣayan silẹ ti navbar ti a fun tabi lilọ kiri taabu.
`toggle`	Yi akojọ aṣayan-silẹ ti navbar ti a fun tabi lilọ kiri taabu pada.
`update`	Ṣe imudojuiwọn ipo sisọ silẹ eroja kan.

Awọn iṣẹlẹ

Gbogbo awọn iṣẹlẹ sisọ silẹ jẹ ina ni eroja togg ati lẹhinna bubbled soke. Nitorinaa o tun le ṣafikun awọn olutẹtisi iṣẹlẹ lori nkan .dropdown-menuobi 's. hide.bs.dropdownati hidden.bs.dropdownawọn iṣẹlẹ ni ohun clickEvent-ini (nikan nigbati iru iṣẹlẹ atilẹba jẹ click) ti o ni Nkan Iṣẹlẹ kan fun iṣẹlẹ tẹ.

Iru iṣẹlẹ	Apejuwe
`hide.bs.dropdown`	Ina lẹsẹkẹsẹ nigbati ọna `hide`apẹẹrẹ ti pe.
`hidden.bs.dropdown`	Ti yọ kuro nigbati sisọ silẹ ba ti pari fifipamọ lati ọdọ olumulo ati awọn iyipada CSS ti pari.
`show.bs.dropdown`	Ina lẹsẹkẹsẹ nigbati `show`a pe ọna apẹẹrẹ.
`shown.bs.dropdown`	Ti ṣiṣẹ nigba ti sisọ silẹ ti jẹ ki o han si olumulo ati awọn iyipada CSS ti pari.

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

Awọn idasile

Akopọ

Wiwọle

Awọn apẹẹrẹ

Bọtini ẹyọkan

Bọtini pipin

Titobi

Dudu dropdowns

Awọn itọnisọna

RTL

Aarin

Sisọ silẹ

Idasilẹ aarin

Ju silẹ

Ibẹrẹ silẹ

Awọn ohun akojọ aṣayan

Ti nṣiṣe lọwọ

Alaabo

Titete akojọ aṣayan

Titete idahun

Awọn aṣayan titete

Akojọ akoonu

Awọn akọle

Awọn onipinpin

Ọrọ

Awọn fọọmu

Iwa isunmọ aifọwọyi

CSS

Awọn oniyipada

Sass oniyipada

Mixins

Lilo

Nipasẹ awọn abuda data

Nipasẹ JavaScript

`data-bs-toggle="dropdown"`si tun beere

Awọn aṣayan

Lilo iṣẹ pẹlu`popperConfig`

Awọn ọna

Awọn iṣẹlẹ

Awọn idasile

Akopọ

Wiwọle

Awọn apẹẹrẹ

Bọtini ẹyọkan

Bọtini pipin

Titobi

Dudu dropdowns

Awọn itọnisọna

RTL

Aarin

Sisọ silẹ

Idasilẹ aarin

Ju silẹ

Ibẹrẹ silẹ

Awọn ohun akojọ aṣayan

Ti nṣiṣe lọwọ

Alaabo

Titete akojọ aṣayan

Titete idahun

Awọn aṣayan titete

Akojọ akoonu

Awọn akọle

Akọsori silẹ

Awọn onipinpin

Ọrọ

Awọn fọọmu

Awọn aṣayan silẹ

Iwa isunmọ aifọwọyi

CSS

Awọn oniyipada

Sass oniyipada

Mixins

Lilo

Nipasẹ awọn abuda data

Nipasẹ JavaScript

data-bs-toggle="dropdown"si tun beere

Awọn aṣayan

Lilo iṣẹ pẹlupopperConfig

Awọn ọna

Awọn iṣẹlẹ

`data-bs-toggle="dropdown"`si tun beere

Lilo iṣẹ pẹlu`popperConfig`