Ukwehla

Guqula umxholo wokwaleka ukuze ubonise uluhlu lwamakhonkco kunye nokunye kunye ne-Bootstrap yokuhla iplagi.

Kweli phepha

Isishwankathelo

Ukwehla kuyatshintsheka, ukwaleka ngokomxholo wokubonisa uluhlu lwamakhonkco kunye nokunye. Zenziwe ukuba zisebenze kunye ne-Bootstrap yokuhla iplagi yeJavaScript. Ziguqulwa ngokucofa, hayi ngokushukuma; esi sisigqibo soyilo ngabom .

Ukwehla kwakhelwe kwithala leencwadi lesithathu, iPopper , ebonelela ngokuma okuguquguqukayo kunye nobhaqo lwendawo yokujonga. Qinisekisa ukuquka i -popper.min.js phambi kweJavaScript yeBootstrap okanye usebenzise bootstrap.bundle.min.js/ bootstrap.bundle.jsequlethe iPopper. I-Popper ayisetyenziswanga ukubeka ukwehla kwii-navbar nangona kungafuneki indawo eguqukayo.

Ukufikeleleka

Umgangatho we WAI ARIA uchaza role="menu"iwijethi yokwenyani , kodwa oku kukodwa kwisicelo-njengemenu ezixhokonxa iintshukumo okanye imisebenzi. Iimenyu zeARIA zinokuqulatha kuphela izinto zemenyu, izinto zemenyu yebhokisi yokukhangela, izinto zemenyu yeqhosha lerediyo, amaqela amaqhosha erediyo, kunye neemenyu ezisezantsi.

I-Bootstrap's dropdowns, kwelinye icala, yenzelwe ukuba ibe yegeneric kwaye isebenze kwiimeko ezahlukeneyo kunye nezakhiwo zokuphawula. Umzekelo, kuyenzeka ukuba wenze izinto eziwa phantsi eziqulathe amagalelo awongezelelweyo kunye nolawulo lwefom, njengemimandla yokukhangela okanye iifom zokungena. Ngesi sizathu, iBootstrap ayilindelanga (okanye yongeze ngokuzenzekelayo) nayiphi na rolekunye aria-neempawu ezifunekayo kwiimenyu zokwenyani zeARIA . Ababhali kuya kufuneka babandakanye ezi mpawu zithe ngqo ngokwabo.

Nangona kunjalo, i-Bootstrap iyongeza inkxaso eyakhelwe-ngaphakathi kunxibelelwano lwemenyu yebhodi yezitshixo eqhelekileyo, njengokukwazi ukuhamba .dropdown-itemkwizinto ezizimeleyo usebenzisa izitshixo zekhesa kwaye uvale imenyu ESCngesitshixo.

Imizekelo

Gqibezela itoggle yokwehla (iqhosha lakho okanye ikhonkco) kunye nemenyu eyehlayo ngaphakathi .dropdown, okanye enye into ebhengeza position: relative;. Ukwehla kunokuvuswa ukusuka <a>okanye <button>izinto ukuze zilungele iimfuno zakho ezinokubakho. Imizekelo eboniswe apha isebenzisa <ul>iimpawu zesemantic apho kufanelekileyo, kodwa uphawu lwesiko luyaxhaswa.

Iqhosha elinye

Nayiphi na enye .btningajikwa ibe yidropdown toggle nolunye utshintsho lophawulo. Nantsi indlela onokuthi uzisebenzise ngayo naziphi na <button>izinto:

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>

Kwaye kunye <a>nezinto:

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>

Elona candelo lilungileyo ungakwenza oku ngalo naluphi na uhlobo lweqhosha, nalo:

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

Yahlula iqhosha

Ngokukwanjalo, yenza iqhosha elicandiweyo elehlayo elinophawu olufanayo njengokwehla kweqhosha elinye, kodwa ngokongezwa .dropdown-toggle-splitkwesithuba esifanelekileyo esijikeleze ukhathalelo lokuhla.

