in English

Okwehliswayo

Guqula izimbondela zokuqukethwe ukuze ubonise izinhlu zezixhumanisi nokunye okwengeziwe nge-plugin eyehlayo ye-Bootstrap.

Kuleli khasi

Uhlolojikelele

Okwehliswayo kuyaguquleka, imbondela yomongo yokubonisa izinhlu zezixhumanisi nokuningi. Enziwe asebenzisane ne-plugin ye-JavaScript eyehlayo ye-Bootstrap efakiwe. Aguqulwa ngokuchofoza, hhayi ngokuhambisa phezulu; lesi yisinqumo somklamo wamabomu .

Okwehliswayo kwakhelwe kulabhulali yenkampani yangaphandle, i- Popper , ehlinzeka ngokuma okunamandla nokutholwa kwembobo yokubuka. Qiniseka ukuthi ufaka i- popper.min.js ngaphambi kweJavaScript ye-Bootstrap noma sebenzisa bootstrap.bundle.min.js/ bootstrap.bundle.jsequkethe i-Popper. I-Popper ayisetshenziselwa ukubeka okwehlayo kuma-navbar nakuba ukuma okuguquguqukayo kungadingeki.

Ukufinyeleleka

Izinga le- WAI ARIA role="menu" lichaza iwijethi yangempela , kodwa lokhu kuqondiswe kumamenyu afana nohlelo lokusebenza aqalisa izenzo noma imisebenzi. Amamenyu e -ARIA angaqukatha kuphela izinto zemenyu, izinto zemenyu yebhokisi lokuhlola, izinto zemenyu yezinkinobho zomsakazo, amaqembu ezinkinobho zomsakazo, namamenyu amancane.

Okwehliswayo kwe-Bootstrap, ngakolunye uhlangothi, kuklanyelwe ukuthi kube yijenerikhi futhi kusebenze ezimeni ezahlukahlukene kanye nezakhiwo zokumaka. Isibonelo, kungenzeka ukudala okwehliswayo okuqukethe okokufaka okwengeziwe nezilawuli zefomu, njengezinkambu zokusesha noma amafomu okungena ngemvume. Ngalesi sizathu, i-Bootstrap ayilindele (noma yengeze ngokuzenzakalelayo) noma yiziphi roleizibaluli aria-ezidingekayo kumamenyu e -ARIA eqiniso. Ababhali kuyodingeka bafake lezi zibaluli eziqondile ngokwabo.

Kodwa-ke, i-Bootstrap iyengeza usekelo olwakhelwe ngaphakathi lokusebenzisana kwemenyu yekhibhodi ejwayelekile, njengokukwazi ukuhamba phakathi .dropdown-itemkwezakhi ngazinye usebenzisa okhiye bekhesa nokuvala imenyu ESCngokhiye.

Izibonelo

Goqa inguquko yokudonsela phansi (inkinobho noma isixhumanisi sakho) kanye nemenyu yokudonsela phansi ngaphakathi .dropdown, noma enye into ememezela position: relative;. Okwehliswayo kungase kuqaliswe kusuka <a>noma ama <button>-elementi ukuze kulingane kangcono nezidingo zakho ezingaba khona. Izibonelo eziboniswe lapha zisebenzisa <ul>izakhi ze-semantic lapho kufanele khona, kodwa umaka wangokwezifiso uyasekelwa.

Inkinobho eyodwa

Noma iyiphi ingoma eyodwa .btningashintshwa ibe okokudonsela phansi ngezinye izinguquko zemakhaphu. Nansi indlela ongazisebenzisa ngayo noma yiziphi <button>izici:

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

Futhi ngama- <a>elementi:

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

Ingxenye engcono kakhulu ukuthi ungakwenza lokhu nganoma yikuphi okuhlukile kwenkinobho, futhi:

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

Inkinobho yokuhlukanisa

