Išskleidžiamieji meniu

Perjunkite kontekstines perdangas, kad būtų rodomi nuorodų sąrašai ir daugiau, naudodami Bootstrap išskleidžiamąjį papildinį.

Šiame puslapyje

Apžvalga

Išskleidžiamuosius meniu galima perjungti, kontekstinės perdangos, skirtos nuorodų sąrašams rodyti ir kt. Jie yra interaktyvūs naudojant įtrauktą „Bootstrap“ išskleidžiamąjį „JavaScript“ papildinį. Jie perjungiami spustelėjus, o ne užvedus pelės žymeklį; tai tyčinis dizaino sprendimas .

Išskleidžiamieji meniu sukurti remiantis trečiosios šalies biblioteka Popper , kuri suteikia dinamišką padėties nustatymą ir peržiūros srities aptikimą. Prieš Bootstrap JavaScript būtinai įtraukite popper.min.js arba naudokite bootstrap.bundle.min.js/ bootstrap.bundle.jskuriame yra Popper. „Popper“ nėra naudojamas išskleidžiamiesiems meniu naršymo juostose nustatyti, tačiau dinaminis padėties nustatymas nereikalingas.

Prieinamumas

WAI ARIA standartas apibrėžia tikrąjį valdiklį role="menu" , tačiau tai būdinga į programą panašiems meniu, kurie suaktyvina veiksmus arba funkcijas. ARIA meniu gali būti tik meniu elementai, žymės langelio meniu elementai, akutinio mygtuko meniu elementai, radijo mygtukų grupės ir antriniai meniu.

Kita vertus, „Bootstrap“ išskleidžiamieji meniu yra sukurti taip, kad būtų bendri ir pritaikyti įvairioms situacijoms bei žymėjimo struktūroms. Pavyzdžiui, galima sukurti išskleidžiamuosius meniu, kuriuose yra papildomų įvesties ir formų valdiklių, tokių kaip paieškos laukai arba prisijungimo formos. Dėl šios priežasties Bootstrap nesitiki (ir automatiškai neprideda) jokių roleir aria-atributų, reikalingų tikriems ARIA meniu. Autoriai turės patys įtraukti šiuos konkretesnius atributus.

Tačiau „Bootstrap“ prideda įmontuotą daugelio standartinių klaviatūros meniu sąveikų palaikymą, pvz., galimybę naršyti per atskirus .dropdown-itemelementus naudojant žymeklio klavišus ir uždaryti meniu ESCmygtuku.

Pavyzdžiai

Apvyniokite išskleidžiamojo meniu jungiklį (savo mygtuką arba nuorodą) ir išskleidžiamąjį meniu .dropdownarba kitą elementą, kuris deklaruoja position: relative;. Išskleidžiamuosius meniu galima suaktyvinti iš <a>arba <button>elementų, kurie geriau atitiktų jūsų galimus poreikius. Čia pateikiamuose pavyzdžiuose naudojami semantiniai <ul>elementai, kur tinka, tačiau palaikomas pasirinktinis žymėjimas.

Vienas mygtukas

Bet kuris singlas .btngali būti paverstas išskleidžiamuoju jungikliu su tam tikrais žymėjimo pakeitimais. Štai kaip galite juos pritaikyti darbui su bet <button>kuriais elementais:

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>

Ir su <a>elementais:

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>

Geriausia tai, kad tai galite padaryti naudodami bet kurį mygtuko variantą:

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

Panašiai sukurkite padalintų mygtukų išskleidžiamuosius meniu su beveik tokiais pačiais žymėjimais kaip ir vieno mygtuko išskleidžiamieji meniu, tačiau .dropdown-toggle-splitpridėkite tinkamą tarpą aplink išskleidžiamąjį meniu.

