Pa'u i lalo

Fa'afeso'ota'i fa'amaufa'ailoga mo le fa'aalia o lisi o feso'ota'iga ma isi mea fa'atasi ma le Bootstrap dropdown plugin.

I luga o lenei itulau

Vaaiga lautele

Pa'u i lalo e mafai ona fesuia'i, fa'alava fa'atatau mo le fa'aalia o lisi o so'otaga ma isi mea. O lo'o fa'afeso'ota'i fa'atasi ma le fa'apipi'i fa'apipi'i a le Bootstrap dropdown JavaScript. E fesuia'i i le kiliki, ae le o le fa'afefe; ose fa'ai'uga fa'atino ma le loto i ai .

Dropdowns e fausia i luga o se faletusi vaega lona tolu, Popper , lea e maua ai le tulaga malosi ma le suʻesuʻeina o vaaiga. Ia mautinoa e aofia ai popper.min.js i luma ole Bootstrap's JavaScript poʻo le faʻaoga bootstrap.bundle.min.js/ bootstrap.bundle.jso loʻo iai Popper. E le fa'aaogaina le Popper e fa'atutu i lalo fa'alalo i luga o navbars e ui e le mana'omia le fa'atulagaina malosi.

Avanoa

O le WAI ARIA standard o loʻo faʻamatalaina se role="menu"widget moni , ae o lenei mea e faʻapitoa i faʻaoga-pei o menus e faʻaosoina ai gaioiga poʻo galuega. ARIA menus e mafai ona i ai na'o mea fa'aitu, pusa siaki mea lisi, mea fa'aitula'i fa'amau, fa'alapotopotoga fa'amau leitio, ma sub-menu.

Bootstrap's dropdowns, i le isi itu, ua mamanuina ina ia lautele ma talafeagai i tulaga eseese ma fausaga faʻailoga. Mo se fa'ata'ita'iga, e mafai ona fa'atupu fa'amaulalo o lo'o iai mea fa'aopoopo ma fa'atonutonu fomu, e pei o fanua su'esu'e po'o fomu saini. Mo lenei mafuaʻaga, e le faʻamoemoeina e Bootstrap (pe faʻaopoopoina otometi) soʻo se rolema aria-uiga manaʻomia mo menus ARIA moni. E tatau i le au tusitala ona aofia ai nei uiga sili atu ona patino.

Ae ui i lea, e faʻaopoopoina e Bootstrap le lagolago faʻapipiʻi mo le tele o fesoʻotaʻiga lisi lisi, e pei o le mafai ona faʻaogaina .dropdown-itemelemene taʻitasi e faʻaaoga ai ki ma tapuni le lisi ma le ESCki.

Faataitaiga

Afifi le koli o le pa'u i lalo (lou faamau po'o le so'oga) ma le lisi fa'alalo i totonu .dropdown, po'o se isi elemene e fa'ailoa mai position: relative;. E mafai ona fa'aosoina mai <a>po'o <button>elemene e fetaui lelei ma ou mana'oga. O faʻataʻitaʻiga o loʻo faʻaalia iinei e faʻaogaina <ul>elemene faʻaogaina pe a talafeagai ai, ae o loʻo lagolagoina le faʻailoga masani.

faamau tasi

So'o se mea e tasi .btne mafai ona liua i se pa'u i lalo toggle ma nisi suiga fa'ailoga. O le auala lenei e mafai ai ona e faʻaogaina i latou i <button>elemene e lua:

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>

Ma faʻatasi ai ma <a>elemene:

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>

O le vaega pito sili ona lelei e mafai ona e faia lenei mea i soʻo se suiga faʻamau, foi:

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

Fa'amau vaevae

E fa'apena fo'i, fa'atupu fa'amaufa'ailoga vaelua fa'atasi ma fa'ailoga tutusa ma fa'amau fa'amau tasi, ae fa'atasi ai ma le fa'aopoopoina .dropdown-toggle-splitmo le avanoa talafeagai i le fa'amaufa'ailoga.

Matou te fa'aogaina lenei vasega fa'aopoopo e fa'aitiitia ai le fa'alava paddingi itu uma e lua o le fa'ailoga i le 25% ma aveese le margin-leftfa'aopoopo mo fa'amau fa'amau fa'amau. O na suiga fa'aopoopo e fa'amautu ai le fa'amaufa'ailoga i le ki vaelua ma tu'u ai se vaega e sili atu le lapopo'a ta i tafatafa o le ki autu.

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

