Dropdowns

Ŝaltu kuntekstajn supermetaĵojn por montri listojn de ligiloj kaj pli kun la menu-aldonaĵo Bootstrap.

Sur ĉi tiu paĝo

Superrigardo

Dropdowns estas ŝanĝeblaj, kuntekstaj supermetaĵoj por montri listojn de ligiloj kaj pli. Ili fariĝas interagaj per la inkluzivita Bootstrap-falumenuo JavaScript-kromaĵo. Ili estas ŝanĝitaj per klakado, ne per ŝvebado; ĉi tio estas intencita desegna decido .

Dropdowns estas konstruitaj sur triaparta biblioteko, Popper , kiu disponigas dinamikan poziciigon kaj vidfenestrodetekton. Nepre inkluzivu popper.min.js antaŭ la JavaScript de Bootstrap aŭ uzu bootstrap.bundle.min.js/ bootstrap.bundle.jskiu enhavas Popper. Popper ne kutimas poziciigi falmenuojn en navbaroj tamen ĉar dinamika poziciigado ne estas postulata.

Alirebleco

La WAI ARIA normo difinas realan role="menu"fenestraĵon , sed ĉi tio estas specifa por aplikaĵ-similaj menuoj kiuj ekigas agojn aŭ funkciojn. ARIA- menuoj povas enhavi nur menueroj, markobutono menueroj, radiobutono menueroj, radiobutongrupoj kaj submenuoj.

La menuoj de Bootstrap, aliflanke, estas desegnitaj por esti ĝeneralaj kaj aplikeblaj al diversaj situacioj kaj markadaj strukturoj. Ekzemple, eblas krei falmenuojn kiuj enhavas pliajn enigojn kaj formularajn kontrolojn, kiel serĉkampojn aŭ ensalutformularojn. Tial, Bootstrap ne atendas (nek aŭtomate aldonas) iun ajn el la rolekaj aria-atributoj necesaj por veraj ARIA- menuoj. Aŭtoroj devos mem inkluzivi ĉi tiujn pli specifajn atributojn.

Tamen, Bootstrap aldonas enkonstruitan subtenon por la plej multaj normaj klavaraj menuinteragoj, kiel ekzemple la kapablo moviĝi tra individuaj .dropdown-itemelementoj uzante la kursorajn klavojn kaj fermi la menuon per la ESCklavo.

Ekzemploj

Envolvu la baskulon de la falmenuo (via butono aŭ ligilo) kaj la falmenuon ene de .dropdown, aŭ alia elemento kiu deklaras position: relative;. Dropdowns povas esti ekigitaj de <a>aŭ <button>elementoj por pli bone konveni viajn eblajn bezonojn. La ekzemploj montritaj ĉi tie uzas semantikajn <ul>elementojn kie konvene, sed kutima markado estas subtenata.

Ununura butono

Ajna unuopaĵo .btnpovas esti igita falmenumo kun iuj markadaj ŝanĝoj. Jen kiel vi povas funkcii ilin per ambaŭ <button>elementoj:

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

Kaj kun <a>elementoj:

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

La plej bona parto estas, ke vi ankaŭ povas fari tion per iu ajn butonvariaĵo:

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

Dividi butonon

Simile, kreu dividitajn butonajn falmenuojn kun preskaŭ la sama markado kiel ununuraj butonfalmenuoj, sed kun la aldono de .dropdown-toggle-splitpor taŭga interspaco ĉirkaŭ la falmenumo.

Ni uzas ĉi tiun ekstran klason por redukti la horizontalon paddingĉe ambaŭ flankoj de la kamero je 25% kaj forigi la margin-leftaldonitan por regulaj butonfalumoj. Tiuj kromaj ŝanĝoj tenas la signon centrita en la dividita butono kaj provizas pli taŭge grandecon trafitan areon apud la ĉefa butono.

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

Dimensio

Butonaj falmenuoj funkcias kun butonoj de ĉiuj grandecoj, inkluzive de defaŭltaj kaj dividitaj falmenuoj.

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

Malhelaj falmenuoj

