Laktawan ti kangrunaan a linaon Laktawan ti docs navigation
in English

Dagiti dropdown

I-toggle dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay babaen ti Bootstrap dropdown plugin.

Iti daytoy a panid

Panangkita iti pakabuklan

Dagiti dropdown ket mabalin a mabaliwan, dagiti konteksto a panagikapet para iti panangiparang kadagiti listaan ​​dagiti silpo ken dadduma pay. Naaramid dagitoy nga interaktibo babaen ti nairaman a Bootstrap dropdown JavaScript plugin. Ma-toggle dagitoy babaen ti panag-click, saan a babaen ti panag-hover; daytoy ket nairanta a pangngeddeng iti disenio .

Dagiti dropdown ket naibangon iti maysa a maikatlo a partido a biblioteka, ti Popper , a mangipaay ti dinamiko a panagposision ken panagduktal ti viewport. Siguraduen nga iraman ti popper.min.js sakbay ti JavaScript ti Bootstrap wenno usaren ti bootstrap.bundle.min.js/ bootstrap.bundle.jsa naglaon iti Popper. Ti Popper ket saan a naus-usar a mangiposision kadagiti dropdown kadagiti navbar nupay kasta a kas ti dinamiko a panagposision ket saan a kasapulan.

Ti pannakagun-od

Ti pagalagadan ti WAI ARIA ket mangikeddeng ti aktual a role="menu"widget , ngem daytoy ket espesipiko kadagiti kasla aplikasion a menu a mangtignay kadagiti panagtignay wenno dagiti panagandar. Dagiti menu ti ARIA ket mabalin laeng nga aglaon kadagiti banag ti menu, dagiti banag ti menu ti kahon ti tsek, dagiti banag ti menu ti buton ti radio, dagiti grupo ti buton ti radio, ken dagiti sub-menu.

Iti sabali a bangir, dagiti dropdown ti Bootstrap ket nadisenio a sapasap ken maipakat kadagiti nadumaduma a kasasaad ken dagiti estruktura ti markup. Kas pagarigan, mabalin ti mangpartuat kadagiti dropdown a naglaon kadagiti kanayonan nga input ken dagiti kontrol ti porma, a kas dagiti tay-ak ti panagbiruk wenno dagiti porma ti panagserrek. Gapu iti daytoy a rason, ti Bootstrap ket saan a mangnamnama (wenno automatiko a manginayon) ti ania man kadagiti roleken dagiti aria-kababalin a kasapulan para kadagiti pudno nga ARIA a menu. Masapul nga iraman dagiti autor dagitoy nga ad-adda nga espesipiko a kababalin a mismo.

Nupay kasta, ti Bootstrap ket mangnayon ti naibangon a suporta para kadagiti kaaduan a pagalagadan a panagtitinnulong ti menu ti teklado, a kas ti abilidad nga aggaraw kadagiti indibidual .dropdown-itemnga elemento babaen ti panagusar kadagiti tulbek ti kursor ken mangiserra ti menu babaen ti ESCtulbek.

Dagiti pagarigan

Balkoten ti toggle ti dropdown (ti buton wenno silpomo) ken ti dropdown menu iti uneg ti .dropdown, wenno sabali nga elemento a mangideklara position: relative;iti . Mabalin a mai-trigger dagiti dropdown manipud <a>wenno <button>dagiti elemento tapno nasaysayaat a maibagay kadagiti mabalin a kasapulam. Dagiti pagarigan a naipakita ditoy ket agus-usar kadagiti semantiko <ul>nga elemento no sadino a maitutop, ngem ti kostumbre a panagmarka ket nasuportaran.

Maymaysa a buton

Ania man a single .btnket mabalin a pagbalinen a dropdown toggle nga addaan kadagiti sumagmamano a panagbalbaliw ti markup. Adtoy no kasano a maikabilmo dagitoy nga agtrabaho kadagiti asinoman <button>nga elemento:

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

Ket addaan kadagiti <a>elemento:

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

Ti kasayaatan a paset ket mabalinmo nga aramiden daytoy iti ania man a buton a variant, met:

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

Kasta met, mangpartuat kadagiti nabingay a buton a dropdown nga addaan iti gangani a kapada a marka a kas dagiti agmaymaysa a buton a dropdown, ngem addaan ti pannakainayon ti .dropdown-toggle-splitpara iti umno a panagsisina iti aglawlaw ti dropdown a caret.