Naudojame šią papildomą klasę, kad sumažintume horizontalią padėtį paddingabiejose dėklo pusėse 25 % ir pašalintume tai margin-left, kas pridedama prie įprastų mygtukų išskleidžiamųjų meniu. Dėl šių papildomų pakeitimų taškas yra padalijimo mygtuko centre ir šalia pagrindinio mygtuko pateikiama tinkamesnio dydžio smūgio sritis.

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

Dydžio nustatymas

Mygtukų išskleidžiamieji meniu veikia su visų dydžių mygtukais, įskaitant numatytuosius ir padalintus išskleidžiamuosius mygtukus.

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

Tamsūs išskleidžiamieji meniu

Pasirinkite tamsesnius išskleidžiamuosius meniu, kad jie atitiktų tamsią naršymo juostą arba tinkintą stilių, pridėdami .dropdown-menu-darkprie esamo .dropdown-menu. Nereikia keisti išskleidžiamojo sąrašo elementų.

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>

Ir jo naudojimas naršymo juostoje:

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>

Kryptys

RTL

Kryptys atspindimos naudojant Bootstrap RTL, o reikšmė .dropstartbus rodoma dešinėje pusėje.

Centruota

Padarykite išskleidžiamąjį meniu centre po perjungimo mygtuku .dropdown-centerant pagrindinio 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>

Nukritimas

Suaktyvinkite išskleidžiamuosius meniu virš elementų pridėdami .dropupprie pagrindinio 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>

Nuleidžiamas centras

Padarykite išskleidžiamąjį meniu centre virš jungiklio su .dropup-centerpirminiame elemente.

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>

Nukritęs

Suaktyvinkite išskleidžiamuosius meniu elementų dešinėje pridėdami .dropendprie pagrindinio 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

Suaktyvinkite išskleidžiamuosius meniu elementų kairėje, pridėdami .dropstartprie pagrindinio 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>

<a>Elementus arba galite naudoti <button>kaip išskleidžiamuosius elementus.

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>

Taip pat galite sukurti neinteraktyvius išskleidžiamuosius elementus naudodami .dropdown-item-text. Nedvejodami kurkite stilių naudodami pasirinktines CSS arba teksto priemones.

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>

Aktyvus

Pridėkite .activeprie elementų išskleidžiamajame meniu, kad jie būtų aktyvūs . Norėdami perteikti aktyvią būseną pagalbinėms technologijoms, naudokite aria-currentatributą – naudodami pagedabartinio puslapio arba truedabartinio rinkinio elemento vertę.

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>

Išjungta

Pridėkite .disabledprie elementų išskleidžiamajame meniu, kad jie būtų išjungti .

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>

Pagal numatytuosius nustatymus išskleidžiamasis meniu automatiškai pateikiamas 100 % iš viršaus ir išilgai kairiosios pirminio puslapio pusės. Tai galite pakeisti naudodami krypties .drop*klases, bet taip pat galite jas valdyti naudodami papildomas modifikavimo klases.

Pridėti .dropdown-menu-endprie a .dropdown-menuį dešinę lygiuoti išskleidžiamąjį meniu. Nuorodos atspindimos naudojant Bootstrap RTL, o reikšmė .dropdown-menu-endbus rodoma kairėje pusėje.

Galvas aukštyn! Išskleidžiamieji meniu yra išdėstyti „Popper“ dėka, išskyrus atvejus, kai jie yra naršymo juostoje.

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>

Atsakingas derinimas

Jei norite naudoti interaktyvų lygiavimą, išjunkite dinaminį padėties nustatymą pridėdami data-bs-display="static"atributą ir naudokite interaktyvių variantų klases.

Norėdami sulygiuoti išskleidžiamąjį meniu pagal nurodytą ar didesnį lūžio tašką, pridėkite.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>

Norėdami sulygiuoti kairįjį išskleidžiamąjį meniu su nurodytu ar didesniu lūžio tašku, pridėkite .dropdown-menu-endir .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>

Atminkite, kad jums nereikia pridėti data-bs-display="static"atributo prie naršymo juostų išskleidžiamųjų mygtukų, nes „Popper“ naršymo juostose nenaudojamas.