Elektu pli malhelajn menuojn por kongrui kun malhela navbaro aŭ kutima stilo aldonante .dropdown-menu-darkal ekzistanta .dropdown-menu. Neniuj ŝanĝoj estas bezonataj al la menumenuoj.

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

Kaj uzi ĝin en navigadbreto:

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

Direktoj

RTL

Direktoj estas spegulitaj kiam vi uzas Bootstrap en RTL, tio signifas .dropstart, ke aperos dekstre.

Dropup

Ekfunkciigu falmenuojn super elementoj aldonante .dropupal la gepatra elemento.

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

Dropright

Ekfunkciigu falmenuojn dekstre de la elementoj aldonante .dropendal la gepatra elemento.

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

Dropleft

Ekfunkciigu falmenuojn maldekstre de la elementoj aldonante .dropstartal la gepatra elemento.

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

Vi povas uzi <a>aŭ <button>elementojn kiel falmenuajn erojn.

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

Vi ankaŭ povas krei ne-interagajn menumenuojn per .dropdown-item-text. Bonvolu stiligi plu per kutimaj CSS aŭ tekstaj utilecoj.

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

Aktiva

Aldonu .activeal eroj en la menuo por stiligi ilin kiel aktivaj . Por transdoni la aktivan staton al helpaj teknologioj, uzu la aria-currentatributon — uzante la pagevaloron por la nuna paĝo aŭ truepor la aktuala ero en aro.

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

Malebligita

Aldonu .disabledal eroj en la menuo por stiligi ilin kiel malŝaltitaj .

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

Defaŭlte, falmenuo estas aŭtomate poziciigita 100% de la supro kaj laŭ la maldekstra flanko de sia gepatro. Vi povas ŝanĝi ĉi tion per la direktaj .drop*klasoj, sed vi ankaŭ povas kontroli ilin per pliaj modifklasoj.

Aldonu .dropdown-menu-endal .dropdown-menudekstre vicigi la falmenuon. Direktoj estas spegulitaj kiam vi uzas Bootstrap en RTL, tio signifas .dropdown-menu-end, ke aperos maldekstre.

Atentu! Dropdowns estas poziciigitaj danke al Popper krom kiam ili estas enhavitaj en 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>

Respondema vicigo

Se vi volas uzi respondeman vicigon, malŝaltu dinamikan poziciigon aldonante la data-bs-display="static"atributon kaj uzu la respondemajn variajn klasojn.

Por vicigi dekstre la falmenuon kun la donita rompopunkto aŭ pli granda, aldonu .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>

Por vicigi maldekstren la falmenuon kun la donita rompopunkto aŭ pli granda, aldonu .dropdown-menu-endkaj .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>

Notu, ke vi ne bezonas aldoni data-bs-display="static"atributon al falbutonoj en navbaroj, ĉar Popper ne estas uzata en navbaroj.

Opcioj de vicigo

Prenante la plej multajn el la opcioj montritaj supre, jen malgranda kuireja lavujo-demonstro de diversaj falmenumaj alineaj opcioj en unu loko.

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

Kapoj

Aldonu kaplinion por etikedi sekciojn de agoj en iu ajn falmenuo.

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

Dividiloj

Apartigu grupojn de rilataj menueroj per disigilo.

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

Teksto

Metu ajnan liberforman tekston en falmenuon kun teksto kaj uzu interspacajn utilecojn . Notu, ke vi verŝajne bezonos pliajn grandecostilojn por limigi la menuan larĝecon.

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

Formoj

Metu formularon en falmenuon, aŭ transformu ĝin en falmenuon, kaj uzu marĝenajn aŭ kompletigajn ilojn por doni al ĝi la negativan spacon, kiun vi postulas.

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

Uzu data-bs-offsetaŭ data-bs-referencepor ŝanĝi la lokon de la menuo.

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

Aŭtomate fermita konduto

Defaŭlte, la falmenuo estas fermita alklakante ene aŭ ekster la falmenuo. Vi povas uzi la autoCloseopcion por ŝanĝi ĉi tiun konduton de la menuo.

<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

Variabloj

Variabloj por ĉiuj falmenuoj:

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

