Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Dropdowns

Aktivite kontèks superpositions pou montre lis lyen ak plis ankò ak plugin Bootstrap dropdown la.

Nan paj sa a

Apèsi sou lekòl la

Dropdowns yo ka chanje, superpozisyon kontèks pou montre lis lyen ak plis ankò. Yo ap fè entèaktif ak enkli ladan li Bootstrap dropdown JavaScript plugin. Yo ap aktive pa klike, pa pa elikopte; sa a se yon desizyon konsepsyon entansyonèl .

Dropdowns yo bati sou yon bibliyotèk twazyèm pati, Popper , ki bay pwezante dinamik ak deteksyon Viewport. Asire ou ke ou mete popper.min.js anvan JavaScript Bootstrap a oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper. Popper pa itilize pou pozisyon dropdowns nan navbars menm si kòm pwezante dinamik pa obligatwa.

Aksesiblite

Estanda WAI ARIArole="menu" defini yon widje aktyèl , men sa a se espesifik nan meni tankou aplikasyon ki deklanche aksyon oswa fonksyon. Meni ARIA kapab genyen sèlman atik meni, atik meni kaz, atik meni bouton radyo, gwoup bouton radyo, ak sou-meni.

Dropdowns Bootstrap yo, nan lòt men an, yo fèt yo dwe jenerik ak aplikab nan yon varyete sitiyasyon ak estrikti maketing. Pa egzanp, li posib pou kreye dropdowns ki genyen lòt entrées ak kontwòl fòm, tankou jaden rechèch oswa fòm konekte. Pou rezon sa a, Bootstrap pa atann (ni otomatikman ajoute) nenpòt nan roleak aria-atribi ki nesesè pou meni ARIA vre. Otè yo pral gen ladan yo atribi pi espesifik sa yo tèt yo.

Sepandan, Bootstrap ajoute sipò entegre pou pifò entèraksyon estanda klavye meni, tankou kapasite pou deplase nan .dropdown-itemeleman endividyèl yo lè l sèvi avèk kle kurseur yo epi fèmen meni an ak ESCkle a.

Egzanp yo

Anvlope bouton dewoulman an (bouton ou oswa lyen ou) ak meni deroule a nan .dropdown, oswa yon lòt eleman ki deklare position: relative;. Dropdowns yo ka deklanche soti nan <a>oswa <button>eleman yo pi byen anfòm bezwen potansyèl ou yo. Egzanp yo montre la a sèvi ak <ul>eleman semantik kote sa apwopriye, men yo sipòte maketing koutim.

Bouton sèl

Nenpòt sèl .btnka tounen yon deroulan ak kèk chanjman maketing. Men ki jan ou ka mete yo nan travay ak nenpòt <button>eleman:

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

Ak <a>eleman:

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

Pi bon pati a se ou ka fè sa ak nenpòt variant bouton tou:

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

Menm jan an tou, kreye dewoulman bouton fann ak nòmalman maketing la menm jan ak dropdown bouton sèl, men ak adisyon a .dropdown-toggle-splitpou bon espas alantou deroulan a.

Nou itilize klas siplemantè sa a pou redwi orizontal la paddingsou chak bò priz la pa 25% epi retire sa margin-leftki te ajoute pou dewoulman bouton regilye yo. Chanjman siplemantè sa yo kenbe caret la santre nan bouton fann an epi bay yon zòn frape ki pi apwopriye akote bouton prensipal la.

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

Dimansyon

Bouton dropdowns travay ak bouton nan tout gwosè, ki gen ladan bouton deroule default ak divize.

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

Fènwa dropdowns

Opt pou pi fonse dropdowns pou matche ak yon navbar nwa oswa style koutim lè w ajoute .dropdown-menu-darksou yon ki deja egziste .dropdown-menu. Pa gen okenn chanjman ki nesesè nan atik deroule yo.

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

Epi mete li pou itilize nan yon navbar:

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

Direksyon

RTL

Direksyon yo reflete lè w ap itilize Bootstrap nan RTL, sa vle di .dropstartap parèt sou bò dwat la.

Dropup

Deklanche meni deroulan anlè eleman yo lè w ajoute .dropupnan eleman paran an.

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

Deklanche meni dewoulan adwat eleman yo lè w ajoute .dropendnan eleman paran an.

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

Deklanche meni dewoulman nan bò gòch eleman yo lè w ajoute .dropstartnan eleman paran an.

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

Ou ka itilize <a>oswa <button>eleman kòm atik dropdown.

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

Ou kapab tou kreye atik dropdown ki pa entèaktif ak .dropdown-item-text. Ezite style pi lwen ak CSS koutim oswa sèvis piblik tèks.

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

