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 klavarmenuaj interagoj, kiel ekzemple la kapablo movi 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:

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>

Kaj kun <a>elementoj:

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>

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

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>

Kaj uzante ĝin en navigadbreto:

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>

Direktoj

RTL

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

Centrita

Faru la falmenuon centrita sub la baskulo kun .dropdown-centersur la gepatra elemento.

html

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

Dropup

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>

Dropup centrita

Faru la falmenuon centrita super la baskulo kun .dropup-centersur la gepatra elemento.

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

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

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

Dropstart

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

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

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>

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

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>

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 nuna ero en aro.

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>

Malebligita

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

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>

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.

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>

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.

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>

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

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.

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>

Kapoj

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

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>

Dividiloj

Apartigu grupojn de rilataj menueroj per disigilo.

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>

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.

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>

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.

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>

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

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>

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.

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro al evoluantaj CSS-variabloj de Bootstrap, falmenuoj nun uzas lokajn CSS .dropdown-menu-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

Personigo per CSS-variabloj videblas sur la .dropdown-menu-darkklaso, kie ni superregas specifajn valorojn sen aldoni duplikatajn CSS-elektilojn.

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

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

Per JavaScript

Voku la menuojn per JavaScript:

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

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

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

Opcioj

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Nomo	Tajpu	Defaŭlte	Priskribo
`autoClose`	boolean, ŝ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. Noto: la falmenuo ĉiam povas esti fermita per la `ESC`ŝlosilo.
`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 .
`display`	ŝnuro	`'dynamic'`	Defaŭlte, ni uzas Popper por dinamika poziciigado. Malebligu ĉi tion per `static`.
`offset`	tabelo, ĉeno, funkcio	`[0, 2]`	Ofseto de la falmenuo relative al ĝia celo. Vi povas pasigi ĉenon en datumaj atributoj kun komo 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 .
`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.
`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 .

Uzante funkcion kun`popperConfig`

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

Metodoj

Metodo	Priskribo
`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 jene: `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)`.
`hide`	Kaŝas la falmenuon de difinita navbreto aŭ klapeta navigado.
`show`	Montras la falmenuon de difinita navigado aŭ klapeta navigado.
`toggle`	Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado.
`update`	Ĝisdatigas la pozicion de la menuo de elemento.

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.

Eventa tipo	Priskribo
`hide.bs.dropdown`	Pafas tuj kiam la `hide`instanca metodo estas vokita.
`hidden.bs.dropdown`	Pafita kiam la falmenuo finiĝis kaŝita de la uzanto kaj CSS-transiroj finiĝis.
`show.bs.dropdown`	Pafas tuj kiam la `show`ekzempla metodo estas vokita.
`shown.bs.dropdown`	Pafita kiam la falmenuo fariĝis videbla por la uzanto kaj CSS-transiroj finiĝis.

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

Dropdowns

Superrigardo

Alirebleco

Ekzemploj

Ununura butono

Dividi butonon

Dimensio

Malhelaj falmenuoj

Direktoj

RTL

Centrita

Dropup

Dropup centrita

Dropend

Dropstart

Menueroj

Aktiva

Malebligita

Menua vicigo

Respondema vicigo

Opcioj de vicigo

Enhavo de la menuo

Kapoj

Dividiloj

Teksto

Formoj

Aŭtomate fermita konduto

CSS

Variabloj

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

Centrita

Dropup

Dropup centrita

Dropend

Dropstart

Menueroj

Aktiva

Malebligita

Menua vicigo

Respondema vicigo

Opcioj de vicigo

Enhavo de la menuo

Kapoj

menuokapo

Dividiloj

Teksto

Formoj

Dropdown opcioj

Aŭtomate fermita konduto

CSS

Variabloj

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`