Tele

O fa'amau fa'amau e galue i fa'amau o so'o se lapo'a, e aofia ai fa'amau fa'aletonu ma vaevae fa'amau.

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

Pogisa pa'ulalo

Filifili i lalo ifo pogisa e fa'afetaui i se navbar pogisa po'o sitaili masani e ala i le fa'aopoopo .dropdown-menu-darki luga o se .dropdown-menu. Leai se suiga e mana'omia i mea e pa'u i lalo.

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>

Ma faʻaaogaina i totonu o se navbar:

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>

Fa'atonuga

RTL

O faʻatonuga e faʻaalia pe a faʻaaoga Bootstrap ile RTL, o lona uiga .dropstarto le a faʻaalia ile itu taumatau.

totonugatotonu

Fa'atotonugalemu le lisi o le pa'u i lalo o le koli ma .dropdown-centerle elemene matua.

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>

Pa'u

Fa'aoso lisi fa'alalo i luga o elemene e ala i le fa'aopoopo .dropupi le elemene matua.

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

Fa'atotonugalemu

Fa'atotonugalemu le lisi tu'u i luga a'e o le koli ma .dropup-centerle elemene matua.

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

Fa'aoso menus pa'u i le itu taumatau o elemene e ala i le fa'aopoopo .dropendi le elemene matua.

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

Fa'ato'a amata

Fa'aoso menus pa'u i le agavale o elemene e ala i le fa'aopoopo .dropstarti le elemene matua.

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

E mafai ona e fa'aogaina <a>po'o <button>elemene e fai ma mea fa'alalo.

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>

E mafai fo'i ona e faia ni mea fa'ato'a fa'atasi ma .dropdown-item-text. Lagona le saoloto e faʻapipiʻi atili i le CSS masani poʻo le faʻaogaina o tusitusiga.

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>

Toaga

Faaopoopo .activei aitema i le pa'ū i lalo e fa'avasega ai e pei o le gaioi . Ina ia faʻaalia le tulaga malosi i tekinolosi fesoasoani, faʻaaoga le aria-currentuiga - faʻaaoga le pagetau mo le itulau o loʻo i ai nei, poʻo truele mea o loʻo i ai nei i se seti.

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>

Fa'aletonu

Faaopoopo .disabledi aitema i le pa'ū i lalo e fa'apena e le atoatoa .

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>

Ona o le faaletonu, e otometi lava ona tu'u 100% mai le pito i luga ma le itu agavale o lona matua. E mafai ona e suia lenei mea i .drop*vasega faʻatonu, ae e mafai foi ona e pulea i latou i isi vasega faʻaleleia.

Fa'aopoopo .dropdown-menu-endi le .dropdown-menufa'aoga i le taumatau le lisi o le pa'u i lalo. E fa'aali fa'atonuga pe a fa'aaoga Bootstrap ile RTL, o lona uiga .dropdown-menu-endo le a fa'aalia ile itu agavale.

Ulu i luga! O lo'o tu'u fa'alalolalo fa'afetai ia Popper se'i vagana o lo'o iai i totonu o se 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>

Fa'atonuga tali

Afai e te manaʻo e faʻaogaina le faʻaogaina o le tali, faʻamalo le tulaga faʻamalosi e ala i le faʻaopoopoina o le data-bs-display="static"uiga ma faʻaoga vasega fesuiaiga tali.

Ina ia fa'aoga sa'o le lisi o le pa'u i lalo ma le va'aiga ua tu'uina atu pe lapopoa, fa'aopoopo .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>

Ina ia fa'aoga le lisi agavale i lalo ma le va'aiga ua tu'uina atu pe lapopoa, fa'aopoopo .dropdown-menu-endma .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>

Manatua e te le manaʻomia le faʻaopoopoina o se data-bs-display="static"uiga i paʻu pa'ū i luga o navbars, talu ai e le faʻaaogaina Popper i navbars.

Filifiliga fa'aoga

O le fa'aaogaina o le tele o filifiliga o lo'o fa'aalia i luga, o se tama'i umukuka fa'ato'a fa'ata'otoga o filifiliga fa'atutu i lalo i le nofoaga e tasi.

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>

