Mga dropdown

I-toggle ang mga overlay sa konteksto para sa pagpakita sa mga lista sa mga link ug uban pa gamit ang Bootstrap dropdown plugin.

Niini nga panid

Overview

Ang mga dropdown kay ma-toggle, contextual overlay para sa pagpakita sa mga lista sa mga link ug uban pa. Gihimo sila nga interactive sa gilakip nga Bootstrap dropdown JavaScript plugin. Gibalhin sila pinaagi sa pag-klik, dili pinaagi sa pag-hover; kini usa ka tinuyo nga desisyon sa disenyo .

Ang mga dropdown gitukod sa usa ka ikatulo nga partido nga librarya, Popper , nga naghatag dinamikong pagpoposisyon ug pagtan-aw sa viewport. Siguruha nga iapil ang popper.min.js sa wala pa ang JavaScript sa Bootstrap o gamiton bootstrap.bundle.min.js/ bootstrap.bundle.jsnga adunay sulud nga Popper. Ang Popper wala gigamit sa pagpahimutang sa mga dropdown sa mga navbar bisan kung dili kinahanglan ang dinamikong pagpoposisyon.

Accessibility

Ang WAI ARIA nga sumbanan naghubit sa usa ka aktuwal nga role="menu"widget , apan kini espesipiko sa mga menu nga sama sa aplikasyon nga nagpalihok sa mga aksyon o gimbuhaton. Ang mga menu sa ARIA mahimo ra nga adunay mga butang sa menu, mga butang sa menu sa checkbox, mga butang sa menu sa radio button, mga grupo sa radio button, ug mga sub-menu.

Ang mga dropdown sa Bootstrap, sa laing bahin, gidisenyo nga mahimong generic ug magamit sa lain-laing mga sitwasyon ug markup structures. Pananglitan, posible nga maghimo mga dropdown nga adunay dugang nga mga input ug mga kontrol sa porma, sama sa mga natad sa pagpangita o mga porma sa pag-login. Tungod niini nga rason, ang Bootstrap wala magdahom (ni awtomatik nga makadugang) sa bisan unsa roleug mga aria-hiyas nga gikinahanglan para sa tinuod nga ARIA nga mga menu. Kinahanglang ilakip sa mga tagsulat kining mas espesipikong mga hiyas sa ilang kaugalingon.

Bisan pa, ang Bootstrap nagdugang sa built-in nga suporta alang sa kadaghanan sa mga standard nga keyboard nga mga interaksyon sa menu, sama sa abilidad sa paglihok sa indibidwal .dropdown-itemnga mga elemento gamit ang mga yawe sa cursor ug isira ang menu gamit ang ESCyawe.

Mga pananglitan

I-wrap ang toggle sa dropdown (imong buton o link) ug ang dropdown menu sulod sa .dropdown, o laing elemento nga nagpahayag position: relative;. Ang mga dropdown mahimong ma-trigger gikan sa <a>o <button>mga elemento aron mas mohaum sa imong potensyal nga mga panginahanglan. Ang mga pananglitan nga gipakita dinhi naggamit sa mga <ul>elemento sa semantiko kung angay, apan gisuportahan ang naandan nga marka.

Usa ka butones

Ang bisan unsang single .btnmahimo nga usa ka dropdown toggle nga adunay pipila nga mga pagbag-o sa markup. Ania kung giunsa nimo kini magamit sa bisan unsang <button>mga elemento:

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>

Ug uban sa <a>mga elemento:

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>

Ang labing kaayo nga bahin mao nga mahimo nimo kini sa bisan unsang variant sa buton, usab:

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

Sa susama, paghimo og split button dropdowns nga adunay halos parehas nga markup sa single button nga dropdowns, apan uban ang pagdugang sa .dropdown-toggle-splitpara sa saktong spacing sa palibot sa dropdown caret.

Gigamit namo kini nga dugang nga klase aron makunhuran ang pinahigda paddingsa bisan asa nga kilid sa caret sa 25% ug tangtangon ang margin-leftgidugang alang sa regular nga mga dropdown sa buton. Kadtong dugang nga mga pagbag-o nagpadayon sa caret nga nakasentro sa split button ug naghatag usa ka mas tukma nga gidak-on nga hit nga lugar sunod sa main button.

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

Pagsukod

Ang mga dropdown sa buton nagtrabaho sa mga buton sa tanan nga gidak-on, lakip ang default ug split dropdown nga mga 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>

Mangitngit nga mga dropdown

Pagpili sa mas ngitngit nga mga dropdown aron ipaangay ang usa ka itom nga navbar o naandan nga istilo pinaagi sa pagdugang .dropdown-menu-darksa usa ka naa na .dropdown-menu. Walay mga pagbag-o nga gikinahanglan sa dropdown nga mga butang.

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>

