Rippmenüüd

Lülitage kontekstipõhiseid ülekatteid linkide loendite ja muu kuvamiseks Bootstrapi rippmenüü pistikprogrammiga.

Sellel lehel

Ülevaade

Rippmenüüd on vahetatavad, kontekstipõhised ülekatted linkide loendite kuvamiseks ja palju muud. Need on interaktiivsed kaasasoleva Bootstrapi rippmenüü JavaScripti pistikprogrammiga. Neid vahetatakse klõpsates, mitte hõljutades; see on tahtlik disainiotsus .

Rippmenüüd on üles ehitatud kolmanda osapoole teegile Popper , mis pakub dünaamilist positsioneerimist ja vaateava tuvastamist. Lisage kindlasti popper.min.js enne Bootstrapi JavaScripti või kasutage bootstrap.bundle.min.js/ bootstrap.bundle.jsmis sisaldab Popperit. Popperit ei kasutata navigeerimisribade rippmenüüde positsioneerimiseks, kuna dünaamiline positsioneerimine pole vajalik.

Juurdepääsetavus

WAI ARIA standard määratleb tegeliku vidina role="menu" , kuid see on spetsiifiline rakenduslike menüüde jaoks, mis käivitavad toiminguid või funktsioone. ARIA menüüd võivad sisaldada ainult menüüüksusi, märkeruutude menüüüksusi, raadionuppude menüüüksusi, raadionupurühmi ja alammenüüsid.

Bootstrapi rippmenüüd on seevastu loodud üldiseks ja rakendatavaks mitmesugustes olukordades ja märgistusstruktuurides. Näiteks on võimalik luua rippmenüüd, mis sisaldavad täiendavaid sisendeid ja vormi juhtelemente, nagu otsinguvälju või sisselogimisvorme. Sel põhjusel ei oota Bootstrap (ega lisa automaatselt) ühtegi tõelise ARIA menüü jaoks vajalikke atribuute roleja . Autorid peavad need täpsemad atribuudid ise lisama.aria-

Siiski lisab Bootstrap sisseehitatud toe enamiku standardsete klaviatuurimenüü interaktsioonide jaoks, nagu näiteks võimalus .dropdown-itemkursoriklahvide abil üksikute elementide vahel liikuda ja klahviga menüü sulgeda ESC.

Näited

Pakkige rippmenüü lüliti (oma nupp või link) ja rippmenüü sisse .dropdownvõi muusse elemendisse, mis deklareerib position: relative;. Rippmenüüd saab käivitada <a>või <button>elementidest, et need vastaksid paremini teie potentsiaalsetele vajadustele. Siin näidatud näidetes kasutatakse <ul>vajaduse korral semantilisi elemente, kuid kohandatud märgistust toetatakse.

Üksik nupp

Mis tahes singlit .btnsaab mõne märgistuse muudatusega muuta rippmenüü lülitiks. Siin on, kuidas saate neid mõlema <button>elemendiga tööle panna.

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>

Ja <a>elementidega:

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>

Parim osa on see, et saate seda teha ka mis tahes nupu variandiga:

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

Jagamisnupp

Sarnaselt looge jagatud nuppude rippmenüüd, millel on peaaegu sama märgistus kui ühe nupu rippmenüüd, kuid lisades .dropdown-toggle-splitrippmenüü tähise ümber õige vahekauguse.

Kasutame seda lisaklassi, et vähendada horisontaali paddingmõlemal küljel 25% ja eemaldada margin-lefttavaliste nuppude rippmenüüde jaoks lisatud. Need lisamuudatused hoiavad tähise jaotusnupu keskel ja pakuvad põhinupu kõrval sobivama suurusega löögiala.

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

Suuruse määramine

Nuppude rippmenüüd töötavad igas suuruses nuppudega, sealhulgas vaike- ja jagatud rippmenüü nuppudega.

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

Tumedad rippmenüüd

Lubage tumedamad rippmenüüd, et need sobiksid tumeda navigeerimisribaga või kohandatud stiiliga, lisades .dropdown-menu-darkneed olemasolevale .dropdown-menu. Rippmenüü üksustes pole vaja muudatusi teha.

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>

