Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

Pudotusvalikosta

Vaihda kontekstuaaliset peittokuvat linkkiluetteloiden ja muiden näyttämiseksi Bootstrap-pudotusvalikon avulla.

Tällä sivulla

Yleiskatsaus

Avattavat valikot ovat vaihdettavissa, kontekstuaaliset peittokuvat linkkiluetteloiden näyttämiseen ja paljon muuta. Ne on tehty interaktiivisiksi mukana tulevalla Bootstrap-pudotusvalikon JavaScript-laajennuksella. Ne vaihdetaan napsauttamalla, ei viemällä hiiri; tämä on tahallinen suunnittelupäätös .

Avattavat valikot perustuvat kolmannen osapuolen Popper -kirjastoon, joka tarjoaa dynaamisen paikantamisen ja näkymän havaitsemisen. Muista lisätä popper.min.js ennen Bootstrapin JavaScriptiä tai käyttää bootstrap.bundle.min.js/ bootstrap.bundle.jsjoka sisältää Popperin. Popperia ei kuitenkaan käytetä navigointipalkkien pudotusvalikoiden sijoittamiseen, koska dynaamista paikannusta ei tarvita.

Esteettömyys

WAI ARIA -standardi määrittelee varsinaisen role="menu"widgetin , mutta tämä koskee vain sovellusmaisia ​​valikoita, jotka käynnistävät toimintoja tai toimintoja. ARIA -valikot voivat sisältää vain valikkokohtia, valintaruutuvalikkokohteita, valintanappivalikkokohtia, valintanappiryhmiä ja alivalikoita.

Bootstrapin pudotusvalikot on toisaalta suunniteltu yleisiksi ja soveltuvaksi erilaisiin tilanteisiin ja merkintärakenteisiin. On esimerkiksi mahdollista luoda avattavia valikoita, jotka sisältävät lisäsyötteitä ja lomakeohjausobjekteja, kuten hakukenttiä tai kirjautumislomakkeita. Tästä syystä Bootstrap ei odota (ei lisää automaattisesti) mitään todellisten ARIA - valikoiden edellyttämistä roleja -määritteistä. Kirjoittajien on sisällytettävä nämä tarkemmat attribuutit itse.aria-

Bootstrap kuitenkin lisää sisäänrakennetun tuen useimmille tavallisille näppäimistövalikon vuorovaikutuksille, kuten mahdollisuuden liikkua yksittäisten .dropdown-itemelementtien välillä kohdistinnäppäimillä ja sulkea valikko ESCnäppäimellä.

Esimerkkejä

Kääri avattavan valikon kytkin (painike tai linkki) ja avattava valikko sisään .dropdowntai muuhun elementtiin, joka ilmoittaa position: relative;. Pudotusvalikot voidaan laukaista <a>tai <button>elementeistä, jotka sopivat paremmin mahdollisiin tarpeisiisi. Tässä esitetyt esimerkit käyttävät semanttisia <ul>elementtejä tarvittaessa, mutta mukautettua merkintää tuetaan.

Yksi painike

Mikä tahansa single .btnvoidaan muuttaa pudotusvalikon vaihtokytkimeksi muutamilla merkintämuutoksilla. Näin voit laittaa ne toimimaan jommankumman <button>elementin kanssa:

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

Ja <a>elementeillä:

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

Parasta on, että voit tehdä tämän myös millä tahansa painikeversiolla:

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

Split-painike

Samoin voit luoda jaetun painikkeen avattavia valikoita, joissa on käytännössä samat merkinnät kuin yhden painikkeen avattavat valikot, mutta lisäämällä .dropdown-toggle-splitoikean välin pudotusvalikon ympärille.

Käytämme tätä ylimääräistä luokkaa pienentämään vaakasuoraa paddingkennon kummallakin puolella 25 % ja poistamaan margin-lefttavallisiin painikkeiden pudotusvalikoihin lisätyn. Nämä lisämuutokset pitävät pisteen keskitettynä jakopainikkeessa ja tarjoavat sopivamman kokoisen osumaalueen pääpainikkeen viereen.

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