Ngokufanayo, dala okwehliswayo kwenkinobho yokuhlukanisa okunophawu olufanayo nolwehlayo lwenkinobho eyodwa, kodwa ngokungezwa kwesikhala .dropdown-toggle-splitesifanele endaweni yokunakekela okwehlayo.

Sisebenzisa lesi sigaba esengeziwe ukuze sinciphise okuvundlile paddingnhlangothi zombili ze-caret ngo-25% futhi sisuse margin-leftlokho okwengezwe ekwehliseni phansi kwezinkinobho ezivamile. Lezo zinguquko ezengeziwe zigcina i-caret igxile enkinobheni yokuhlukanisa futhi inikeza indawo yokushaya enosayizi ofanele eduze kwenkinobho eyinhloko.

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

Ukulinganisa

Okwehliswayo kwezinkinobho kusebenza ngezinkinobho zabo bonke osayizi, okuhlanganisa nezinkinobho ezizenzakalelayo nezihlukanisayo ezidonsela phansi.

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

Okwehliswayo okumnyama

Ngena kokwehliswayo okumnyama ukuze ufane ne-navbar emnyama noma isitayela sangokwezifiso ngokungeza .dropdown-menu-darkkokukhona .dropdown-menu. Azikho izinguquko ezidingekayo ezintweni ezidonsela phansi.

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

Futhi ukuyisebenzisa ku-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>

Izikhombisi-ndlela

I-RTL

Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL, okusho ukuthi .dropstartkuzovela ngakwesokudla.

Ukwehliswa

Qalisa amamenyu okwehlayo ngenhla kwezici ngokwengeza .dropupkusici esingumzali.

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

Qalisa amamenyu okwehlayo kwesokudla sezakhi ngokwengeza .dropendkusici esingumzali.

<!-- 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 amamenyu okwehlayo kwesokunxele sezinto ngokwengeza .dropstartkusici esingumzali.

<!-- 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>noma ama <button>-elementi njengezinto ezidonsela phansi.

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

Ungakwazi futhi ukudala izinto ezidonsela phansi ezingasebenzisani nge- .dropdown-item-text. Zizwe ukhululekile ukwenza isitayela ngokuqhubekayo nge-CSS yangokwezifiso noma izinsiza zombhalo.

<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

Engeza .activeezintweni kokwehliswayo ukuze wenze isitayela njengezisebenzayo . Ukuze udlulisele isimo esisebenzayo kubuchwepheshe obusizayo, sebenzisa aria-currentisibaluli — usebenzisa pageinani lekhasi lamanje, noma trueinto yamanje kusethi.

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

Ikhutshaziwe

Engeza .disabledezintweni kokwehliswayo ukuze wenze isitayela njengezikhutshaziwe .

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Ngokuzenzakalelayo, imenyu yokudonsela phansi imiswa ngokuzenzakalelayo ngo-100% ukusuka phezulu nangakwesokunxele somzali wayo. Ungakushintsha lokhu .drop*ngamakilasi aqondisayo, kodwa futhi ungawalawula ngamakilasi engeziwe okulungisa.

Engeza .dropdown-menu-endkokuthi a .dropdown-menuukuze uqondanise kwesokudla imenyu eyehlayo. Izikhombisi-ndlela ziboniswa uma usebenzisa i-Bootstrap ku-RTL, okusho ukuthi .dropdown-menu-endkuzovela ohlangothini lwesobunxele.

Amakhanda phezulu! Okwehliswayo kubekwe ngenxa ye-Popper ngaphandle kwalapho kuqukethwe ku-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>

Ukuqondanisa okusabelayo

Uma ufuna ukusebenzisa ukuqondanisa okusabelayo, khubaza ukuma okuguquguqukayo ngokungeza data-bs-display="static"isibaluli futhi usebenzise izigaba ezisabelayo zokuhlukahluka.

Ukuze uqondanise kwesokudla imenyu eyehlayo nendawo ehlukanisiwe enikeziwe noma enkulu, engeza .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>