Usarenmi daytoy nga ekstra a klase tapno mapabassit ti horizontal paddingiti agsumbangir a sikigan ti caret iti 25% ken ikkaten ti margin-leftthat's added para kadagiti regular a button dropdown. Dagita nga ekstra a panagbalbaliw pagtalinaedenda a naisentro ti caret iti split button ken mangipaay iti ad-adda a maitutop ti kadakkelna a lugar a maidungpar iti abay ti kangrunaan a buton.

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

Panag-sizing

Dagiti buton a dropdown ket agtrabaho kadagiti buton ti amin a kadakkel, a mairaman dagiti default ken split a dropdown a buton.

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

Nasipnget dagiti dropdown

Pilien kadagiti nasipnget a dropdown tapno maipada ti nasipnget a navbar wenno kostumbre nga estilo babaen ti pananginayon .dropdown-menu-darkiti addan .dropdown-menu. Awan ti kasapulan a panagbalbaliw kadagiti dropdown a banag.

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

Ket ti panangikabil iti dayta nga usaren iti 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>

Dagiti Direksion

RTL nga

Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti RTL, kayatna a sawen .dropstartket agparangto iti kannawan a sikigan.

Dropup nga

Mangtignay kadagiti dropdown a menu iti ngato dagiti elemento babaen ti pananginayon .dropupiti nagannak nga 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>

Dropright nga

Mangtignay kadagiti dropdown a menu iti kannawan dagiti elemento babaen ti pananginayon .dropenditi nagannak nga 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">
    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 nga

Mangtignay kadagiti dropdown a menu iti kannigid dagiti elemento babaen ti pananginayon .dropstartiti nagannak nga 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">
  <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>

Mabalinmo nga usaren <a>wenno <button>dagiti elemento a kas dagiti dropdown a banag.

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

Mabalinmo pay ti mangpartuat kadagiti saan nga interaktibo a dropdown a banag babaen ti .dropdown-item-text. Mariknam a nawaya nga estilo nga ad-adda pay babaen dagiti kostumbre a CSS wenno dagiti utilidad ti teksto.

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

Aktibo

Inayon .activekadagiti banag iti dropdown tapno estilo dagitoy a kas aktibo . Tapno maidanon ti aktibo a kasasaad kadagiti makatulong a teknolohia, usaren ti aria-currentattribute — nga agus-usar ti pagepateg para iti agdama a panid, wenno truepara iti agdama a banag iti maysa a grupo.

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

Awanan ti kabaelan

Inayon .disabledkadagiti banag iti dropdown tapno estilo dagitoy a kas baldado .

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

Babaen ti default, ti maysa a dropdown a menu ket automatiko a naiposision iti 100% manipud iti ngato ken iti kannigid a sikigan ti nagannakna. Mabalinmo a baliwan daytoy babaen dagiti .drop*klase ti direksion, ngem mabalinmo pay a kontrolen dagitoy babaen dagiti kanayonan a klase ti mangbalbaliw.

Inayon .dropdown-menu-enditi a .dropdown-menuagingga iti kannawan nga i-align ti dropdown menu. Dagiti direksion ket maisarming no agus-usar ti Bootstrap iti RTL, kayatna a sawen .dropdown-menu-endket agparangto iti kannigid a sikigan.

Ulo nga agpangato! Dagiti dropdown ket naiposision gapu iti Popper malaksid no linaon dagitoy iti maysa a 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>

Responsibo a panagtunos

No kayatmo nga usaren ti sumungbat a panagtunos, balbaliwan ti dinamiko a panagposision babaen ti pananginayon ti data-bs-display="static"attribute ken usarem dagiti sungbat a klase ti panagduduma.

Tapno maitunos iti kannawan ti dropdown menu iti naited a breakpoint wenno dakdakkel, inayon ti .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>

Tapno maitunos ti kannigid a dropdown menu iti naited a breakpoint wenno dakdakkel, inayon .dropdown-menu-endken .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>

Imutektekanyo a saanmo a kasapulan ti manginayon ti data-bs-display="static"attribute kadagiti dropdown a buton kadagiti navbar, gapu ta ti Popper ket saan a maus-usar kadagiti navbar.

Dagiti pagpilian iti panagtunos

Ti panangala ti kaaduan kadagiti pagpilian a naipakita iti ngato, ditoy ti bassit a demo ti lababo ti kosina dagiti nadumaduma a pagpilian ti dropdown alignment iti maysa a lugar.

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

Linaon ti menu

Dagiti ulo

Manginayon ti ulo a mangimarka kadagiti benneg dagiti tignay iti ania man a dropdown a menu.

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

Dagiti Mangbingaybingay

Pagsisinaen dagiti grupo dagiti mainaig a banag ti menu babaen ti divider.

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