Ug gibutang kini aron magamit sa usa ka 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

Ang mga direksyon gisalamin kung gigamit ang Bootstrap sa RTL, nagpasabut .dropstartnga makita sa tuo nga bahin.

Nakasentro

Himoa ang dropdown nga menu nga nakasentro sa ubos sa toggle sa .dropdown-centerelemento sa ginikanan.

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

I-trigger ang mga dropdown menu sa ibabaw sa mga elemento pinaagi sa pagdugang .dropupsa elemento sa ginikanan.

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

Nasentro ang dropup

Himoa ang dropup menu nga nakasentro sa ibabaw sa toggle sa .dropup-centerelemento sa ginikanan.

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

I-trigger ang mga dropdown menu sa tuo sa mga elemento pinaagi sa pagdugang .dropendsa elemento sa ginikanan.

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

I-trigger ang mga dropdown menu sa wala sa mga elemento pinaagi sa pagdugang .dropstartsa elemento sa ginikanan.

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

Mahimo nimong gamiton <a>o <button>mga elemento isip dropdown nga mga butang.

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>

Makahimo ka usab og dili interactive nga dropdown nga mga butang nga adunay .dropdown-item-text. Mobati nga gawasnon sa pag-istilo sa dugang gamit ang custom CSS o text utilities.

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>

Aktibo

Idugang .activesa mga aytem sa dropdown aron i- estilo kini nga aktibo . Aron ipaabot ang aktibong kahimtang ngadto sa mga teknolohiyang makatabang, gamita ang aria-currenthiyas — gamit ang pagebili alang sa kasamtangan nga panid, o truealang sa kasamtangang butang sa usa ka set.

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>

Nabaldado

Idugang .disabledsa mga aytem sa dropdown aron i- estilo kini isip disabled .

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>

Sa kasagaran, ang usa ka dropdown menu awtomatik nga gipahimutang 100% gikan sa ibabaw ug ubay sa wala nga bahin sa ginikanan niini. Mahimo nimo kini usbon sa direksyon .drop*nga mga klase, apan mahimo usab nimo nga kontrolon kini gamit ang dugang nga mga klase sa modifier.

Idugang .dropdown-menu-endsa usa .dropdown-menungadto sa tuo nga i-align ang dropdown menu. Ang mga direksyon gisalamin kung gigamit ang Bootstrap sa RTL, ang kahulogan .dropdown-menu-endmakita sa wala nga bahin.

Taas ang ulo! Ang mga dropdown gipahimutang salamat sa Popper gawas kung kini naa sa usa ka 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>

Responsive alignment

Kung gusto nimo gamiton ang responsive alignment, disable dynamic positioning pinaagi sa pagdugang sa data-bs-display="static"attribute ug gamita ang responsive variation classes.

Aron i-align sa tuo ang dropdown menu sa gihatag nga breakpoint o mas dako, idugang .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>

Aron i-align sa wala ang dropdown menu sa gihatag nga breakpoint o mas dako, idugang .dropdown-menu-endug .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>

Timan-i nga dili nimo kinahanglan nga magdugang ug data-bs-display="static"attribute sa dropdown buttons sa navbars, kay ang Popper wala gigamit sa navbars.

Mga kapilian sa pag-align

Gikuha ang kadaghanan sa mga opsyon nga gipakita sa ibabaw, ania ang gamay nga kitchen sink demo sa nagkalain-laing dropdown alignment nga mga opsyon sa usa ka dapit.

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>

Mga ulohan

Pagdugang og usa ka header sa pag-label sa mga seksyon sa mga aksyon sa bisan unsang dropdown menu.

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>

Mga dibisyon

Pagbulag sa mga grupo sa mga may kalabutan nga mga butang sa menu nga adunay usa ka divider.

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>

Text

Ibutang ang bisan unsang libre nga porma nga teksto sa sulod sa usa ka dropdown menu nga adunay teksto ug gamita ang mga gamit sa spacing . Timan-i nga lagmit kinahanglan nimo ang dugang nga mga istilo sa pagsukod aron mapugngan ang gilapdon sa menu.

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>

Mga porma

Ibutang ang usa ka porma sulod sa dropdown menu, o himoa kini nga dropdown menu, ug gamita ang margin o padding utilities aron mahatagan kini og negatibong luna nga imong gikinahanglan.

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>

Gamita data-bs-offseto data-bs-referencepara usbon ang lokasyon sa dropdown.

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>

Auto close nga kinaiya

Sa kasagaran, ang dropdown menu sirado kung mag-klik sa sulod o sa gawas sa dropdown menu. Mahimo nimong gamiton ang autoClosekapilian aron usbon kini nga pamatasan sa dropdown.

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

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga dropdown karon naggamit sa lokal nga CSS variables sa .dropdown-menupara sa gipaayo nga real-time nga customization. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

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