Ulutala

Fa'aopoopo se ulutala e fa'ailoga vaega o gaioioiga i so'o se lisi fa'alalo.

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>

Vaevaega

Vaevae vaega o mea fa'aitu fa'atasi ma se vaeluaga.

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>

Tusitusi

Tu'u so'o se tusitusiga fa'afuafua i totonu ole lisi fa'alalo ma fa'aoga ma fa'aoga avanoa avanoa . Manatua e te mana'omia ni sitaili fa'aopoopo e fa'agata ai le lautele o le lisi.

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>

Fomu

Tu'u se fomu i totonu o le lisi o le pa'u i lalo, pe fai i totonu o le lisi o le pa'u i lalo, ma fa'aoga le pito i lalo po'o le padding utilities e tu'u ai le avanoa leaga e te mana'omia.

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>

Fa'aoga data-bs-offsetpe data-bs-referencesui le nofoaga o le pa'u i lalo.

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>

Amioga tapuni ta'avale

Ona o le faaletonu, ua tapunia le lisi pa'u i lalo pe a kiliki i totonu po'o fafo atu o le lisi pa'u. E mafai ona e fa'aogaina le autoClosefilifiliga e sui ai lenei amio o le pa'u i lalo.

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

Fuafuaga

Fa'aopoopo i le v5.2.0

I le avea ai o se vaega o le suiga o le CSS suiga a le Bootstrap, o loʻo faʻaogaina e le dropdowns le CSS faʻapitonuʻu i luga .dropdown-menumo le faʻaleleia atili o taimi masani. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

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

Fa'asinomaga e ala i le CSS fesuiaiga e mafai ona va'aia i luga o le .dropdown-menu-darkvasega lea tatou te fa'amalo ai fa'atatauga fa'apitoa e aunoa ma le fa'aopoopoina o fa'alua CSS filifilia.

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

Fesuia'i mo fa'apalapala uma:

$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

Su'ega mo le pa'u pogisa :

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

Fesuia'i mo fa'ailoga fa'avae CSS e fa'ailoa mai ai le fegalegaleai a le pa'u i lalo:

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

Mixins

Mixins e faʻaaogaina e faʻatupu ai le CSS-based carets ma e mafai ona maua ile 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;
    }
  }
}

Fa'aoga

E ala i fa'amatalaga uiga po'o le JavaScript, o le pa'ū fa'apipi'i fa'apipi'i mea natia (pa'u i lalo menus) e ala i le toggle le .showvasega i le matua .dropdown-menu. O le data-bs-toggle="dropdown"uiga e fa'alagolago i ai mo le tapunia o menus dropdown i se tulaga o talosaga, o se manatu lelei le fa'aaogaina i taimi uma.

I luga o masini e mafai ona pa'i, o le tatalaina o se pa'u i lalo e fa'aopoopoina ai le gaogao lima mouseoveri tamaiti vave o le <body>elemene. O lenei hack e ta'utinoina mataga e mana'omia e galue fa'ata'amilo i se fa'alavelave i le tu'uina atu o mea e fai a iOS , lea e ono taofia ai se pa'i i so'o se mea i fafo atu o le pa'u i lalo mai le fa'aosoina o le code e tapuni ai le pa'ū. O le taimi lava e tapuni ai le pa'u i lalo, o nei isi fa'aoga gaogao mouseovere aveese.

E ala i fa'amaumauga uiga

Fa'aopoopo data-bs-toggle="dropdown"i se so'oga po'o se fa'amau e fa'asolo i lalo.

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

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

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

`data-bs-toggle="dropdown"`manaomia pea

Tusa lava pe e te valaʻau lau pa'ū i lalo e ala i le JavaScript pe faʻaaoga le data-api, data-bs-toggle="dropdown"e manaʻomia i taimi uma le i ai i luga o le elemene faʻaoso.

Filifiliga

A'o mafai ona pasia filifiliga e ala i fa'amatalaga uiga po'o le JavaScript, e mafai ona e fa'aopoopoina se igoa filifiliga i le data-bs-, pei o le data-bs-animation="{value}". Ia mautinoa e sui le ituaiga mataupu o le igoa filifiliga mai le " CamelCase " i le " kebab-case " pe a pasia filifiliga e ala i faʻamatalaga uiga. Mo se faʻataʻitaʻiga, faʻaaoga data-bs-custom-class="beautifier"nai lo le data-bs-customClass="beautifier".