Mitoitus

Painikkeiden avattavat valikot toimivat kaikenkokoisten painikkeiden kanssa, mukaan lukien oletusarvoiset ja jaetut avattavat painikkeet.

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

Tummat pudotusvalikot

Ota käyttöön tummemmat avattavat valikot, jotka vastaavat tummaa navigointipalkkia tai mukautettua tyyliä lisäämällä .dropdown-menu-darkne olemassa olevaan .dropdown-menu. Pudotusvalikon kohteisiin ei vaadita muutoksia.

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

Ja sen käyttäminen navigointipalkissa:

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

Ohjeet

RTL

Ohjeet peilataan käytettäessä Bootstrapia RTL:ssä, mikä tarkoittaa, että .dropstartse näkyy oikealla puolella.

Pudotus

Aktivoi avattavat valikot elementtien yläpuolella lisäämällä .dropupne yläelementtiin.

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

Laukaise avattavat valikot elementtien oikealla puolella lisäämällä .dropendne pääelementtiin.

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

Laukaise avattavat valikot elementtien vasemmalla puolella lisäämällä .dropstartne pääelementtiin.

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

Voit käyttää - <a>tai <button>-elementtejä avattavan valikon kohteina.

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

Voit myös luoda ei-interaktiivisia avattavia kohteita .dropdown-item-text. Voit vapaasti muokata tyyliä lisää mukautettujen CSS- tai tekstiapuohjelmien avulla.

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

Aktiivinen

Lisää .activekohteita avattavassa valikossa muokataksesi niitä aktiivisiksi . Jos haluat välittää aktiivisen tilan avustaville tekniikoille, käytä aria-currentattribuuttia käyttämällä pagenykyisen sivun tai truejoukon nykyisen kohteen arvoa.

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

Liikuntarajoitteinen

Lisää .disabledkohteita avattavassa valikossa muokataksesi ne käytöstä poistetuiksi .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Voit muuttaa tätä suuntaluokilla .drop*, mutta voit myös hallita niitä muilla muokkausluokilla.

Lisää .dropdown-menu-enda .dropdown-menu-kohtaan oikealle tasaa avattava valikko. Ohjeet peilataan käytettäessä Bootstrapia RTL:ssä, mikä tarkoittaa, että .dropdown-menu-endse näkyy vasemmalla puolella.

Varoitus! Pudotusvalikot sijoitetaan Popperin ansiosta paitsi silloin, kun ne sisältyvät navigointipalkkiin. 
<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>

Responsiivinen kohdistus

Jos haluat käyttää reagoivaa tasausta, poista dynaaminen paikannus käytöstä lisäämällä data-bs-display="static"attribuutti ja käytä responsiivisia muunnelmaluokkia.

Tasaa avattava valikko oikealle annettuun tai suurempaan keskeytyskohtaan lisäämällä .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>

Tasaa vasemmalle avattava valikko tietyn tai suuremman keskeytyskohdan kanssa lisäämällä .dropdown-menu-endja .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>

Huomaa, että sinun ei tarvitse lisätä data-bs-display="static"attribuuttia navigointipalkkien pudotusvalikon painikkeisiin, koska Popperia ei käytetä navigointipalkissa.

Tasausvaihtoehdot

Suurin osa yllä olevista vaihtoehdoista otetaan huomioon, ja tässä on pieni tiskialtaan demo eri pudotusvalikon kohdistusvaihtoehdoista yhdessä paikassa.

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

Valikon sisältö

Otsikot

Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.

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

Jakajat

Erottele toisiinsa liittyvien valikkokohtien ryhmät jakajalla.

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

Teksti

Sijoita vapaamuotoinen teksti tekstiä sisältävään pudotusvalikkoon ja käytä välilyöntejä . Huomaa, että tarvitset todennäköisesti lisää kokotyylejä valikon leveyden rajoittamiseksi.