Ukuze uqondanise kwesokunxele imenyu eyehlayo nendawo ehlukanisiwe enikeziwe noma enkulu, engeza .dropdown-menu-endfuthi .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 ukuthi awudingi ukwengeza data-bs-display="static"isibaluli kuzinkinobho ezidonsela phansi kuma-navbar, njengoba i-Popper ingasetshenziswa kuma-navbar.

Izinketho zokuqondanisa

Ngokuthatha okuningi kwezinketho eziboniswe ngenhla, nansi idemo encane yasekhishini yezinketho zokuqondanisa okwehlayo endaweni eyodwa.

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

Izihloko

Engeza unhlokweni kulebula izigaba zezenzo kunoma iyiphi 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>

Abahlukanisi

Hlukanisa amaqembu ezinto zemenyu ezihlobene ngesihlukanisi.

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

Umbhalo

Beka noma imuphi umbhalo we-freeform ngaphakathi kwemenyu eyehlayo onombhalo futhi usebenzise izinsiza zokuhlukanisa isikhala . Qaphela ukuthi cishe uzodinga izitayela zokulinganisa ezengeziwe ukuze ucindezele ububanzi bemenyu.

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

Amafomu

Faka ifomu kumenyu eyehlayo, noma ulenze libe yimenyu eyehlayo, bese usebenzisa imajini noma izinto zokunamathisela ukuze ulinikeze isikhala esingesihle osidingayo.

<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-offsetnoma data-bs-referenceushintshe indawo yokudonsela phansi.

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

Vala ngokuzenzakalela ukuziphatha

Ngokuzenzakalelayo, imenyu eyehlayo iyavalwa uma uchofoza ngaphakathi noma ngaphandle kwemenyu eyehlayo. Ungasebenzisa autoCloseinketho ukushintsha lokhu kuziphatha kokudonsela phansi.

<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

Okuguquguqukayo

Okuguquguqukayo kukho konke okwehliswayo:

$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($gray-900, 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;

Okuguquguqukayo kokwehla 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;

Okuguquguqukayo kwama-carets asekelwe ku-CSS abonisa ukusebenzisana kokwehlayo:

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

Imiksi

Ama-mixin asetshenziselwa ukukhiqiza ama-caret asekelwe ku-CSS futhi angatholakala ku- 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;
    }
  }
}

Ukusetshenziswa

Ngezibaluli zedatha noma i-JavaScript, i-plugin eyehlayo iguqula okuqukethwe okufihliwe (amamenyu okwehliswayo) ngokuguqulela .showikilasi kumzali .dropdown-menu. Isibaluli data-bs-toggle="dropdown"kuthenjelwe kuso ekuvaleni amamenyu okwehlayo ezingeni lesicelo, ngakho-ke kuwumqondo omuhle ukusisebenzisa njalo.

Kumadivayisi anikwe amandla ukuthinta, ukuvula okwehliswayo kwengeza mouseoverizibambi ezingenalutho ezinganeni eziseduze ze- <body>elementi. Lokhu kugebenga okuvunyiwe ukuthi kubi kuyadingeka ukuze kulungiswe okuthile ekuthunyelweni komcimbi we-iOS , okungavimbela ukuthepha noma yikuphi ngaphandle kokwehliswayo ukuthi kungacuphi ikhodi evala okwehliswayo. Uma okwehliswayo sekuvaliwe, lezi mouseoverzibambi ezengeziwe ezingenalutho ziyasuswa.

Ngezibaluli zedatha

Engeza data-bs-toggle="dropdown"kusixhumanisi noma inkinobho ukuze uguqule okwehliswayo.

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

Nge-JavaScript

Shayela okwehliswayo nge-JavaScript:

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

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