Lygiavimo parinktys

Atsižvelgdami į daugumą aukščiau pateiktų parinkčių, pateikiame mažą virtuvės kriauklės demonstraciją, kurioje pateikiamos įvairios išskleidžiamojo išlygiavimo parinktys vienoje vietoje.

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>

Antraštės

Pridėkite antraštę prie veiksmų sekcijų žymėjimo bet kuriame išskleidžiamajame meniu.

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>

Skirstytuvai

Atskirkite susijusių meniu elementų grupes skirstytuvu.

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>

Tekstas

Įdėkite bet kokį laisvos formos tekstą į išskleidžiamąjį meniu su tekstu ir naudokite tarpų priemones . Atminkite, kad norint apriboti meniu plotį, greičiausiai reikės papildomų dydžio stilių.

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>

Formos

Įdėkite formą į išskleidžiamąjį meniu arba paverskite ją išskleidžiamuoju meniu ir naudokite paraštės arba užpildymo priemones , kad suteiktumėte jai reikalingą neigiamą erdvę.

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>

Naudokite data-bs-offsetarba data-bs-referencenorėdami pakeisti išskleidžiamojo meniu vietą.

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>

Automatinio uždarymo elgesys

Pagal numatytuosius nustatymus išskleidžiamasis meniu uždaromas spustelėjus išskleidžiamajame meniu arba už jo ribų. Galite naudoti autoClosešią išskleidžiamojo meniu parinktį pakeisti.

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

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besikeičiančio CSS kintamųjų metodo dalis, išskleidžiamajame meniu dabar naudojami vietiniai CSS kintamieji, .dropdown-menukad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

Tinkinimas naudojant CSS kintamuosius gali būti matomas .dropdown-menu-darkklasėje, kurioje nepaisome konkrečių reikšmių nepridėdami pasikartojančių CSS parinktuvų.

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

Visų išskleidžiamųjų meniu kintamieji:

$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

Tamsaus išskleidžiamojo meniu kintamieji :

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

Kintamieji, skirti CSS pagrįstiems ženklams, kurie rodo išskleidžiamojo meniu interaktyvumą:

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

Mišiniai

Mišiniai naudojami CSS pagrindu sukurtiems ženklams generuoti ir juos galima rasti 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;
    }
  }
}

Naudojimas

Naudodamas duomenų atributus arba „JavaScript“, išskleidžiamasis papildinys perjungia paslėptą turinį (išskleidžiamuosius meniu), perjungdamas .showklasę pirminėje .dropdown-menu. Atributas naudojamas data-bs-toggle="dropdown"uždarant išskleidžiamuosius meniu programos lygiu, todėl verta jį naudoti visada.

Jutikliniuose įrenginiuose atidarius išskleidžiamąjį meniu mouseoverprie tiesioginių <body>elemento antrinių elementų pridedamos tuščios tvarkyklės. Šis, žinoma, bjaurus įsilaužimas yra būtinas norint išspręsti „iOS“ įvykių delegavimo keistenybę , kuri kitu atveju neleistų palietus bet kurioje išskleidžiamojo meniu ribų suaktyvinti kodą, kuris uždaro išskleidžiamąjį meniu. Kai išskleidžiamasis meniu uždaromas, šie papildomi ištuštėja mouseover tvarkyklės pašalinamos.

Per duomenų atributus

Pridėkite data-bs-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.

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

Per JavaScript

Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:

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

`data-bs-toggle="dropdown"`vis dar reikalingas

Nepriklausomai nuo to, ar iškviečiate išskleidžiamąjį meniu naudodami „JavaScript“, ar vietoj to naudojate duomenų API, data-bs-toggle="dropdown"visada turi būti išskleidžiamojo meniu aktyviklio elemente.

Galimybės