Teksto

Ikabil ti ania man a nawaya a porma a teksto iti uneg ti dropdown a menu nga addaan iti teksto ken agusar kadagiti utilidad ti panagsisina . Imutektekanyo a kasapulam la ketdi dagiti kanayonan nga estilo ti panagdakkel tapno malapdan ti kalawa ti menu.

Sumagmamano a pagarigan a teksto a nawaya nga agayus iti uneg ti dropdown menu.

Ket daytoy ti ad-adda a pagarigan a teksto.

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

Dagiti Pormas

Mangikabilka iti porma iti uneg ti dropdown menu, wenno aramidem dayta a dropdown menu, ken agusarka kadagiti margin wenno padding utilities tapno maitedmo iti negatibo nga espasio a kasapulam.

Baro iti aglawlaw ditoy? Agpirma Nalipatan mo ti password? 
<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>

Usaren ti data-bs-offsetwenno data-bs-referencetapno baliwan ti lokasion ti dropdown.

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

Auto close ti kababalin

Babaen ti default, ti dropdown menu ket naserraan no ag-click iti uneg wenno ruar ti dropdown menu. Mabalinmo nga usaren ti autoClosepagpilian a mangbalbaliw iti daytoy a kababalin ti dropdown.

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

Dagiti Variable

Dagiti variable para kadagiti amin a dropdown:

$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($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:           $dropdown-padding-y $dropdown-item-padding-x;

Dagiti variable para iti nasipnget a dropdown :

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

Dagiti variable para kadagiti CSS-a naibatay a caret a mangipakita ti panagtitinnulong ti maysa a dropdown:

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

Dagiti Mixin

Dagiti mixin ket maus-usar a mangpataud kadagiti CSS-a naibatay a caret ken mabalin a masarakan idiay 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;
    }
  }
}

Panagusar

Babaen dagiti kabileg ti datos wenno JavaScript, ti dropdown a plugin ket mangbalbaliw ti nailemmeng a linaon (dagiti dropdown a menu) babaen ti panangibaliw ti .showklase iti nagannak .dropdown-menu. Ti data-bs-toggle="dropdown"attribute ket agpannuray para iti panagserra kadagiti dropdown a menu iti maysa a lebel ti aplikasion, isu a nasayaat nga ideya a kanayon nga usaren daytoy.

Kadagiti touch-enabled nga alikamen, ti pananglukat iti dropdown ket mangnayon kadagiti empty mouseoverhandler kadagiti dagus nga annak ti <body>elemento. Daytoy nga aminen a naalas a hack ket kasapulan tapno agtrabaho iti aglawlaw ti maysa a quirk iti iOS’ event delegation , a no saan ket manglapped iti maysa a tap iti sadinoman iti ruar ti dropdown manipud iti panangtignay iti kodigo a mangiserra iti dropdown. Apaman a naserraan ti dropdown, mouseovermaikkat dagitoy a kanayonan nga empty handler.

Babaen kadagiti attribute ti datos

Inayon data-bs-toggle="dropdown"iti link wenno buton tapno mai-toggle ti dropdown.

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

Babaen ti JavaScript

Tawagan dagiti dropdown babaen ti JavaScript:

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

Uray no awagam ti dropdownmo babaen ti JavaScript wenno imbes ketdi usarem ti data-api, data-bs-toggle="dropdown"ket kanayon a kasapulan nga adda iti trigger element ti dropdown.

Dagiti Pagpilian

Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-offset="". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti camelCase iti kebab-case no ipasa dagiti pagpilian babaen dagiti attribute ti datos. Kas pagarigan, imbes nga usarem ti data-bs-autoClose="false", usarem ti data-bs-auto-close="false".

Nagan Tipo Default Panangiladawan
boundary kuerdas nga | elemento 'clippingParents' Beddeng ti limitasion ti panaglablabes ti dropdown a menu (agaplikar laeng iti preventOverflow a mangbalbaliw ti Popper). Babaen ti kasisigud daytoy 'clippingParents'ket mabalin nga umawat ti reperensia ti HTMLElement (babaen laeng ti JavaScript). Para iti ad-adu pay nga impormasion kitaen dagiti dokumento ti detectOverflow ni Popper .
reference kuerdas nga | elemento nga | banag 'toggle' Reperensia nga elemento ti dropdown menu. Awaten dagiti pateg ti 'toggle', 'parent', ti maysa a reperensia ti HTMLElement wenno ti maysa a banag a mangipaay ti getBoundingClientRect. Para iti ad-adu nga impormasion kitaen dagiti dok ti konstruktor ni Popper ken dagiti dok ti birtual nga elemento .
display kuerdas 'dynamic' Babaen ti default, usarenmi ti Popper para iti dinamiko a panagposision. Ibaldado daytoy babaen ti static.
offset array nga | kuerdas nga | amad [0, 2]

