Fa'asolo ile anotusi autu Fa'asolo ile fa'ata'ita'iga o fa'amatalaga
in English

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ʻaoso ai gaioiga poʻo galuega. O menus ARIA e mafai ona i ai na'o mea fa'aitu, mea fa'aitu pusa siaki, mea fa'aitula'i fa'amau leitio, vaega fa'amau leitio, ma tama'i lisi.

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Ma faʻatasi ai ma <a>elemene:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

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 fa'amau vaelua ma maua ai se vaega e sili atu le lapopo'a fa'atau 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'u i lalo

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.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Ma faʻaaogaina i totonu o se navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

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.

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>

Matamata

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">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Matāua agavale

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">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

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.

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

Malosi

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.

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

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

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

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

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Menu o lo'o i totonu

Ulutala

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

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

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

O nisi fa'ata'ita'iga o tusitusiga e tafe fua i totonu o le lisi fa'alalo.

Ma o le tele lea o faʻataʻitaʻiga tusitusiga.

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

E fou iinei? Saini Ua galo le upu faataga? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Sass

Fuafuaga

Fesuia'i mo fa'alalo 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:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($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:           $dropdown-padding-y $dropdown-item-padding-x;

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'ū 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 fa'aopoopoga gaogao mouseovere ave'esea.

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

E ala i le JavaScript

Valaau le to'alalo e ala i le JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-bs-, pei o le data-bs-offset="". 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, nai lo le faʻaaogaina data-bs-autoClose="false", faʻaaoga data-bs-auto-close="false".

Igoa Ituaiga Fa'atonu Fa'amatalaga
boundary manoa | elemene 'clippingParents' Fa'agata fa'agata o le lisi fa'alalo (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 .
reference manoa | elemene | mea faitino '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 .
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 faatino [0, 2]

Offset o le pa'ū fa'atatau i lona fa'amoemoe. E mafai ona e pasiina se manoa i uiga fa'amaumauga ma fa'ailoga e vavae'ese koma e pei o:data-bs-offset="10,20"

A fa'aoga se galuega e fa'atatau ai le offset, e ta'ua i se mea o lo'o i ai le fa'apipi'i 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. O le galuega e tatau ona toe faʻafoʻi se laina e lua numera: .[skidding, distance]

Mo nisi fa'amatalaga va'ai ile Popper's offset docs .
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 hidepoʻo le togglemetotia. (O le a le tapunia foi i le oomiina o escki)
  • '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.
popperConfig null | mea | galuega faatino 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.

Fa'aaogaina galuega fa'atasi mapopperConfig

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

Metotia

Metotia Fa'amatalaga
toggle Fa'asolo i lalo le lisi o le navbar ua tu'uina atu po'o le fa'atautaiga 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.
hide Natia le lisi pa'u i lalo o se navbar ua tu'uina atu po'o le fa'asalalauga fa'apipi'i.
update Fa'afou le tulaga o le pa'u i lalo o se elemene.
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 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ʻaaogaina e pei o lenei:bootstrap.Dropdown.getOrCreateInstance(element)

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.

Metotia Fa'amatalaga
show.bs.dropdown E mu vave pe a valaau le auala fa'ata'ita'iga.
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.
hide.bs.dropdown E mu vave pe a 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. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})