Sisebenzisa olu didi longeziweyo ukunciphisa okuthe tyaba paddingmacala omabini ekhathalelo ngama-25% kwaye sisuse margin-leftoko kongezwe kumaqhosha asezantsi. Olo tshintsho olongezelelweyo lugcina i-caret igxile kwiqhosha lokwahlula kwaye unikeze indawo yokubetha ngokufanelekileyo ngokufanelekileyo ecaleni kweqhosha eliphambili.

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

Ubungakanani

Amaqhosha okwehlayo asebenza ngamaqhosha abo bonke ubukhulu, kubandakanywa ukungagqibekanga kunye namaqhosha okulahla.

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

Ukuhla okumnyama

Ngena kwi-dropdowns ezimnyama ukuze utshatise i-navbar emnyama okanye isimbo esiqhelekileyo ngokudibanisa .dropdown-menu-darkesele ikhona .dropdown-menu. Akukho zinguqu zifunekayo kwizinto ezihlayo.

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>

Kwaye uyisebenzise kwi-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>

Izalathiso

RTL

Umkhomba-ndlela uboniswa xa usebenzisa i-Bootstrap kwi-RTL, intsingiselo .dropstartiya kuvela kwicala lasekunene.

Isembindini

Yenza imenyu eyehlayo ibekwe embindini ngezantsi .dropdown-centerkwento yokutshintsha into yomzali.

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>

Ukulahla

Qalisa imenyu eyehlayo ngentla kweziqalelo ngokongeza .dropupkwinto engumzali.

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

Uluhlu luphakathi

Yenza i-drop-up menu ibe sembindini phezu kwento yokutshintsha .dropup-centerinto yomzali.

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>

Yehla

Qalisa imenyu eyehlayo ekunene kwezinto ngokongeza .dropendkwinto engumzali.

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

Ukuqala phantsi

Qalisa imenyu eyehlayo ekhohlo kwizinto ngokongeza .dropstartkwinto engumzali.

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

Ungasebenzisa <a>okanye <button>izinto njengezinto ezihlayo.

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>

Unako kwakhona ukwenza izinto zokuhla ezingasebenziyo nge .dropdown-item-text. Zive ukhululekile ukwenza isitayile ngakumbi ngeCSS yesiko okanye izinto ezisetyenzisiweyo zokubhaliweyo.

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>

Iyasebenza

Yongeza .activekwizinto ezikuluhlu olusezantsi ukuze zizitayile njengezisebenzayo . Ukuhambisa imo esebenzayo kubuchwephesha bokuncedisa, sebenzisa aria-currentuphawu — usebenzisa pageixabiso lephepha langoku, okanye trueinto yangoku kwiseti.

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>

Kukhubazekile

Yongeza .disabledkwizinto ezikuluhlu olusezantsi ukuze uzibhale njengezicinyiweyo .

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>

Ngokungagqibekanga, imenyu eyehlayo ibekwa ngokuzenzekelayo nge-100% ukusuka phezulu kunye necala lasekhohlo lomzali wayo. Ungayitshintsha le nto .drop*ngeeklasi zesalathiso, kodwa ungaphinda uzilawule ngeeklasi ezongezelelweyo zesilungisi.

Yongeza .dropdown-menu-endku-a .dropdown-menuukuya ekunene lungelelanisa imenyu eyehlayo. Umkhomba-ndlela uboniswa xa usebenzisa i-Bootstrap kwi-RTL, intsingiselo .dropdown-menu-endiya kuvela kwicala lasekhohlo.

Iintloko phezulu! Iidrophu phantsi zibekwe enkosi kuPopper ngaphandle kwaxa ziqulethwe kwi 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>

Ulungelelwaniso oluphendulayo

Ukuba ufuna ukusebenzisa ulungelelwaniso oluphendulayo, khubaza indawo eguqukayo ngokudibanisa data-bs-display="static"uphawu kwaye usebenzise iiklasi zokwahluka eziphendulayo.