Aktif

Ajoute .activenan atik ki nan deroule a pou style yo kòm aktif . Pou transmèt eta aktif nan teknoloji asistans, sèvi ak aria-currentatribi a — lè l sèvi avèk pagevalè pou paj aktyèl la, oswa truepou atik aktyèl la nan yon seri.

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

Andikape

Ajoute .disabledatik ki nan deroule a pou style yo kòm andikape .

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

Pa default, yon meni deroulant otomatikman pozisyone 100% soti nan tèt la ak sou bò gòch la nan paran li. Ou ka chanje sa a ak klas direksyon .drop*yo, men ou ka kontwole yo tou ak klas modifye adisyonèl.

Ajoute .dropdown-menu-endyon .dropdown-menua dwat aliman meni an deroulant. Direksyon yo reflete lè w ap itilize Bootstrap nan RTL, sa vle di .dropdown-menu-endap parèt sou bò gòch la.

Tèt leve! Dropdowns yo pozisyone gras a Popper eksepte lè yo genyen nan yon navbar. 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Aliyman reponn

Si ou vle sèvi ak aliyman reponn, enfim pwezante dinamik lè w ajoute data-bs-display="static"atribi a epi sèvi ak klas varyasyon ki reponn yo.

Pou fè aliman dwat meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .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>

Pou fè aliman bò gòch meni deroule a ak pwen rupture yo bay la oswa pi gwo, ajoute .dropdown-menu-endak .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>

Remake byen ke ou pa bezwen ajoute yon data-bs-display="static"atribi nan bouton dropdown nan navbars, paske Popper pa itilize nan navbars.

Opsyon aliyman

Lè w pran pi fò nan opsyon yo montre pi wo a, isit la se yon ti demonstrasyon koule kwizin nan divès opsyon aliyman dropdown nan yon sèl kote.

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

Kontni meni an

Tèt

Ajoute yon header pou make seksyon aksyon yo nan nenpòt meni deroulant.

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

Divizeur

Separe gwoup atik meni ki gen rapò ak yon divizyon.

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

Tèks

Mete nenpòt tèks fòm lib nan yon meni ki gen tèks epi sèvi ak sèvis piblik espas . Remake byen ke ou pral gen anpil chans bezwen estil gwosè adisyonèl pou limite lajè meni an.

Gen kèk egzanp tèks ki koule gratis nan meni an deroulant.

Ak sa a se plis tèks egzanp.

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

Fòm

Mete yon fòm nan yon meni deroulant, oswa fè li nan yon meni deroulant, epi sèvi ak maj oswa sèvis piblik padding pou ba li espas negatif ou bezwen an.

Nouvo isit la? Enskri Ou bliye modpas? 
<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>

Sèvi ak data-bs-offsetoswa data-bs-referencepou chanje kote dropdown la.

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

Oto fèmen konpòtman

Pa default, meni an deroulant fèmen lè klike andedan oswa deyò meni deroule a. Ou ka itilize autoCloseopsyon pou chanje konpòtman sa a nan dropdown la.

<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

Varyab

Varyab pou tout dropdowns:

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

Varyab pou deroule nwa a :

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

Varyab pou carets ki baze sou CSS ki endike entèaktif yon dropdown:

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

Mixins

Mixins yo itilize pou jenere carets ki baze sou CSS yo epi yo ka jwenn nan 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;
    }
  }
}

Itilizasyon

Atravè atribi done oswa JavaScript, Plugin deroule a chanje kontni kache (meni deroulant) lè li chanje .showklas la sou paran an .dropdown-menu. Se data-bs-toggle="dropdown"atribi a konte sou pou fèmen meni deroulan nan yon nivo aplikasyon, kidonk li se yon bon lide pou toujou sèvi ak li.

Sou aparèy ki pèmèt manyen, louvri yon dropdown ajoute mouseovermoun kap okipe yo vid nan timoun imedya <body>eleman an. Sa a se vreman lèd Hack nesesè yo travay alantou yon kirk nan delegasyon evènman iOS ' , ki ta otreman anpeche yon tiyo nenpòt kote andeyò deroule a soti nan deklanche kòd la ki fèmen dropdown la. Yon fwa ke dropdown la fèmen, moun kap okipe lòt vid sa mouseoveryo retire.

Via atribi done yo

Ajoute data-bs-toggle="dropdown"nan yon lyen oswa bouton pou aktive yon deroulan.

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

Via JavaScript

Rele dropdowns yo atravè JavaScript:

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