Offset ti dropdown relatibo iti targetna. Mabalinmo nga ipasa ti maysa a kuerdas kadagiti kababalin ti datos nga addaan kadagiti pateg a naisina babaen ti koma a kas ti:data-bs-offset="10,20"

No ti maysa a panagandar ket maus-usar a mangikeddeng ti offset, daytoy ket maawagan babaen ti maysa a banag a naglaon ti pannakaikabil ti popper, ti reperensia, ken dagiti popper rects a kas ti umuna nga argumentona. Ti mangtignay nga elemento a DOM a nodo ket maipasa a kas ti maikadua nga argumento. Ti function ket masapul nga agsubli ti maysa nga array nga addaan iti dua a numero: .[skidding, distance]

Para iti ad-adu pay nga impormasion kitaen dagiti offset docs ni Popper .
autoClose boolean nga | kuerdas true

Ikonfigura ti auto close a kababalin ti dropdown:

  • true- ti dropdown ket maiserra babaen ti panangi-click iti ruar wenno uneg ti dropdown menu.
  • false- ti dropdown ket maiserra babaen ti panangi-click ti toggle button ken manual nga awag hidewenno togglepamay-an. (Kasta met a saan a maiserra babaen ti panangi-press iti esckey)
  • 'inside'- ti dropdown ket maiserra (laeng) babaen ti panangi-click iti uneg ti dropdown menu.
  • 'outside'- ti dropdown ket maiserra (laeng) babaen ti panangi-klik iti ruar ti dropdown menu.
popperConfig null nga | banag | amad null

Tapno baliwan ti default a Popper a konfigurasion ti Bootstrap, kitaen ti panagisaad ti Popper .

No ti maysa a panagandar ket maus-usar a mangpartuat ti panagisaad ti Popper, daytoy ket maawagan babaen ti maysa a banag a naglaon ti kasisigud a panagisaad ti Popper ti Bootstrap. Tulongannaka nga agusar ken mangitipon ti default iti bukodmo a panagisaad. Ti panagandar ket masapul nga isublina ti maysa a banag ti panagisaad para iti Popper.

Usar ti function nga addaanpopperConfig

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

Dagiti Pamay-an

Wagas Panangiladawan
toggle I-toggle ti dropdown menu ti naited a navbar wenno tabbed navigation.
show Ipakita ti dropdown menu ti naited a navbar wenno tabbed navigation.
hide Ilemmeng ti dropdown menu ti naited a navbar wenno tabbed navigation.
update Ipabaro ti posision ti dropdown ti maysa nga elemento.
dispose Dadaelenna ti dropdown ti maysa nga elemento. (Ikkaten ti naidulin a datos iti elemento ti DOM)
getInstance Estatiko a pamay-an a mangipalubos kenka a makaala ti dropdown a pagarigan a nainaig iti maysa nga elemento ti DOM, mabalinmo nga usaren daytoy a kas iti daytoy:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Estatiko a pamay-an a mangisubli ti dropdown a pagarigan a nainaig iti elemento ti DOM wenno mangpartuat ti baro no kas pagarigan saan a nairugi. Mabalinmo nga usaren a kastoy:bootstrap.Dropdown.getOrCreateInstance(element)

Dagiti Pasamak

Amin a dropdown events ket maipaputok iti toggling element ken kalpasanna ket bubbled up. Isu a mabalinmo pay ti manginayon kadagiti agdengdengngeg ti pasamak iti .dropdown-menu's nagannak nga elemento. hide.bs.dropdownken hidden.bs.dropdowndagiti pasamak ket addaan iti clickEventtagikua (no laeng ti orihinal a kita ti Pasamak ket click) a naglaon ti Bagay ti Pasamak para iti pasamak ti panagpidut.

Wagas Panangiladawan
show.bs.dropdown Dagus nga agputok no ti pamay-an ti show instance ket maawagan.
shown.bs.dropdown Napaputok no ti dropdown ket naaramid a makita ti agar-aramat ken dagiti panagbalbaliw ti CSS ket nalpasen.
hide.bs.dropdown Dagus nga agputok no ti pamay-an ti hide instance ket naawagan.
hidden.bs.dropdown Napaputok no ti dropdown ket nalpas a nailemmeng manipud iti agar-aramat ken dagiti panagbalbaliw ti CSS ket nalpasen. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})