Ang pag-customize pinaagi sa mga variable sa CSS makita sa .dropdown-menu-darkklase diin atong gi-override ang mga piho nga kantidad nga wala magdugang mga duplicate nga CSS selectors.

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

Mga variable para sa tanan nga 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:             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

Mga variable para sa ngitngit nga 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;

Mga variable para sa mga caret nga nakabase sa CSS nga nagpakita sa interaktibidad sa dropdown:

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

Mixins

Ang mga mixin gigamit sa paghimo sa CSS-based carets ug makita sa 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;
    }
  }
}

Paggamit

Pinaagi sa data attributes o JavaScript, ang dropdown plugin mo-toggle sa tinago nga content (dropdown menus) pinaagi sa pag-toggle sa .showklase sa parent .dropdown-menu. Ang data-bs-toggle="dropdown"hiyas gisaligan alang sa pagsira sa mga dropdown menu sa lebel sa aplikasyon, mao nga maayong ideya nga gamiton kini kanunay.

Sa touch-enabled nga mga device, ang pag-abli sa dropdown makadugang sa walay sulod nga mouseovermga handler sa mga bata sa <body>elemento. Kini nga giangkon nga mangil-ad nga hack gikinahanglan aron masulbad ang usa ka quirk sa delegasyon sa panghitabo sa iOS , nga kung dili makapugong sa usa ka gripo bisan asa sa gawas sa dropdown gikan sa pag-trigger sa code nga nagsira sa dropdown. Kung sirado na ang dropdown, kining mga dugang nga walay sulod nga mouseovermga handler kuhaon.

Pinaagi sa data attributes

Idugang data-bs-toggle="dropdown"sa usa ka link o buton aron i-toggle ang dropdown.

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

Pinaagi sa JavaScript

Tawga ang mga dropdown pinaagi sa JavaScript:

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

`data-bs-toggle="dropdown"`gikinahanglan pa

Dili igsapayan kung imong tawagan ang imong dropdown pinaagi sa JavaScript o sa baylo nga gamiton ang data-api, data-bs-toggle="dropdown"kinahanglan kanunay nga naa sa elemento sa pag-trigger sa dropdown.

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Ngalan	Matang	Default	Deskripsyon
`autoClose`	boolean, pisi	`true`	I-configure ang auto close nga kinaiya sa dropdown: `true`- ang dropdown pagasirhan pinaagi sa pag-klik sa gawas o sulod sa dropdown menu. `false`- ang dropdown pagasirhan pinaagi sa pag-klik sa toggle button ug mano-mano nga pagtawag `hide`o `toggle`pamaagi. (Dili usab sirado pinaagi sa pagpindot sa `esc`yawe) `'inside'`- ang dropdown pagasirhan (lamang) pinaagi sa pag-klik sa sulod sa dropdown menu. `'outside'`- ang dropdown pagasirhan (lamang) pinaagi sa pag-klik sa gawas sa dropdown menu. Mubo nga sulat: ang dropdown mahimong sirado kanunay gamit ang `ESC`yawe.
`boundary`	string, elemento	`'clippingParents'`	Ang utlanan sa pagpugong sa pag-awas sa dropdown menu (magamit lamang sa preventOverflow modifier sa Popper). Sa kasagaran kini `clippingParents`ug mahimong modawat ug HTMLElement reference (pinaagi sa JavaScript lamang). Alang sa dugang nga impormasyon tan-awa ang Popper's detectOverflow docs .
`display`	hilo	`'dynamic'`	Sa kasagaran, gigamit namo ang Popper alang sa dinamikong pagpoposisyon. I-disable kini gamit ang `static`.
`offset`	array, hilo, function	`[0, 2]`	Offset sa dropdown kalabot sa target niini. Mahimo nimong ipasa ang usa ka hilo sa mga hiyas sa datos nga adunay mga kantidad nga gibulag sa comma sama sa: `data-bs-offset="10,20"`. Kung ang usa ka function gigamit aron mahibal-an ang offset, kini gitawag nga adunay usa ka butang nga adunay sulud nga popper placement, ang reference, ug popper rects isip unang argumento niini. Ang triggering element nga DOM node gipasa isip ikaduhang argumento. Kinahanglang ibalik sa function ang array nga adunay duha ka numero: skidding , distance . Alang sa dugang nga impormasyon tan-awa ang Popper's offset docs .
`popperConfig`	null, butang, function	`null`	Aron usbon ang default Popper config sa Bootstrap, tan-awa ang configuration sa Popper . Kung ang usa ka function gigamit sa paghimo sa Popper configuration, kini gitawag uban sa usa ka butang nga adunay sulod sa Bootstrap nga default Popper configuration. Makatabang kini kanimo sa paggamit ug paghiusa sa default sa imong kaugalingon nga configuration. Kinahanglang ibalik sa function ang usa ka butang sa pag-configure alang sa Popper.
`reference`	hilo, elemento, butang	`'toggle'`	Reference nga elemento sa dropdown menu. Gidawat ang mga kantidad sa `'toggle'`, `'parent'`, usa ka HTMLElement reference o usa ka butang nga naghatag `getBoundingClientRect`. Alang sa dugang nga impormasyon tan-awa ang Popper's constructor docs ug virtual element docs .