E pei o le Bootstrap 5.2.0, o vaega uma e lagolagoina se faʻataʻitaʻiga faʻaagaga faʻamaumauga uiga data-bs-confige mafai ona faʻapipiʻi faigofie vaega faʻapipiʻi o se manoa JSON. Afai ei ai se elemene data-bs-config='{"delay":0, "title":123}'ma data-bs-title="456"uiga, o le titletau mulimuli o le ai ai 456ma o faʻamatalaga faʻamatalaga uiga ese o le a faʻamalo ai tau o loʻo tuʻuina atu ile data-bs-config. E le gata i lea, o faʻamaumauga o loʻo i ai nei e mafai ona faʻapipiʻi JSON tau pei o data-bs-delay='{"show":0,"hide":150}'.

Igoa	Ituaiga	Fa'atonu	Fa'amatalaga
`autoClose`	boolean, manoa	`true`	Fa'atonu le amio tapuni ta'avale a le fa'apalapala: `true`- o le a tapunia le pa'u i lalo e ala i le kiliki i fafo po'o totonu o le lisi pa'u. `false`- o le a tapunia le pa'ū i lalo e ala i le kilikiina o le ki toggle ma valaʻau ma le lima `hide`poʻo le `toggle`metotia. (O le a le tapunia foi i le oomiina o `esc`ki) `'inside'`- o le a tapunia le pa'ū i lalo (na'o) e ala i le kiliki i totonu o le lisi o le pa'u. `'outside'`- o le a tapunia le pa'u i lalo (na'o) e ala i le kiliki i fafo atu o le lisi o le pa'u. Manatua: e mafai ona tapunia le pa'ū i lalo i le `ESC`ki.
`boundary`	manoa, elemene	`'clippingParents'`	Fa'agata fa'agata o le lisi fa'alalo (e fa'atatau i le Popper's preventOverflow modifier). E le mafai `clippingParents`ona talia ma e mafai ona talia se HTMLElement reference (e ala i le JavaScript). Mo nisi fa'amatalaga va'ai ile Popper's detectOverflow docs .
`display`	manoa	`'dynamic'`	E ala i le le mafai, matou te faʻaaogaina Popper mo le faʻatulagaina o tulaga. Taofi lenei mea i le `static`.
`offset`	fa'asologa, manoa, galuega	`[0, 2]`	Offset o le pa'u i lalo e fa'atatau i lona fa'amoemoe. E mafai ona e pasiina se manoa i fa'amatalaga uiga fa'atasi ai ma koma fa'atauva'a e pei o: `data-bs-offset="10,20"`. A fa'aoga se galuega e fa'atatau ai le fa'a'ese'ese, e ta'ua i se mea o lo'o i ai le fa'aogaina o le popper, le fa'asinomaga, ma le popper rects e fai ma ana finauga muamua. O le fa'aosoina elemene DOM node ua pasia e fai ma finauga lona lua. Ole galuega e tatau ona toe fa'afo'i se laina e lua numera: fa'ase'e , mamao . Mo nisi fa'amatalaga va'ai ile Popper's offset docs .
`popperConfig`	null, mea, galuega	`null`	Ina ia suia le faʻaogaina o le Popper config a Bootstrap, vaʻai i le faatulagaga a Popper . A faʻaaogaina se galuega e fai ai le Popper configuration, e valaʻau i se mea e aofia ai le faʻaogaina o le Popper configuration a le Bootstrap. E fesoasoani ia te oe e fa'aoga ma tu'ufa'atasia le mea e le mafai ona fai ma lau lava fa'atulagaga. Ole galuega e tatau ona toe faʻafoʻi se mea faʻatulagaina mo Popper.
`reference`	manoa, elemene, mea	`'toggle'`	Fa'asinoga elemene o le lisi o le pa'u i lalo. Talia le taua o le `'toggle'`, `'parent'`, se HTMLElement reference poʻo se mea e maua ai `getBoundingClientRect`. Mo nisi fa'amatalaga fa'asino ile Popper's constructor docs ma virtual element docs .