Jotain esimerkkitekstiä, joka kulkee vapaasti avattavassa valikossa.

Ja tämä on enemmän esimerkkitekstiä.

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

Lomakkeet

Lisää lomake avattavaan valikkoon tai tee siitä avattava valikko ja käytä marginaali- tai täyteapuohjelmia antaaksesi sille tarvitsemasi negatiivinen tila.

Uusi täällä? Kirjaudu Unohtuiko salasana? 
<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>

Käytä data-bs-offsettai data-bs-referencevaihtaaksesi pudotusvalikon sijaintia.

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

Automaattinen sulkemiskäyttäytyminen

Oletuksena avattava valikko sulkeutuu, kun napsautat avattavan valikon sisällä tai ulkopuolella. Voit käyttää tätä autoClosevaihtoehtoa muuttaaksesi tätä pudotusvalikon toimintaa.

<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

Muuttujat

Kaikkien pudotusvalikoiden muuttujat:

$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($gray-900, 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;

Pimeän pudotusvalikon muuttujat :

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

Muuttujat CSS-pohjaisille careteille, jotka osoittavat avattavan valikon vuorovaikutteisuuden:

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

Seokset

Mixiinejä käytetään CSS-pohjaisten carettien luomiseen, ja ne löytyvät 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;
    }
  }
}

Käyttö

Tietomääritteiden tai JavaScriptin avulla avattava laajennus vaihtaa piilotettua sisältöä (pudotusvalikot) vaihtamalla .showluokkaa ylätason kohdalla .dropdown-menu. Attribuuttia data-bs-toggle="dropdown"käytetään sovellustason pudotusvalikoiden sulkemiseen, joten on hyvä idea käyttää sitä aina.

Kosketuskäyttöisissä laitteissa pudotusvalikon avaaminen lisää tyhjät mouseoverkäsittelijät <body>elementin välittömiin lapsiin. Tämä kieltämättä ruma hakkerointi on välttämätön iOS-tapahtuman delegoinnin omituisuuden kiertämiseksi , mikä muuten estäisi napautusta missään avattavan valikon ulkopuolella käynnistämästä koodia, joka sulkee avattavan valikon. Kun pudotusvalikko on suljettu, nämä ylimääräiset tyhjät mouseoverkäsittelijät poistetaan.

Tietomääritteiden kautta

Lisää data-bs-toggle="dropdown"linkkiin tai painikkeeseen avataksesi avattavan valikon.

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

JavaScriptin kautta

Kutsu avattavat valikot JavaScriptin kautta:

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

Riippumatta siitä, kutsutko avattavaa valikkoa JavaScriptin kautta vai käytätkö sen sijaan data-api:tä, data-bs-toggle="dropdown"sen on aina oltava läsnä avattavan valikon triggerelementissä.

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-offset="". Muista vaihtaa vaihtoehdon nimen tapaustyyppi camelCase-muotoon kebab-case, kun välität valinnat tietomääritteiden kautta. Käytä esimerkiksi sen sijaan, että data-bs-autoClose="false"käytät data-bs-auto-close="false".

Nimi Tyyppi Oletus Kuvaus
boundary merkkijono | elementti 'clippingParents' Avattavan valikon ylivuotorajoitusraja (koskee vain Popperin preventOverflow-muuttajaa). Oletuksena se hyväksyy 'clippingParents'ja voi hyväksyä HTMLElement-viittauksen (vain JavaScriptin kautta). Lisätietoja on Popperin detectOverflow -dokumenteissa .
reference merkkijono | elementti | esine 'toggle' Pudotusvalikon viiteelementti. Hyväksyy arvot 'toggle', 'parent', HTMLElement-viittauksen tai kohteen tarjoavan kohteen arvot getBoundingClientRect. Lisätietoja on Popperin konstruktoridokumenteissa ja virtuaalielementtien dokumenteissa .
display merkkijono 'dynamic' Oletusarvoisesti käytämme Popperia dynaamiseen paikannukseen. Poista tämä käytöstä käyttämällä static.
offset joukko | merkkijono | toiminto [0, 2]

