Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

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

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

Kwaye kunye <a>nezinto:

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

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 ngokongeza .dropdown-menu-darkkwekhoyo .dropdown-menu. Akukho zinguqu zifunekayo kwizinto ezihlayo.

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

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

Izalathiso

RTL

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

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>

I-Dropright

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

I-Dropleft

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

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

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

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

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

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

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

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

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

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

Umxholo wemenyu

Iiheader

Yongeza iheader ukulebhelisha amacandelo eentshukumo kuyo nayiphi na imenyu eyehlayo.

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

<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 izixhobo zesithuba . Qaphela ukuba uya kufuna izimbo zokulinganisa ezongezelelweyo ukunyanzela ububanzi bemenyu.

Omnye umzekelo wombhalo ohamba simahla kwimenyu eyehlayo.

Kwaye lo ngumzekelo ongaphezulu wokubhaliweyo.

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

Intsha apha? Bhalisa Ingaba uyilibele iphasiwedi? 
<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>

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

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

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

<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

Izinto eziguquguqukayo

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

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 id="dLabel" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown trigger
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

NgeJavaScript

Fowunela ukwehla ngeJavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript. Kuphawu lwedatha, faka igama lokhetho ku data-bs-, njengakwi data-bs-offset="". Qinisekisa ukuba utshintsha uhlobo lwetyala legama lokukhetha ukusuka kwikamela ukuya kwi-kebab-case xa udlula iinketho ngeempawu zedatha. Umzekelo, endaweni yokusebenzisa data-bs-autoClose="false", sebenzisa data-bs-auto-close="false".

Igama Uhlobo Ukuhlala kukho Inkcazo
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 .
reference umtya | into | into 'toggle' Isalathiso sesiqalelo semenyu eyehlayo. Yamkela amaxabiso e 'toggle', 'parent', i HTMLElement ireferensi okanye into enikezelayo getBoundingClientRect. Ngolwazi oluthe kratya jonga kumaxwebhu omakhi wePopper kunye needokhi zento ebonakalayo .
display umtya 'dynamic' Ngokungagqibekanga, sisebenzisa iPopper kwindawo eguqukayo. Khubaza oku nge static.
offset uluhlu | umtya | umsebenzi [0, 2]

I-offset yokuhla xa ithelekiswa nethagethi yayo. Ungadlula umtya kwiimpawu zedatha ezinamaxabiso ahlulwe ngokwekoma afana:data-bs-offset="10,20"

Xa umsebenzi usetyenziselwa ukumisela i-offset, ubizwa ngento equlathe ukubeka i-popper, ireferensi, kunye ne-popper i-rects njengengxabano yayo yokuqala. Isiqalo se-DOM node sigqithiselwe njengengxoxo yesibini. Umsebenzi kufuneka ubuyisele uluhlu olunamanani amabini: .[skidding, distance]

Ngolwazi oluthe vetshe jonga kumaxwebhu e-Popper's offset .
autoClose bhuqa | 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 hideokanye toggleindlela. (Kwakhona ayizukuvalwa ngokucofa esciqhosha)
  • 'inside'-ukwehla kuya kuvalwa (kuphela) ngokucofa ngaphakathi kwimenyu eyehlayo.
  • 'outside'-ukwehla kuya kuvalwa (kuphela) ngokucofa ngaphandle kwemenyu eyehlayo.
popperConfig null | into | umsebenzi null

Ukutshintsha uqwalaselo lwePopper lweBootstrap olungagqibekanga, 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.

Ukusebenzisa umsebenzi ngepopperConfig

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

Iindlela

Indlela Inkcazo
toggle Qwalasela imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
show Ibonisa imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
hide Ifihla imenyu eyehlayo ye-navbar enikiweyo okanye ukukhangela kwe-tabbed.
update Ihlaziya indawo yokwehla kwento.
dispose Itshabalalisa into eyehlayo. (Isusa idatha egciniweyo kwisiqalelo seDOM)
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo wokuhla ohambelana 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)

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.

Indlela Inkcazo
show.bs.dropdown Imililo ngoko nangoko xa indlela yomboniso ibizwa ngokuba.
shown.bs.dropdown Itshiswe xa ukwehla kwenziwe kwabonakala kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe.
hide.bs.dropdown Imililo ngoko nangoko xa indlela yokufihla umzekelo ibizwe.
hidden.bs.dropdown Itshiswe xa ukwehla kugqityiwe ukufihlwa kumsebenzisi kwaye iinguqulelo zeCSS zigqityiwe. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})