Ja selle kasutamine navigeerimisribal:

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>

Juhised

RTL

Kui kasutate RTL-is Bootstrapi, siis juhised peegelduvad, .dropstartmis kuvatakse paremal pool.

Tsentreeritud

Muutke rippmenüü keskelemendiks ülemelemendi lüliti all .dropdown-center.

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>

Kukkumine

Käivitage rippmenüüd elementide kohal, lisades .dropupneed emaelemendile.

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

Muutke rippmenüü keskelemendiks ülemelemendi lüliti kohal .dropup-center.

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>

Uppunud

Käivitage rippmenüüd elementide paremal, lisades .dropendneed emaelemendile.

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

Käivitage elementide vasakul rippmenüüd, lisades .dropstartneed emaelemendile.

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

<a>Elemente või saate kasutada <button>rippmenüü üksustena.

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>

Saate luua ka mitteinteraktiivseid rippmenüü üksusi, kasutades .dropdown-item-text. Stiilige julgelt kohandatud CSS-i või tekstiutiliitidega.

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>

Aktiivne

Lisage .activerippmenüü üksustele, et kujundada need aktiivseteks . Aktiivse oleku edastamiseks abitehnoloogiatele kasutage aria-currentatribuuti, kasutades pagepraeguse lehe või truekomplekti praeguse üksuse väärtust.

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>

Keelatud

Lisage .disabledrippmenüüs olevatele üksustele, et kujundada need keelatuks .

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>

Vaikimisi positsioneeritakse rippmenüü automaatselt 100% ülaosast ja vanema vasakust servast. Saate seda muuta suunaklasside abil .drop*, kuid saate neid juhtida ka täiendavate modifikaatoriklassidega.

Rippmenüü lisamine paremale joondamiseks .dropdown-menu-end. .dropdown-menuKui kasutate RTL-is Bootstrapi, siis juhised peegelduvad, .dropdown-menu-endmis kuvatakse vasakul küljel.

Pea püsti! Rippmenüüd on paigutatud tänu Popperile, välja arvatud juhul, kui need sisalduvad navigeerimisribal.

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>

Tundlik joondus

Kui soovite kasutada kohanduvat joondamist, keelake dünaamiline positsioneerimine, lisades data-bs-display="static"atribuudi ja kasutage kohanduvaid variatsiooniklasse.

Rippmenüü paremale joondamiseks antud või suurema katkestuspunktiga lisage .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>

Vasakpoolse rippmenüü joondamiseks antud või suurema katkestuspunktiga lisage .dropdown-menu-endja .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>

Pange tähele, et te ei pea data-bs-display="static"navigeerimisribade rippmenüü nuppudele atribuuti lisama, kuna Popperit navigeerimisribadel ei kasutata.

Joondamisvalikud

Võttes arvesse enamikke ülaltoodud valikuid, on siin väike köögivalamu demo erinevatest rippmenüü joondusvalikutest ühes kohas.

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>

Päised

Lisage päis mis tahes rippmenüü tegevuste jaotistele.

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>

Jagajad

Eraldage seotud menüüelementide rühmad jaguriga.

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>

Tekst

Asetage mis tahes vabas vormis tekst tekstiga rippmenüüsse ja kasutage tühikute utiliite . Pange tähele, et tõenäoliselt vajate menüü laiuse piiramiseks täiendavaid suuruse stiile.

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>

Vormid

Pange vorm rippmenüüsse või muutke see rippmenüüks ja kasutage veerise või polsterduse utiliite , et anda sellele vajalik negatiivne ruum.

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>

Kasutage rippmenüü asukoha muutmiseks data-bs-offsetvõi .data-bs-reference

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>

Automaatne sulgemiskäitumine

Vaikimisi suletakse rippmenüü, kui klõpsate rippmenüü sees või väljaspool seda. Saate autoCloseseda rippmenüü käitumist muuta.

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

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad rippmenüüd nüüd .dropdown-menutäiustatud reaalajas kohandamiseks kohalikke CSS-i muutujaid. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

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