Ukulungelelanisa ekunene imenyu eyehlayo kunye nendawo yokuphumla enikiweyo okanye enkulu, yongeza .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>

Ukulungelelanisa ekhohlo imenyu eyehlayo kunye nendawo yoqhawulo enikiweyo okanye enkulu, yongeza .dropdown-menu-endkunye .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>

Qaphela ukuba awudingi kongeza data-bs-display="static"uphawu loyelelwano kumaqhosha okwehla kwii-navbar, kuba iPopper ingasetyenziswa kwiinavbar.

Iinketho zolungelelwaniso

Ukuthatha uninzi lweenketho eziboniswe ngasentla, nantsi idemo yekhitshi encinci yetinki yeenketho ezahlukeneyo zolungelelwaniso lokuhla kwindawo enye.

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>

Iiheader

Yongeza iheader ukulebhelisha amacandelo ezenzo kuyo nayiphi na imenyu eyehlayo.

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>

Abahluli

Yahlula amaqela ezinto zemenyu ezinxulumeneyo kunye nesahluli.

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>

Isicatshulwa

Beka nasiphi na isicatshulwa esikhululekileyo kwimenyu eyehlayo ngokubhaliweyo kwaye usebenzise izithuba eziluncedo . Qaphela ukuba uya kufuna izimbo zokulinganisa ezongezelelweyo ukunyanzela ububanzi bemenyu.

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>

Iifom

Faka ifom ngaphakathi kwemenyu eyehlayo, okanye uyenze ibe yimenyu eyehlayo, kwaye usebenzise i -margin okanye i-padding eziluncedo ukuyinika indawo engalunganga oyifunayo.

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>

Sebenzisa data-bs-offsetokanye data-bs-referenceutshintshe indawo yokwehla.

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 ukuziphatha

Ngokungagqibekanga, imenyu eyehlayo iyavalwa xa ucofa ngaphakathi okanye ngaphandle kwemenyu eyehlayo. Ungasebenzisa autoCloseinketho ukutshintsha le mikhwa yokwehla.

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

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, ukwehla ngoku kusebenzisa iiguquguquko ze-CSS zasekhaya .dropdown-menuukuze kuphuculwe ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Ukwenziwa ngokwezifiso ngokuguquguquka kweCSS kunokubonwa .dropdown-menu-darkeklasini apho sibhala ngaphezulu amaxabiso athile ngaphandle kokongeza abakhethi abaphindwa kabini beCSS.

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

Iinguqu zeSass

Izinto eziguquguqukayo kuzo zonke izinto eziwa phantsi:

$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

Izinto eziguquguqukayo zokwehla okumnyama :

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

Izinto eziguquguqukayo zeenkathalelo ezisekwe kwi-CSS ezibonisa ukusebenzisana kokwehla:

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

Imixube

I-Mixins isetyenziselwa ukuvelisa i-CSS-based carets kwaye inokufumaneka kwi 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;
    }
  }
}

Ukusetyenziswa

Ngeempawu zedatha okanye iJavaScript, iplagin eyehlayo itshintsha umxholo ofihliweyo (imenyu eyehlayo) ngokuguqula .showiklasi kumzali .dropdown-menu. Uphawu data-bs-toggle="dropdown"loyelelwano kuthenjelwe kulo ukuvala imenyu eyehlayo kwinqanaba lesicelo, ngoko luluvo oluhle ukusoloko uyisebenzisa.

Kwizixhobo ezisebenza ngokuchukumisa, ukuvula i dropdown yongeza izibambi ezingenanto mouseoverkubantwana <body>abasondeleyo bento. Oku kuvunyiweyo ukuba kubi kwe-Hack kuyafuneka ukusebenza malunga ne- quirk kwi-iOS' abathunywa besiganeko , ebenokuthi ngenye indlela ithintele itephu naphi na ngaphandle kokwehla ekuqaliseni ikhowudi evala ukuhla. Nje ukuba idropdown ivaliwe, ezi zibambi zongezelelweyo ezingenanto mouseoverziyasuswa.