Pudotusvalikon poikkeama suhteessa tavoitteeseen. Voit välittää tietomääritteissä merkkijonon pilkuilla erotetuilla arvoilla, kuten:data-bs-offset="10,20"

Kun funktiota käytetään määrittämään siirtymä, sitä kutsutaan objektilla, joka sisältää ensimmäisenä argumenttina popperin sijoittelun, viitteen ja popper rects. Liipaisuelementin DOM-solmu välitetään toisena argumenttina. Funktion on palautettava taulukko, jossa on kaksi numeroa: .[skidding, distance]

Lisätietoja on Popperin offset-dokumenteissa .
autoClose boolen | merkkijono true

Määritä pudotusvalikon automaattinen sulkemistoiminto:

  • true- pudotusvalikko suljetaan napsauttamalla avattavan valikon ulkopuolella tai sisällä.
  • false- pudotusvalikko suljetaan napsauttamalla vaihtopainiketta ja manuaalisesti kutsumalla hidetai togglemenetelmällä. (Ei myöskään sulkeudu näppäintä painamalla esc)
  • 'inside'- pudotusvalikko suljetaan (vain) napsauttamalla avattavan valikon sisällä.
  • 'outside'- pudotusvalikko suljetaan (vain) napsauttamalla avattavan valikon ulkopuolella.
popperConfig nolla | esine | toiminto null

Jos haluat muuttaa Bootstrapin Popperin oletusasetuksia, katso Popperin asetukset .

Kun funktiota käytetään Popper-kokoonpanon luomiseen, sitä kutsutaan objektilla, joka sisältää Bootstrapin oletusarvoisen Popper-kokoonpanon. Se auttaa sinua käyttämään ja yhdistämään oletusasetuksia omaan kokoonpanoosi. Toiminnon on palautettava Popperin määritysobjekti.

Käytä toimintoa kanssapopperConfig

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

menetelmät

Menetelmä Kuvaus
toggle Vaihtaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon.
show Näyttää tietyn navigointipalkin tai välilehtinavigoinnin avattavan valikon.
hide Piilottaa tietyn navigointipalkin tai välilehdellä varustetun navigoinnin avattavan valikon.
update Päivittää elementin avattavan valikon sijainnin.
dispose Tuhoaa elementin pudotusvalikon. (Poistaa DOM-elementtiin tallennetut tiedot)
getInstance Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän pudotusvalikosta esiintymän, voit käyttää sitä seuraavasti:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Staattinen menetelmä, joka palauttaa DOM-elementtiin liittyvän pudotusvalikosta tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin:bootstrap.Dropdown.getOrCreateInstance(element)

Tapahtumat

Kaikki pudotusvalikon tapahtumat laukaistaan ​​vaihtoelementissä ja kuplitetaan sitten ylös. Voit siis lisätä tapahtumaseuraajia myös .dropdown-menuylätason elementtiin. hide.bs.dropdownja hidden.bs.dropdowntapahtumilla on clickEventominaisuus (vain kun alkuperäinen tapahtumatyyppi on click), joka sisältää napsautustapahtuman Tapahtumaobjektin.

Menetelmä Kuvaus
show.bs.dropdown Syttyy välittömästi, kun show-instanssimenetelmää kutsutaan.
shown.bs.dropdown Käynnistetään, kun pudotusvalikko on näkyvissä käyttäjälle ja CSS-siirrot on suoritettu.
hide.bs.dropdown Käynnistyy välittömästi, kun piiloinstanssimenetelmää on kutsuttu.
hidden.bs.dropdown Käynnistetään, kun avattava valikko on piilotettu käyttäjältä ja CSS-siirtymät on suoritettu. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})