CSS-i muutujate kaudu kohandamist saab näha .dropdown-menu-darkklassis, kus me alistame konkreetsed väärtused ilma dubleerivaid CSS-i valijaid lisamata.

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

Sassi muutujad

Muutujad kõigi rippmenüüde jaoks:

$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

Tumeda rippmenüü muutujad :

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

CSS-põhiste tähiste muutujad, mis näitavad rippmenüü interaktiivsust:

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

Segud

Mixiine kasutatakse CSS-põhiste tähiste genereerimiseks ja need leiate 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;
    }
  }
}

Kasutamine

Andmeatribuutide või JavaScripti kaudu lülitab rippmenüü pistikprogramm peidetud sisu (rippmenüüd) ümber, lülitades .showklassi ülemüksusel .dropdown-menu. Atribuuti data-bs-toggle="dropdown"kasutatakse rakenduse tasemel rippmenüüde sulgemisel, seega on hea mõte seda alati kasutada.

Puutetundlike seadmete puhul lisab rippmenüü avamine elemendi mouseovervahetutele alamatele tühjad töötlejad . <body>See ilmselt inetu häkkimine on vajalik iOS-i sündmuste delegeerimise veidruse ületamiseks, mis muidu takistaks rippmenüüst väljaspool asuvat puudutust käivitamast rippmenüü sulgevat koodi. Kui rippmenüü suletakse, mouseovereemaldatakse need täiendavad tühjad käitlejad.

Andmeatribuutide kaudu

Lisage data-bs-toggle="dropdown"lingile või nupule rippmenüü sisselülitamiseks.

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

JavaScripti kaudu

Kutsuge rippmenüüd JavaScripti kaudu:

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

`data-bs-toggle="dropdown"`ikka nõutud

Olenemata sellest, kas helistate rippmenüüsse JavaScripti kaudu või kasutate selle asemel andmeapi-d, data-bs-toggle="dropdown"peab rippmenüü päästikuelemendil alati olema.

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Nimi	Tüüp	Vaikimisi	Kirjeldus
`autoClose`	tõeväärtus, string	`true`	Seadistage rippmenüü automaatse sulgemise käitumine: `true`- rippmenüü suletakse, klõpsates rippmenüüst väljaspool või sees. `false`- rippmenüü suletakse, klõpsates lülitusnupul ja käsitsi helistades `hide`või `toggle`meetodil. (Samuti ei suleta klahvi `esc`vajutamisel) `'inside'`- rippmenüü suletakse (ainult), kui klõpsate rippmenüüs. `'outside'`- rippmenüü suletakse (ainult), kui klõpsate väljaspool rippmenüüd. Märkus: rippmenüü saab alati `ESC`võtmega sulgeda.
`boundary`	string, element	`'clippingParents'`	Rippmenüü ülevoolupiirangu piir (kehtib ainult Popperi preventOverflow modifikaatorile). Vaikimisi on see `clippingParents`ja võib aktsepteerida HTMLElementi viidet (ainult JavaScripti kaudu). Lisateavet leiate Popperi detectOverflow dokumentidest .
`display`	string	`'dynamic'`	Vaikimisi kasutame dünaamilise positsioneerimise jaoks Popperit. Keela see rakendusega `static`.
`offset`	massiiv, string, funktsioon	`[0, 2]`	Rippmenüü nihe sihtmärgi suhtes. Saate andmeatribuutides stringi edastada komadega eraldatud väärtustega, näiteks: `data-bs-offset="10,20"`. Kui funktsiooni kasutatakse nihke määramiseks, kutsutakse seda esile objektiga, mis sisaldab esimese argumendina popperi paigutust, viidet ja popper rects. Käivitav element DOM-sõlm edastatakse teise argumendina. Funktsioon peab tagastama kahe numbriga massiivi: libisemine , kaugus . Lisateabe saamiseks vaadake Popperi nihkedokumente .
`popperConfig`	null, objekt, funktsioon	`null`	Bootstrapi Popperi vaikekonfiguratsiooni muutmiseks vaadake jaotist Popperi konfiguratsioon . Kui Popperi konfiguratsiooni loomiseks kasutatakse funktsiooni, kutsutakse see välja objektiga, mis sisaldab Bootstrapi Popperi vaikekonfiguratsiooni. See aitab teil kasutada ja liita vaikeseadeid teie enda konfiguratsiooniga. Funktsioon peab Popperi jaoks tagastama konfiguratsiooniobjekti.
`reference`	string, element, objekt	`'toggle'`	Rippmenüü viiteelement. Aktsepteerib HTMLElementi viite või pakkuva objekti väärtused `'toggle'`, . Lisateabe saamiseks vaadake Popperi konstruktoridokumente ja virtuaalse elemendi dokumente .`'parent'getBoundingClientRect`