Ngeempawu zedatha

Yongeza data-bs-toggle="dropdown"kwikhonkco okanye iqhosha ukuguqula ukwehla.

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

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

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

`data-bs-toggle="dropdown"`isafuneka

Nokuba ufowunela ukwehla kwakho ngeJavaScript okanye endaweni yoko usebenzise i-data-api, data-bs-toggle="dropdown"isoloko ifuneka ukuba ubekhona kwindawo yokuqalisa ukwehla.

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-bs-delay='{"show":0,"hide":150}'.

Igama	Uhlobo	Ukuhlala kukho	Inkcazo
`autoClose`	boolean, umtya	`true`	Qwalasela indlela yokuvala ngokuzenzekelayo kokwehla: `true`-ukwehla kuya kuvalwa ngokucofa ngaphandle okanye ngaphakathi kwimenyu eyehlayo. `false`-ukwehla kuya kuvalwa ngokucofa iqhosha lokuguqula kunye nokufowuna ngesandla `hide`okanye `toggle`indlela. (Kwakhona ayizukuvalwa ngokucofa `esc`iqhosha) `'inside'`-ukwehla kuya kuvalwa (kuphela) ngokucofa ngaphakathi kwimenyu eyehlayo. `'outside'`-ukwehla kuya kuvalwa (kuphela) ngokucofa ngaphandle kwemenyu eyehlayo. Qaphela: idrophu ingasoloko ivaliwe `ESC`ngesitshixo.
`boundary`	umtya, isiqalelo	`'clippingParents'`	Umda wothintelo lokuphuphumayo kwimenyu eyehlayo (isebenza kuphela kwisilungisi sePopper sokuthintela ukuphuphuma). Ngokungagqibekanga yiyo `clippingParents`kwaye inokwamkela i-HTMLElement ireferensi (ngeJavaScript kuphela). Ngolwazi oluthe vetshe jonga kuPopper's detectOverflow amaxwebhu .
`display`	umtya	`'dynamic'`	Ngokungagqibekanga, sisebenzisa iPopper kwisikhundla esiguqukayo. Khubaza oku nge `static`.
`offset`	uluhlu, umtya, umsebenzi	`[0, 2]`	I-offset yokuhla xa ithelekiswa nethagethi yayo. Ungagqithisa umtya kwiimpawu zedatha enamaxabiso owahlulwe ngokwekoma njenge: `data-bs-offset="10,20"`. Xa umsebenzi usetyenziselwa ukumisela i-offset, ibizwa ngento equlethe i-popper placement, ireferensi, kunye ne-popper rects njengengxabano yayo yokuqala. Isiqalo se-DOM node sigqithiselwe njengengxoxo yesibini. Umsebenzi kufuneka ubuyisele uluhlu olunamanani amabini: ukutyibilika , umgama . Ngolwazi oluthe vetshe jonga kumaxwebhu e-Popper's offset .
`popperConfig`	null, into, umsebenzi	`null`	Ukutshintsha uqwalaselo lwePopper olungagqibekanga lweBootstrap, bona uqwalaselo lwePopper . Xa umsebenzi usetyenziswa ukwenza uqwalaselo lwePopper, ibizwa ngento equlathe uqwalaselo lwePopper yeBootstrap engagqibekanga. Ikunceda ukuba usebenzise kwaye udibanise ukungagqibeki kunye noqwalaselo lwakho. Umsebenzi kufuneka ubuyisele into yoqwalaselo yePopper.
`reference`	umtya, isiqalelo, into	`'toggle'`	Isalathiso sesiqalelo semenyu eyehlayo. Yamkela amaxabiso e `'toggle'`, `'parent'`, i HTMLElement ireferensi okanye into enikezelayo `getBoundingClientRect`. Ngolwazi oluthe kratya jonga kumaxwebhu omakhi we-Popper kunye ne - virtual element docs .