Variabloj por la malhela falmenuo :

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

Variabloj por la CSS-bazitaj signoj kiuj indikas la interagadon de falmenuo:

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

Miksinoj

Miksinoj estas uzataj por generi la CSS-bazitajn signojn kaj troveblas en 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;
    }
  }
}

Uzado

Per datumaj atributoj aŭ JavaScript, la falmenuo aldonaĵo ŝanĝas kaŝitan enhavon (falmenuoj) ŝanĝante la .showklason sur la gepatro .dropdown-menu. La data-bs-toggle="dropdown"atributo estas fidata por fermi falmenuojn ĉe aplika nivelo, do estas bona ideo ĉiam uzi ĝin.

Sur tuŝ-ebligitaj aparatoj, malfermi falmenuon aldonas malplenajn mouseovertraktilojn al la tujaj infanoj de la <body>elemento. Ĉi tiu certe malbela hako estas necesa por labori ĉirkaŭ strangaĵo en la eventa delegacio de iOS , kiu alie malhelpus frapeton ie ajn ekster la falmenuo ekfunkciigi la kodon, kiu fermas la falmenuon. Post kiam la menuo estas fermita, ĉi tiuj aldonaj malplenaj mouseoverpritraktiloj estas forigitaj.

Per datumaj atributoj

Aldonu data-bs-toggle="dropdown"al ligilo aŭ butono por ŝanĝi falmenuon.

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

Per JavaScript

