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 ARIA role="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:

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>

Ak <a>eleman:

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>

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

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

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>

Epi mete li pou itilize nan yon navbar:

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>

Direksyon

RTL

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

Santre

Fè meni an dewoulman santre anba a aktive ak .dropdown-centersou eleman paran an.

html

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

Dropup

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>

Dropup santre

Fè meni an dropup santre pi wo a baskile ak .dropup-centersou eleman paran an.

html

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

Dropend

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

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

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

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>

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.

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>

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.

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>

Andikape

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

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>

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.

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>

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.

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>

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.

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>

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.

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>

Tèt

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

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>

Divizeur

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

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>

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.

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>

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.

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>

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

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>

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.

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

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a evolye varyab CSS, dropdowns kounye a itilize varyab CSS lokal yo .dropdown-menupou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

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

Pèsonalizasyon atravè varyab CSS ka wè sou .dropdown-menu-darkklas la kote nou pase sou valè espesifik san yo pa ajoute seleksyon CSS kopi.

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

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 manyen pèmèt, ouvèti yon dropdown ajoute mouseovermoun kap okipe yo vid nan timoun imedya <body>eleman nan. 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 type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Via JavaScript

Rele dropdowns yo atravè JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => 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

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Non	Kalite	Default	Deskripsyon
`autoClose`	boolean, 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 `hide`oswa `toggle`metòd. (Epitou yo pa pral fèmen lè w peze `esc`kle) `'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. Remak: dropdown la ka toujou fèmen ak `ESC`kle a.
`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 .
`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 kòd 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 .
`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, li rele 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.
`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, al gade nan dokiman konstrukteur Popper a ak dokiman eleman vityèl .

Sèvi ak fonksyon ak`popperConfig`

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

Metòd

Metòd	Deskripsyon
`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 itilize li tankou sa a: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Kache meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
`show`	Montre meni dewoulman yon navbar oswa navigasyon onglet yo bay.
`toggle`	Aktive meni dewoulman yon ba nav oswa navigasyon onglet yo bay.
`update`	Mete ajou pozisyon deroule yon eleman.

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.

Kalite evènman	Deskripsyon
`hide.bs.dropdown`	Dife imedyatman lè yo `hide`te rele metòd egzanp lan.
`hidden.bs.dropdown`	Te tire lè dropdown la fini kache pou itilizatè a ak tranzisyon CSS yo fini.
`show.bs.dropdown`	Dife imedyatman lè yo `show`rele metòd egzanp lan.
`shown.bs.dropdown`	Li te tire lè deroule a te fè vizib pou itilizatè a ak tranzisyon CSS yo te konplete.

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

Dropdowns

Apèsi sou lekòl la

Aksesiblite

Egzanp yo

Bouton sèl

Split bouton

Dimansyon

Fènwa dropdowns

Direksyon

RTL

Santre

Dropup

Dropup santre

Dropend

Dropstart

Atik meni yo

Aktif

Andikape

Aliyman meni

Aliyman reponn

Opsyon aliyman

Kontni meni an

Tèt

Divizeur

Tèks

Fòm

Oto fèmen konpòtman

CSS

Varyab

Sass varyab

Mixins

Itilizasyon

Via atribi done yo

Via JavaScript

`data-bs-toggle="dropdown"`toujou obligatwa

Opsyon

Sèvi ak fonksyon ak`popperConfig`

Metòd

Evènman

Dropdowns

Apèsi sou lekòl la

Aksesiblite

Egzanp yo

Bouton sèl

Split bouton

Dimansyon

Fènwa dropdowns

Direksyon

RTL

Santre

Dropup

Dropup santre

Dropend

Dropstart

Atik meni yo

Aktif

Andikape

Aliyman meni

Aliyman reponn

Opsyon aliyman

Kontni meni an

Tèt

Dropdown header

Divizeur

Tèks

Fòm

Opsyon dropdown

Oto fèmen konpòtman

CSS

Varyab

Sass varyab

Mixins

Itilizasyon

Via atribi done yo

Via JavaScript

data-bs-toggle="dropdown"toujou obligatwa

Opsyon

Sèvi ak fonksyon akpopperConfig

Metòd

Evènman

`data-bs-toggle="dropdown"`toujou obligatwa

Sèvi ak fonksyon ak`popperConfig`