Fa'aaogaina galuega fa'atasi ma`popperConfig`

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

Metotia

Metotia	Fa'amatalaga
`dispose`	Fa'aleagaina le pa'u i lalo o se elemene. (Ave'ese fa'amaumauga o lo'o teuina ile elemene DOM)
`getInstance`	Metotia static lea e mafai ai ona e maua le faʻataʻitaʻiga pa'ū e fesoʻotaʻi ma se elemene DOM, e mafai ona e faʻaogaina e pei o lenei: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Metotia static e toe faʻafoʻi mai ai se faʻataʻitaʻiga pa'ū e fesoʻotaʻi ma se elemene DOM pe fatuina se mea fou pe a leʻi amataina. E mafai ona e fa'aogaina fa'apenei: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Natia le lisi pa'u i lalo o se navbar ua tu'uina atu po'o le fa'asalalauga fa'apipi'i.
`show`	Fa'aali le lisi o le pa'u i lalo o se navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
`toggle`	Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga fa'apipi'i.
`update`	Fa'afou le tulaga o le pa'u i lalo o se elemene.

Mea na tutupu

O mea uma e pa'u i lalo o lo'o fa'amumuina i le elemene ta'avale ona fa'amumu lea i luga. E mafai fo'i ona e fa'aopoopo mea fa'alogo i le .dropdown-menu'elemene matua. hide.bs.dropdownma hidden.bs.dropdownmea e tutupu e iai se clickEventmea totino (na'o le ulua'i Tu'aiga Fa'aaliga click) o lo'o i ai se Mea Fa'atino mo le kiliki o mea na tupu.

Ituaiga mea na tupu	Fa'amatalaga
`hide.bs.dropdown`	E mu vave pe a `hide`vala'au le auala fa'ata'ita'i.
`hidden.bs.dropdown`	Fa'amu ina ua mae'a natia le pa'u i lalo mai le tagata fa'aoga ma ua mae'a suiga CSS.
`show.bs.dropdown`	E mu vave pe a `show`vala'au le auala fa'ata'ita'i.
`shown.bs.dropdown`	Fa'amu'a ina ua fa'aalia le pa'u i lalo i le tagata fa'aoga ma ua mae'a suiga o le CSS.

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

Pa'u i lalo

Vaaiga lautele

Avanoa

Faataitaiga

faamau tasi

Fa'amau vaevae

Tele

Pogisa pa'ulalo

Fa'atonuga

RTL

totonugatotonu

Pa'u

Fa'atotonugalemu

Dropend

Fa'ato'a amata

Menu mea

Toaga

Fa'aletonu

Fa'atonuga lisi

Fa'atonuga tali

Filifiliga fa'aoga

Menu o lo'o i totonu

Ulutala

Vaevaega

Tusitusi

Fomu

Amioga tapuni ta'avale

CSS

Fuafuaga

Sass fesuiaiga

Mixins

Fa'aoga

E ala i fa'amaumauga uiga

E ala i le JavaScript

`data-bs-toggle="dropdown"`manaomia pea

Filifiliga

Fa'aaogaina galuega fa'atasi ma`popperConfig`

Metotia

Mea na tutupu

Pa'u i lalo

Vaaiga lautele

Avanoa

Faataitaiga

faamau tasi

Fa'amau vaevae

Tele

Pogisa pa'ulalo

Fa'atonuga

RTL

totonugatotonu

Pa'u

Fa'atotonugalemu

Dropend

Fa'ato'a amata

Menu mea

Toaga

Fa'aletonu

Fa'atonuga lisi

Fa'atonuga tali

Filifiliga fa'aoga

Menu o lo'o i totonu

Ulutala

Ulutala pa'ū

Vaevaega

Tusitusi

Fomu

Filifiliga pa'u i lalo

Amioga tapuni ta'avale

CSS

Fuafuaga

Sass fesuiaiga

Mixins

Fa'aoga

E ala i fa'amaumauga uiga

E ala i le JavaScript

data-bs-toggle="dropdown"manaomia pea

Filifiliga

Fa'aaogaina galuega fa'atasi mapopperConfig

Metotia

Mea na tutupu

`data-bs-toggle="dropdown"`manaomia pea

Fa'aaogaina galuega fa'atasi ma`popperConfig`