Voku la menuojn per JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`ankoraŭ bezonata

Sendepende de ĉu vi nomas vian falmenuon per JavaScript aŭ anstataŭe uzas la datumoj-api, data-bs-toggle="dropdown"ĉiam necesas ĉeesti sur la ellasilelemento de la menuo.

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-offset="". Nepre ŝanĝu la kazon de la opcionomo de camelCase al kebab-case kiam vi transdonas la opciojn per datumaj atributoj. Ekzemple, anstataŭ uzi data-bs-autoClose="false", uzu data-bs-auto-close="false".

Nomo	Tajpu	Defaŭlte	Priskribo
`boundary`	ŝnuro \| elemento	`'clippingParents'`	Superflua limlimo de la falmenuo (validas nur por la preventOverflow-modifilo de Popper). Defaŭlte ĝi estas `'clippingParents'`kaj povas akcepti HTMLElement-referencon (nur per JavaScript). Por pliaj informoj, rigardu la dokumentojn de detectOverflow de Popper .
`reference`	ŝnuro \| elemento \| objekto	`'toggle'`	Referenca elemento de la falmenuo. Akceptas la valorojn de `'toggle'`, `'parent'`, HTMLElement-referenco aŭ objekto provizanta `getBoundingClientRect`. Por pliaj informoj raportu al la dokumentoj pri konstrukciisto de Popper kaj al dokumentoj pri virtualaj elementoj .
`display`	ŝnuro	`'dynamic'`	Defaŭlte, ni uzas Popper por dinamika poziciigado. Malebligu ĉi tion per `static`.
`offset`	tabelo \| ŝnuro \| funkcio	`[0, 2]`	Ofseto de la falmenuo relative al ĝia celo. Vi povas pasi ĉenon en datumaj atributoj kun komoj apartigitaj valoroj kiel:`data-bs-offset="10,20"` Kiam funkcio estas uzata por determini la ofseton, ĝi estas vokita kun objekto enhavanta la popper-lokigon, la referencon kaj popper-rektojn kiel sia unua argumento. La ekiga elemento DOM-nodo estas pasita kiel la dua argumento. La funkcio devas redoni tabelon kun du nombroj: .`[skidding, distance]` Por pliaj informoj raportu al la ofsetaj dokumentoj de Popper .
`autoClose`	bulea \| ŝnuro	`true`	Agordu la aŭtomatan ferman konduton de la menuo: `true`- la falmenuo estos fermita klakante ekster aŭ ene de la falmenuo. `false`- la falmenuo estos fermita alklakante la baskuliman butonon kaj permane vokante `hide`aŭ `toggle`metodon. (Ankaŭ ne estos fermita premante `esc`klavon) `'inside'`- la falmenuo estos fermita (nur) per klako ene de la falmenuo. `'outside'`- la falmenuo estos fermita (nur) per klako ekster la falmenuo.
`popperConfig`	nulo \| objekto \| funkcio	`null`	Por ŝanĝi la defaŭltan Popper-agordon de Bootstrap, vidu la agordon de Popper . Kiam funkcio estas uzata por krei la Popper-agordon, ĝi estas vokita kun objekto kiu enhavas la defaŭltan Popper-agordon de Bootstrap. Ĝi helpas vin uzi kaj kunfandi la defaŭltan kun via propra agordo. La funkcio devas resendi agordan objekton por Popper.

Uzante funkcion kun`popperConfig`

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

Metodoj

Metodo	Priskribo
`toggle`	Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado.
`show`	Montras la falmenuon de difinita navigado aŭ klapeta navigado.
`hide`	Kaŝas la falmenuon de difinita navbreto aŭ klapeta navigado.
`update`	Ĝisdatigas la pozicion de la menuo de elemento.
`dispose`	Detruas la falmenuon de elemento. (Forigas konservitajn datumojn sur la DOM-elemento)
`getInstance`	Senmova metodo, kiu ebligas al vi akiri la falmenumon asociitan al DOM-elemento, vi povas uzi ĝin tiel:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Senmova metodo kiu resendas falmenumon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel:`bootstrap.Dropdown.getOrCreateInstance(element)`

Eventoj

Ĉiuj falmenumaj eventoj estas pafitaj ĉe la ŝanĝanta elemento kaj tiam bobelitaj. Do vi ankaŭ povas aldoni okazaĵaŭskultantojn sur la .dropdown-menugepatra elemento de la. hide.bs.dropdownkaj hidden.bs.dropdowneventoj havas clickEventposedaĵon (nur kiam la origina Event-tipo estas click) kiu enhavas Event Object por la klaka evento.

Metodo	Priskribo
`show.bs.dropdown`	Ekbruligas tuj kiam la metodo de spektaklo estas vokita.
`shown.bs.dropdown`	Pafita kiam la falmenuo fariĝis videbla por la uzanto kaj CSS-transiroj finiĝis.
`hide.bs.dropdown`	Ekbruligas tuj kiam la metodo de kaŝi kazo estas vokita.
`hidden.bs.dropdown`	Pafita kiam la falmenuo finiĝis kaŝita de la uzanto kaj CSS-transiroj finiĝis.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Dropdowns

Superrigardo

Alirebleco

Ekzemploj

Ununura butono

Dividi butonon

Dimensio

Malhelaj falmenuoj

Direktoj

RTL

Dropup

Dropright

Dropleft

Menueroj

Aktiva

Malebligita

Menua vicigo

Respondema vicigo

Opcioj de vicigo

Enhavo de la menuo

Kapoj

Dividiloj

Teksto

Formoj

Aŭtomate fermita konduto

Sass

Variabloj

Miksinoj

Uzado

Per datumaj atributoj

Per JavaScript

`data-bs-toggle="dropdown"`ankoraŭ bezonata

Opcioj

Uzante funkcion kun`popperConfig`

Metodoj

Eventoj

Dropdowns

Superrigardo

Alirebleco

Ekzemploj

Ununura butono

Dividi butonon

Dimensio

Malhelaj falmenuoj

Direktoj

RTL

Dropup

Dropright

Dropleft

Menueroj

Aktiva

Malebligita

Menua vicigo

Respondema vicigo

Opcioj de vicigo

Enhavo de la menuo

Kapoj

menua kaplinio

Dividiloj

Teksto

Formoj

Dropdown opcioj

Aŭtomate fermita konduto

Sass

Variabloj

Miksinoj

Uzado

Per datumaj atributoj

Per JavaScript

data-bs-toggle="dropdown"ankoraŭ bezonata

Opcioj

Uzante funkcion kunpopperConfig

Metodoj

Eventoj

`data-bs-toggle="dropdown"`ankoraŭ bezonata

Uzante funkcion kun`popperConfig`