Kadangi parinktis galima perduoti naudojant duomenų atributus arba „JavaScript“, galite pridėti parinkties pavadinimą prie data-bs-, kaip ir data-bs-animation="{value}". Perduodant parinktis per duomenų atributus , būtinai pakeiskite parinkties pavadinimo didžiosios raidės tipą iš „ camelCase “ į „ kebab-case “. Pavyzdžiui, naudokite data-bs-custom-class="beautifier"vietojdata-bs-customClass="beautifier" .

Nuo 5.2.0 versijos „Bootstrap“ visi komponentai palaiko eksperimentinį rezervuotų duomenų atributą data-bs-config, kuriame galima laikyti paprastą komponento konfigūraciją kaip JSON eilutę. Kai elementas turi data-bs-config='{"delay":0, "title":123}'ir data-bs-title="456"atributus, galutinė titlereikšmė bus 456ir atskiri duomenų atributai nepaisys reikšmių, pateiktų data-bs-config. Be to, esamuose duomenų atributuose gali būti JSON reikšmės, pvz ., data-bs-delay='{"show":0,"hide":150}'.

vardas	Tipas	Numatytas	apibūdinimas
`autoClose`	loginis, eilutė	`true`	Konfigūruokite automatinio uždarymo funkciją išskleidžiamajame meniu: `true`- išskleidžiamasis meniu bus uždarytas spustelėjus išskleidžiamojo meniu išorę arba viduje. `false`- išskleidžiamasis meniu bus uždarytas spustelėjus perjungimo mygtuką ir rankiniu būdu iškvietus `hide`ar `toggle`metodą. (Taip pat nebus uždarytas paspaudus `esc`klavišą) `'inside'`- išskleidžiamasis meniu bus uždarytas (tik) spustelėjus išskleidžiamajame meniu. `'outside'`- išskleidžiamasis meniu bus uždarytas (tik) spustelėjus už išskleidžiamojo meniu. Pastaba: išskleidžiamąjį meniu visada galima uždaryti `ESC`raktu.
`boundary`	eilutė, elementas	`'clippingParents'`	Išskleidžiamojo meniu perpildymo apribojimo riba (taikoma tik Popper's preventOverflow modifikatoriui). Pagal numatytuosius nustatymus jis `clippingParents`priima ir gali priimti HTMLElement nuorodą (tik naudojant JavaScript). Daugiau informacijos rasite Popper's detectOverflow dokumentuose .
`display`	styga	`'dynamic'`	Pagal numatytuosius nustatymus dinaminei padėties nustatymui naudojame Popper. Išjunkite tai naudodami `static`.
`offset`	masyvas, eilutė, funkcija	`[0, 2]`	Išskleidžiamojo meniu poslinkis, palyginti su jo tikslu. Duomenų atributuose galite perduoti eilutę su kableliais atskirtomis reikšmėmis, pvz.: `data-bs-offset="10,20"`. Kai funkcija naudojama poslinkiui nustatyti, ji iškviečiama su objektu, kuriame yra popper vieta, nuoroda ir popper rects kaip pirmasis argumentas. Suaktyvinantis elementas DOM mazgas perduodamas kaip antrasis argumentas. Funkcija turi grąžinti masyvą su dviem skaičiais: slydimas , atstumas . Norėdami gauti daugiau informacijos, žr. Popper's poslinkio dokumentus .
`popperConfig`	nulis, objektas, funkcija	`null`	Norėdami pakeisti numatytąją Bootstrap Popper konfigūraciją, žr . Popper konfigūraciją . Kai funkcija naudojama kuriant Popper konfigūraciją, ji iškviečiama su objektu, kuriame yra numatytoji Bootstrap Popper konfigūracija. Tai padeda naudoti ir sujungti numatytuosius nustatymus su savo konfigūracija. Funkcija turi grąžinti Popper konfigūracijos objektą.
`reference`	eilutė, elementas, objektas	`'toggle'`	Išskleidžiamojo meniu nuorodos elementas. `'toggle'`Priima , `'parent'`, HTMLElement nuorodos arba objekto, teikiančio , reikšmes `getBoundingClientRect`. Norėdami gauti daugiau informacijos, žr. Popper's konstruktoriaus dokumentus ir virtualių elementų dokumentus .

Naudojant funkciją su`popperConfig`

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

Metodai

Metodas	apibūdinimas
`dispose`	Sunaikina elemento išskleidžiamąjį meniu. (Pašalina saugomus duomenis DOM elemente)
`getInstance`	Statinis metodas, leidžiantis gauti išskleidžiamąjį egzempliorių, susietą su DOM elementu, galite jį naudoti taip: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Statinis metodas, kuris grąžina išskleidžiamąjį egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Slepia tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.
`show`	Rodo tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.
`toggle`	Perjungia tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.
`update`	Atnaujina elemento išskleidžiamojo meniu padėtį.

Renginiai

Visi išskleidžiamojo meniu įvykiai suaktyvinami perjungimo elemente ir tada iškeliami į viršų. Taigi taip pat galite pridėti įvykių klausytojų .dropdown-menupagrindiniame elemente. hide.bs.dropdownir hidden.bs.dropdownįvykiai turi clickEventypatybę (tik tada, kai pradinis įvykio tipas yra click), kurioje yra paspaudimo įvykio įvykio objektas.

Renginio tipas	apibūdinimas
`hide.bs.dropdown`	Suveikia iš karto, kai `hide`iškviečiamas egzemplioriaus metodas.
`hidden.bs.dropdown`	Suaktyvinama, kai baigiamas paslėpti išskleidžiamasis meniu nuo vartotojo ir baigti CSS perėjimai.
`show.bs.dropdown`	Suveikia iš karto, kai `show`iškviečiamas egzemplioriaus metodas.
`shown.bs.dropdown`	Suaktyvinama, kai išskleidžiamasis meniu tampa matomas vartotojui ir CSS perėjimai baigti.

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

Išskleidžiamieji meniu

Apžvalga

Prieinamumas

Pavyzdžiai

Vienas mygtukas

Split mygtukas

Dydžio nustatymas

Tamsūs išskleidžiamieji meniu

Kryptys

RTL

Centruota

Nukritimas

Nuleidžiamas centras

Nukritęs

Dropstart

Meniu elementai

Aktyvus

Išjungta

Meniu derinimas

Atsakingas derinimas

Lygiavimo parinktys

Meniu turinys

Antraštės

Skirstytuvai

Tekstas

Formos

Automatinio uždarymo elgesys

CSS

Kintamieji

Sass kintamieji

Mišiniai

Naudojimas

Per duomenų atributus

Per JavaScript

`data-bs-toggle="dropdown"`vis dar reikalingas

Galimybės

Naudojant funkciją su`popperConfig`

Metodai

Renginiai

Išskleidžiamieji meniu

Apžvalga

Prieinamumas

Pavyzdžiai

Vienas mygtukas

Split mygtukas

Dydžio nustatymas

Tamsūs išskleidžiamieji meniu

Kryptys

RTL

Centruota

Nukritimas

Nuleidžiamas centras

Nukritęs

Dropstart

Meniu elementai

Aktyvus

Išjungta

Meniu derinimas

Atsakingas derinimas

Lygiavimo parinktys

Meniu turinys

Antraštės

Išskleidžiamojo meniu antraštė

Skirstytuvai

Tekstas

Formos

Išskleidžiamojo meniu parinktys

Automatinio uždarymo elgesys

CSS

Kintamieji

Sass kintamieji

Mišiniai

Naudojimas

Per duomenų atributus

Per JavaScript

data-bs-toggle="dropdown"vis dar reikalingas

Galimybės

Naudojant funkciją supopperConfig

Metodai

Renginiai

`data-bs-toggle="dropdown"`vis dar reikalingas

Naudojant funkciją su`popperConfig`