Kungakhathaliseki ukuthi ushayela okwehliswayo ucingo nge-JavaScript noma esikhundleni salokho sebenzisa i-data-api, data-bs-toggle="dropdown"kuyadingeka njalo ukuthi ube khona kusici sokuqala sokwehliswayo.

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-bs-, njengaku data-bs-offset="". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho ukusuka ku-camelCase ukuya ku-kebab-kesi lapho udlulisa izinketho ngezibaluli zedatha. Ngokwesibonelo, esikhundleni sokusebenzisa data-bs-autoClose="false", sebenzisa data-bs-auto-close="false".

Igama	Uhlobo	Okuzenzakalelayo	Incazelo
`boundary`	umucu \| isici	`'clippingParents'`	Umkhawulo owumkhawulo wokuchichima wemenyu eyehlayo (usebenza kuphela kusilungisi se-Popper's preventOverflow). Ngokuzenzakalelayo iyona `'clippingParents'`futhi ingamukela ireferensi ye-HTMLElement (nge-JavaScript kuphela). Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's detectOverflow .
`reference`	umucu \| into \| into	`'toggle'`	Isici esiyisethenjwa semenyu eyehlayo. Yamukela amanani `'toggle'`, `'parent'`, inkomba Yesici se-HTML noma into ehlinzekayo `getBoundingClientRect`. Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti omakhi we-Popper kanye nemibhalo yezinto ezibonakalayo .
`display`	umucu	`'dynamic'`	Ngokuzenzakalelayo, sisebenzisa i-Popper ngokuma okuguquguqukayo. Khubaza lokhu nge- `static`.
`offset`	uhlu \| umucu \| umsebenzi	`[0, 2]`	I-offset yokwehliswayo ihlobene nethagethi yakhona. Ungadlulisa uchungechunge kuzibaluli zedatha ezinamavelu ahlukaniswe ngokhefana afana nalawa:`data-bs-offset="10,20"` Uma umsebenzi usetshenziselwa ukunquma i-offset, ubizwa ngento equkethe ukubekwa kwe-popper, ireferensi, kanye ne-popper rects njengempikiswano yayo yokuqala. Into eqalisayo inodi ye-DOM idluliswa njengempikiswano yesibili. Umsebenzi kufanele ubuyisele amalungu afanayo anezinombolo ezimbili: .`[skidding, distance]` Ukuze uthole ulwazi olwengeziwe bheka amadokhumenti e-Popper's offset .
`autoClose`	bhula \| umucu	`true`	Lungiselela ukuziphatha kokuvala ngokuzenzakalela kokwehlayo: `true`- okwehliswayo kuzovalwa ngokuchofoza ngaphandle noma ngaphakathi kwemenyu eyehlayo. `false`- okwehliswayo kuzovalwa ngokuchofoza inkinobho yokuguqula nokushaya ngokwenza `hide`noma `toggle`indlela. (Futhi ngeke ivalwe ngokucindezela `esc`ukhiye) `'inside'`- okwehliswayo kuzovalwa (kuphela) ngokuchofoza ngaphakathi kwemenyu eyehlayo. `'outside'`- okwehliswayo kuzovalwa (kuphela) ngokuchofoza ngaphandle kwemenyu eyehlayo.
`popperConfig`	null \| into \| umsebenzi	`null`	Ukuze uguqule ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap, bona ukucushwa kwe-Popper . Uma umsebenzi usetshenziselwa ukudala ukucushwa kwe-Popper, kubizwa ngento equkethe ukucushwa kwe-Popper okuzenzakalelayo kwe-Bootstrap. Ikusiza ukuthi usebenzise futhi uhlanganise okumisiwe nokucushwa kwakho. Umsebenzi kufanele ubuyisele into yokumisa ye-Popper.

Ukusebenzisa umsebenzi nge`popperConfig`

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

Izindlela

Indlela	Incazelo
`toggle`	Iguqula imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
`show`	Ibonisa imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
`hide`	Ifihla imenyu eyehlayo ye-navbar enikeziwe noma ukuzulazula okunethebhu.
`update`	Ibuyekeza indawo yokudonsela phansi kwe-elementi.
`dispose`	Icekela phansi i-elementi. (Isusa idatha egciniwe kusici se-DOM)
`getInstance`	Indlela emile ekuvumela ukuthi uthole isibonelo sokwehla esihlotshaniswa nento ye-DOM, ungayisebenzisa kanje:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Indlela emile ebuyisela isenzakalo okwehlayo esihlobene nento ye-DOM noma idale entsha uma kwenzeka ingaqaliswanga. Ungayisebenzisa kanje:`bootstrap.Dropdown.getOrCreateInstance(element)`

Imicimbi

Yonke imicimbi yokudonsela phansi idutshulwa ku-elementi yokuguqula bese ikhishwa amabhamuza. Ngakho-ke ungakwazi ukwengeza abalaleli bomcimbi kusici .dropdown-menuesingumzali. hide.bs.dropdownfuthi hidden.bs.dropdownimicimbi clickEventinesici (kuphela uma uhlobo lomcimbi wangempela luyi click) equkethe Into Yomcimbi yomcimbi wokuchofoza.

Indlela	Incazelo
`show.bs.dropdown`	Imililo ngokushesha lapho indlela yesibonelo sombukiso ibizwa.
`shown.bs.dropdown`	Kuxoshwe lapho okwehliswayo kwenziwe kwabonakala kumsebenzisi futhi ukuguqulwa kwe-CSS kuqediwe.
`hide.bs.dropdown`	Imililo ngokushesha lapho indlela yokufihla isibiziwe.
`hidden.bs.dropdown`	Kuxoshwe lapho okwehliswayo kuqedile ukufihlwa kumsebenzisi futhi ukuguqulwa kwe-CSS kuqediwe.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Okwehliswayo

Uhlolojikelele

Ukufinyeleleka

Izibonelo

Inkinobho eyodwa

Inkinobho yokuhlukanisa

Ukulinganisa

Okwehliswayo okumnyama

Izikhombisi-ndlela

I-RTL

Ukwehliswa

I-Droright

I-Dropleft

Izinto zemenyu

Iyasebenza

Ikhutshaziwe

Ukuqondanisa imenyu

Ukuqondanisa okusabelayo

Izinketho zokuqondanisa

Okuqukethwe kwemenyu

Izihloko

Abahlukanisi

Umbhalo

Amafomu

Vala ngokuzenzakalela ukuziphatha

Sass

Okuguquguqukayo

Imiksi

Ukusetshenziswa

Ngezibaluli zedatha

Nge-JavaScript

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

Izinketho

Ukusebenzisa umsebenzi nge`popperConfig`

Izindlela

Imicimbi

Okwehliswayo

Uhlolojikelele

Ukufinyeleleka

Izibonelo

Inkinobho eyodwa

Inkinobho yokuhlukanisa

Ukulinganisa

Okwehliswayo okumnyama

Izikhombisi-ndlela

I-RTL

Ukwehliswa

I-Droright

I-Dropleft

Izinto zemenyu

Iyasebenza

Ikhutshaziwe

Ukuqondanisa imenyu

Ukuqondanisa okusabelayo

Izinketho zokuqondanisa

Okuqukethwe kwemenyu

Izihloko

Unhlokweni owehlayo

Abahlukanisi

Umbhalo

Amafomu

Izinketho zokwehlisa

Vala ngokuzenzakalela ukuziphatha

Sass

Okuguquguqukayo

Imiksi

Ukusetshenziswa

Ngezibaluli zedatha

Nge-JavaScript

data-bs-toggle="dropdown"kusadingeka

Izinketho

Ukusebenzisa umsebenzi ngepopperConfig

Izindlela

Imicimbi

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

Ukusebenzisa umsebenzi nge`popperConfig`