Kèlkeswa si wi ou non ou rele dropdown ou atravè JavaScript oswa olye de itilize done-api a, data-bs-toggle="dropdown"se toujou oblije prezan sou eleman deklanche dropdown la.

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-offset="". Asire w ke w chanje kalite ka a nan non opsyon an soti nan camelCase nan kebab-case lè w ap pase opsyon yo atravè atribi done yo. Pou egzanp, olye pou yo itilize data-bs-autoClose="false", sèvi ak data-bs-auto-close="false".

Non Kalite Default Deskripsyon
boundary fisèl | eleman 'clippingParents' Limit kontrent debòde nan meni deroule a (aplike sèlman nan modifye preventOverflow Popper a). Pa default li a 'clippingParents'epi li ka aksepte yon referans HTMLElement (via JavaScript sèlman). Pou plis enfòmasyon, gade nan docs detectOverflow Popper a .
reference fisèl | eleman | objè 'toggle' Eleman referans nan meni an deroulant. Aksepte valè 'toggle', 'parent', yon referans HTMLElement oswa yon objè ki bay getBoundingClientRect. Pou plis enfòmasyon, gade nan dokiman konstrukteur Popper a ak dokiman eleman vityèl .
display fisèl 'dynamic' Pa default, nou itilize Popper pou pwezante dinamik. Enfim sa a ak static.
offset etalaj | fisèl | fonksyon [0, 2]

Konsantrasyon deroule a parapò ak sib li yo. Ou ka pase yon fisèl nan atribi done ak valè separe vigil tankou:data-bs-offset="10,20"

Lè yo itilize yon fonksyon pou detèmine konpanse a, yo rele l ak yon objè ki genyen plasman popper a, referans a, ak popper rects kòm premye agiman li. Se eleman deklanche ne DOM la pase kòm dezyèm agiman an. Fonksyon an dwe retounen yon etalaj ki gen de nimewo: .[skidding, distance]

Pou plis enfòmasyon, al gade nan Docs Offset Popper la .
autoClose booleyen | fisèl true

Konfigure konpòtman fèmen oto deroule a:

  • true- yo pral fèmen deroule a lè w klike deyò oswa andedan meni deroule a.
  • false- yo pral fèmen dropdown la lè w klike sou bouton an aktive ak manyèlman rele hideoswa togglemetòd. (Epitou yo pa pral fèmen lè w peze esckle)
  • 'inside'- deroule a pral fèmen (sèlman) lè w klike andedan meni deroule a.
  • 'outside'- deroule a pral fèmen (sèlman) lè w klike deyò meni deroule a.
popperConfig nil | objè | fonksyon null

Pou chanje konfigirasyon Popper default Bootstrap la, gade konfigirasyon Popper la .

Lè yo itilize yon fonksyon pou kreye konfigirasyon Popper la, yo rele l ak yon objè ki gen konfigirasyon Popper default Bootstrap la. Li ede ou itilize ak rantre default la ak pwòp konfigirasyon ou. Fonksyon an dwe retounen yon objè konfigirasyon pou Popper.

Sèvi ak fonksyon akpopperConfig

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

Metòd

Metòd Deskripsyon
toggle Aktive meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
show Montre meni dewoulman yon navbar oswa navigasyon onglet yo bay.
hide Kache meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
update Mete ajou pozisyon deroule yon eleman.
dispose Detwi deroule yon eleman. (Retire done ki estoke sou eleman DOM)
getInstance Metòd estatik ki pèmèt ou jwenn egzanp dropdown ki asosye ak yon eleman DOM, ou ka itilize li tankou sa a:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Metòd estatik ki retounen yon egzanp dropdown ki asosye ak yon eleman DOM oswa kreye yon nouvo nan ka li pa te inisyalize. Ou ka sèvi ak li tankou sa a:bootstrap.Dropdown.getOrCreateInstance(element)

Evènman

Tout evènman dropdown yo revoke nan eleman baskil la ak Lè sa a, bulle moute. Se konsa, ou kapab tou ajoute koute evènman sou .dropdown-menueleman paran an. hide.bs.dropdownak hidden.bs.dropdownevènman yo gen yon clickEventpwopriyete (sèlman lè kalite Evènman orijinal la se click) ki gen yon Objè Evènman pou evènman an klike sou.

Metòd Deskripsyon
show.bs.dropdown Dife imedyatman lè yo rele metòd montre egzanp lan.
shown.bs.dropdown Li te tire lè deroule a te fè vizib pou itilizatè a ak tranzisyon CSS yo te konplete.
hide.bs.dropdown Dife imedyatman lè yo te rele metòd egzanp kache a.
hidden.bs.dropdown Te tire lè dropdown la fini kache pou itilizatè a ak tranzisyon CSS yo fini. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})