Ukusebenzisa umsebenzi nge`popperConfig`

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

Iindlela

Indlela	Inkcazo
`dispose`	Itshabalalisa into eyehlayo. (Isusa idatha egciniweyo kwisiqalelo seDOM)
`getInstance`	Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo owisayo oyanyaniswa nento yeDOM, ungayisebenzisa ngolu hlobo: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Indlela engatshintshiyo ebuyisela ukwehla okuyanyaniswa kwinto yeDOM okanye yenze entsha ukuba ayiqalwanga. Ungayisebenzisa ngolu hlobo `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Ifihla imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
`show`	Ibonisa imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
`toggle`	Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
`update`	Ihlaziya indawo yokwehla kwento.

Iziganeko

Yonke iminyhadala eyehlayo igxothwa kwindawo yokuguqula kwaye emva koko iqhume phezulu. Ngoko unokongeza abaphulaphuli besiganeko kwinto .dropdown-menuyomzali. hide.bs.dropdownkunye hidden.bs.dropdownneziganeko clickEventzinepropati (kuphela xa uhlobo loMnyadala loqobo luyi click) equlathe iNjongo yeSigaba somnyadala wonqakrazo.

Uhlobo lomsitho	Inkcazo
`hide.bs.dropdown`	Imililo ngokukhawuleza xa `hide`indlela yomzekelo ibiziwe.
`hidden.bs.dropdown`	Itshiswe xa ukwehla kugqityiwe ukufihlwa kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe.
`show.bs.dropdown`	Imililo ngokukhawuleza xa `show`kubizwa indlela yomzekelo.
`shown.bs.dropdown`	Itshiswe xa ukwehla kwenziwe kwabonakala kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe.

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

Ukwehla

Isishwankathelo

Ukufikeleleka

Imizekelo

Iqhosha elinye

Yahlula iqhosha

Ubungakanani

Ukuhla okumnyama

Izalathiso

RTL

Isembindini

Ukulahla

Uluhlu luphakathi

Yehla

Ukuqala phantsi

Izinto zemenyu

Iyasebenza

Kukhubazekile

Ulungelelwaniso lwemenyu

Ulungelelwaniso oluphendulayo

Iinketho zolungelelwaniso

Umxholo wemenyu

Iiheader

Abahluli

Isicatshulwa

Iifom

Auto close ukuziphatha

CSS

Izinto eziguquguqukayo

Iinguqu zeSass

Imixube

Ukusetyenziswa

Ngeempawu zedatha

NgeJavaScript

`data-bs-toggle="dropdown"`isafuneka

Iinketho

Ukusebenzisa umsebenzi nge`popperConfig`

Iindlela

Iziganeko

Ukwehla

Isishwankathelo

Ukufikeleleka

Imizekelo

Iqhosha elinye

Yahlula iqhosha

Ubungakanani

Ukuhla okumnyama

Izalathiso

RTL

Isembindini

Ukulahla

Uluhlu luphakathi

Yehla

Ukuqala phantsi

Izinto zemenyu

Iyasebenza

Kukhubazekile

Ulungelelwaniso lwemenyu

Ulungelelwaniso oluphendulayo

Iinketho zolungelelwaniso

Umxholo wemenyu

Iiheader

Iheda eyehlayo

Abahluli

Isicatshulwa

Iifom

Iinketho zokwehla

Auto close ukuziphatha

CSS

Izinto eziguquguqukayo

Iinguqu zeSass

Imixube

Ukusetyenziswa

Ngeempawu zedatha

NgeJavaScript

data-bs-toggle="dropdown"isafuneka

Iinketho

Ukusebenzisa umsebenzi ngepopperConfig

Iindlela

Iziganeko

`data-bs-toggle="dropdown"`isafuneka

Ukusebenzisa umsebenzi nge`popperConfig`