Funktsiooni kasutamine koos`popperConfig`

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

meetodid

meetod	Kirjeldus
`dispose`	Hävitab elemendi rippmenüü. (Eemaldab DOM-elemendile salvestatud andmed)
`getInstance`	Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud rippmenüü eksemplari, saate seda kasutada järgmiselt: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Staatiline meetod, mis tagastab DOM-i elemendiga seotud rippmenüü eksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Peidab antud navigeerimisriba või vahekaartidega navigeerimise rippmenüü.
`show`	Näitab antud navigeerimisriba või vahekaartidega navigeerimise rippmenüüd.
`toggle`	Lülitab antud navigeerimisriba või vahelehtedega navigeerimise rippmenüü sisse- ja väljalülitamiseks.
`update`	Värskendab elemendi rippmenüü asukohta.

Sündmused

Kõik rippmenüü sündmused käivitatakse ümberlülituselemendil ja seejärel mullitatakse üles. Nii saate lisada ka sündmusekuulajaid emaelemendile .dropdown-menu. hide.bs.dropdownja hidden.bs.dropdownsündmustel on clickEventatribuut (ainult siis, kui algne sündmuse tüüp on click), mis sisaldab klõpsusündmuse sündmuseobjekti.

Sündmuse tüüp	Kirjeldus
`hide.bs.dropdown`	Käivitub kohe, kui `hide`eksemplari meetod on välja kutsutud.
`hidden.bs.dropdown`	Käivitatakse, kui rippmenüü on kasutaja eest varjatud ja CSS-i üleminekud on lõppenud.
`show.bs.dropdown`	Käivitub kohe, kui `show`eksemplari meetod kutsutakse.
`shown.bs.dropdown`	Käivitatakse, kui rippmenüü on kasutajale nähtavaks tehtud ja CSS-i üleminekud on lõppenud.

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

Rippmenüüd

Ülevaade

Juurdepääsetavus

Näited

Üksik nupp

Jagamisnupp

Suuruse määramine

Tumedad rippmenüüd

Juhised

RTL

Tsentreeritud

Kukkumine

Dropup keskel

Uppunud

Dropstart

Menüüelemendid

Aktiivne

Keelatud

Menüü joondamine

Tundlik joondus

Joondamisvalikud

Menüü sisu

Päised

Jagajad

Tekst

Vormid

Automaatne sulgemiskäitumine

CSS

Muutujad

Sassi muutujad

Segud

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

`data-bs-toggle="dropdown"`ikka nõutud

Valikud

Funktsiooni kasutamine koos`popperConfig`

meetodid

Sündmused

Rippmenüüd

Ülevaade

Juurdepääsetavus

Näited

Üksik nupp

Jagamisnupp

Suuruse määramine

Tumedad rippmenüüd

Juhised

RTL

Tsentreeritud

Kukkumine

Dropup keskel

Uppunud

Dropstart

Menüüelemendid

Aktiivne

Keelatud

Menüü joondamine

Tundlik joondus

Joondamisvalikud

Menüü sisu

Päised

Rippmenüü päis

Jagajad

Tekst

Vormid

Rippmenüü valikud

Automaatne sulgemiskäitumine

CSS

Muutujad

Sassi muutujad

Segud

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

data-bs-toggle="dropdown"ikka nõutud

Valikud

Funktsiooni kasutamine koospopperConfig

meetodid

Sündmused

`data-bs-toggle="dropdown"`ikka nõutud

Funktsiooni kasutamine koos`popperConfig`