Paggamit sa function sa`popperConfig`

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

Pamaagi

Pamaagi	Deskripsyon
`dispose`	Giguba ang dropdown sa usa ka elemento. (Gikuha ang gitipigan nga datos sa elemento sa DOM)
`getInstance`	Static nga pamaagi nga nagtugot kanimo sa pagkuha sa dropdown nga pananglitan nga nalangkit sa usa ka elemento sa DOM, mahimo nimo kining gamiton sama niini: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Static nga pamaagi nga nagbalik ug dropdown nga instance nga nalangkit sa usa ka elemento sa DOM o paghimo ug bag-o kung wala kini nasugdan. Mahimo nimo kini gamiton sama niini: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Gitagoan ang dropdown menu sa gihatag nga navbar o tabbed navigation.
`show`	Nagpakita sa dropdown menu sa gihatag nga navbar o tabbed navigation.
`toggle`	I-toggle ang dropdown menu sa gihatag nga navbar o tabbed navigation.
`update`	Gi-update ang posisyon sa dropdown sa usa ka elemento.

Mga panghitabo

Ang tanan nga dropdown nga mga panghitabo gipabuto sa toggling nga elemento ug dayon gibula. Mao nga mahimo nimong idugang ang mga tigpaminaw sa panghitabo sa .dropdown-menuelemento sa ginikanan. hide.bs.dropdownug hidden.bs.dropdownang mga panghitabo adunay usa ka clickEventkabtangan (lamang kung ang orihinal nga tipo sa Hitabo mao ang click) nga adunay sulod nga usa ka Event Object para sa click nga panghitabo.

Uri sa panghitabo	Deskripsyon
`hide.bs.dropdown`	Nagdilaab dayon kung ang `hide`pamaagi sa pananglitan gitawag na.
`hidden.bs.dropdown`	Gipabuto kung ang dropdown nahuman na nga gitago gikan sa user ug ang mga transisyon sa CSS nahuman na.
`show.bs.dropdown`	Nagdilaab dayon kung `show`gitawag ang pamaagi sa pananglitan.
`shown.bs.dropdown`	Gipabuto kung ang dropdown nahimo nang makita sa user ug ang mga transisyon sa CSS nahuman na.

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

Mga dropdown

Overview

Accessibility

Mga pananglitan

Usa ka butones

Split button

Pagsukod

Mangitngit nga mga dropdown

Direksyon

RTL

Nakasentro

Dropup

Nasentro ang dropup

Dropend

Dropstart

Mga butang sa menu

Aktibo

Nabaldado

Pag-align sa menu

Responsive alignment

Mga kapilian sa pag-align

Kontento sa menu

Mga ulohan

Mga dibisyon

Text

Mga porma

Auto close nga kinaiya

CSS

Mga variable

Sass variables

Mixins

Paggamit

Pinaagi sa data attributes

Pinaagi sa JavaScript

`data-bs-toggle="dropdown"`gikinahanglan pa

Mga kapilian

Paggamit sa function sa`popperConfig`

Pamaagi

Mga panghitabo

Mga dropdown

Overview

Accessibility

Mga pananglitan

Usa ka butones

Split button

Pagsukod

Mangitngit nga mga dropdown

Direksyon

RTL

Nakasentro

Dropup

Nasentro ang dropup

Dropend

Dropstart

Mga butang sa menu

Aktibo

Nabaldado

Pag-align sa menu

Responsive alignment

Mga kapilian sa pag-align

Kontento sa menu

Mga ulohan

Dropdown nga ulohan

Mga dibisyon

Text

Mga porma

Mga kapilian sa dropdown

Auto close nga kinaiya

CSS

Mga variable

Sass variables

Mixins

Paggamit

Pinaagi sa data attributes

Pinaagi sa JavaScript

data-bs-toggle="dropdown"gikinahanglan pa

Mga kapilian

Paggamit sa function sapopperConfig

Pamaagi

Mga panghitabo

`data-bs-toggle="dropdown"`gikinahanglan pa

Paggamit sa function sa`popperConfig`