in English

Swilo leswi nga ehansi

Cinca swifunengeto swa mongo ku kombisa minxaxamelo ya swihlanganisi na swin’wana hi xiengetelo xa Bootstrap lexi nga ehansi.

Eka tluka leri

Nkatsakanyo

Swilo leswi nga ehansi swi nga cinca-cinca, swifunengeto swa mongo swo kombisa minxaxamelo ya swihlanganisi na swin’wana. Va endliwe va tirhisana hi xiengetelo xa JavaScript xa Bootstrap lexi nga ehansi lexi katsekaka. Va cinca-cinca hi ku tsindziyela, ku nga ri hi ku hover; lexi i xiboho xa ku dizayina hi vomu .

Ti dropdowns ti akiwile eka layiburari ya munhu wa vunharhu, Popper , leyi nyikaka xiyimo lexi cinca-cincaka na ku kumiwa ka viewport. Tiyisisa leswaku u katsa popper.min.js emahlweni ka JavaScript ya Bootstrap kumbe u tirhisa bootstrap.bundle.min.js/ bootstrap.bundle.jsleyi nga na Popper. Popper ayi tirhisiwi ku veka ti dropdowns eka ti navbars though tani hileswi dynamic positioning yinga lavekiki.

Ku fikelela

Mpimo wa WAI ARIA wu hlamusela role="menu"xitirhisiwa xa xiviri , kambe leswi swi kongomile eka timenyu to fana na xitirhisiwa leti hlohlotelaka swiendlo kumbe mintirho. Timenyu ta ARIA ti nga va na ntsena swilo swa menyu, swilo swa menyu ya bokisi ro kambela, swilo swa menyu ya buti ya xiya-ni-moya, mintlawa ya swikomba-nkarhi swa xiya-ni-moya, na timenyu letitsongo.

Ti dropdown ta Bootstrap, hi hala tlhelo, ti endleriwe ku va ta xivumbeko xa le henhla naswona ti tirha eka swiyimo swo hambana na swivumbeko swa markup. Hi xikombiso, swa koteka ku endla swilo leswi nga ehansi leswi nga ni swilo leswi engetelekeke leswi nghenisiwaka ni swilawuri swa tifomo, swo tanihi tinsimu to lavisisa kumbe tifomo to nghena. Hi xivangelo lexi, Bootstrap a yi langutelanga (kumbe ku engetela hi ku tisungulela) swin’wana swa swihlawulekisi swa rolena aria-leswi lavekaka eka timenyu ta ntiyiso ta ARIA . Vatsari va ta boheka ku katsa swihlawulekisi leswi swo kongoma swinene hi voxe.

Hambiswiritano, Bootstrap yi engetela nseketelo lowu akiweke eka ku tirhisana ko tala ka menyu ya khibhodi ya ntolovelo, ku fana ni vuswikoti byo famba eka .dropdown-itemswiaki ha xin’we hi ku tirhisa swilotlelo swa xikombiso ni ku pfala menyu hi ESCxilotlelo.

Swikombiso

Pfuxeta toggle ya dropdown (button ya wena kumbe link) na dropdown menu endzeni ka .dropdown, kumbe element yin’wana leyi tivisa position: relative;. Dropdowns yinga hlohloteriwa kusuka eka <a>kumbe <button>elements ku antswa ku fambelana na swilaveko swa wena leswinga vaka kona. Swikombiso leswi kombisiweke laha swi tirhisa <ul>swiaki swa semantiki laha swi faneleke, kambe ku fungha ka ntolovelo ka seketeriwa.

Xibamu xin’we

Single yin’wana na yin’wana yi .btnnga hundzuriwa dropdown toggle hi ku cinca kun’wana ka markup. Hi leyi ndlela leyi u nga swi vekaka ha yona leswaku swi tirha hi <button>swiaki swimbirhi:

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

Naswona hi <a>swiaki:

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

Xiphemu lexinene ngopfu hi leswaku u nga endla leswi hi muxaka wihi na wihi wa button, na wena:

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

Ku avanyisa buti

Hilaha ku fanaka, endla swikomba-nkarhi leswi avaneke leswi nga ni swikombiso leswi fanaka ni leswi nga ehansi ka buti yin’we, kambe hi ku engeteriwa ka .dropdown-toggle-splitleswaku ku va ni ku hambana loku faneleke ku rhendzela caret leyi nga ehansi.

Hi tirhisa tlilasi leyi yo engetela ku hunguta horizontal paddingeka matlhelo hamambirhi ya caret hi 25% na ku susa margin-leftthat’s added for regular button dropdowns. Ku cinca koloko loku engetelekeke ku endla leswaku caret yi ri exikarhi eka buti leyi avaneke naswona yi nyika ndhawu yo ba leyi nga ni sayizi leyi faneleke swinene ekusuhi ni buti leyikulu.

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

Ku pima mpimo

Swikomba-nkarhi leswi nga ehansi swi tirha hi swikomba-nkarhi swa vukulu hinkwabyo, ku katsa ni swikomba-nkarhi leswi nga ta va kona ni leswi avaneke.

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

Swilo leswi nga ehansi ka munyama

Hlawula eka ti dropdown ta ntima ku fambisana na navbar ya ntima kumbe xitayili xa ntolovelo hi ku engetela .dropdown-menu-darkeka leyi nga kona .dropdown-menu. Ku hava ku cinca loku lavekaka eka swilo leswi nga ehansi.

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

Naswona ku yi veka leswaku yi tirhisiwa eka 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>

Swiletelo

RTL

Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka RTL, leswi vulaka leswaku .dropstartswi ta humelela eka tlhelo ra xinene.

Ku wisa

Pfuxeta timenyu leti rhetaka ehenhla ka swiaki hi ku engetela .dropupeka xiaki xa mutswari.

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

Xithopo xa xirhendzevutani

Pfuxeta timenyu leti rhetaka etlhelo ra xinene ra swiaki hi ku engetela .dropendeka xiaki xa mutswari.

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

Xitombo xa drop

Pfuxeta timenyu leti rhetaka etlhelo ra ximatsi ra swiaki hi ku engetela .dropstarteka xiaki xa mutswari.

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

U nga tirhisa <a>kumbe <button>swiaki tanihi swilo leswi nga ehansi.

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

U nga ha tlhela u endla swilo leswi nga riki swa vuhlanganisi hi .dropdown-item-text. Titwele u ntshunxekile ku xitayili ku ya emahlweni hi CSS ya ntolovelo kumbe switirhisiwa swa matsalwa.

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

Hanya

Engetela .activeeka swilo leswi nga eka dropdown ku swi xitayili tanihi leswi tirhaka . Ku hundzisela xiyimo lexi tirhaka eka thekinoloji yo pfuneta, tirhisa aria-currentxihlawulekisi — hi ku tirhisa pagenkoka wa tluka ra sweswi, kumbe trueeka nchumu wa sweswi eka sete.

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

Lamarile

Engetelani .disabledeka swilo leswi nga eka dropdown ku swi xitayili tanihi leswi nga tirhiki .

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

Hi ku tiyimisela, menyu leyi nga ehansi yi vekiwa hi yoxe hi 100% ku suka ehenhla ni le tlhelo ra ximatsi ra mutswari wa yona. U nga cinca leswi hi .drop*titlilasi ta nkongomiso, kambe u nga ha tlhela u ti lawula hi titlilasi to engetela ta vacinci.

Engetela .dropdown-menu-endeka a .dropdown-menuku ya exineneni ringanisa menyu leyi nga ehansi. Swiletelo swi kombisiwa hi xivoni loko u tirhisa Bootstrap eka RTL, leswi vulaka leswaku .dropdown-menu-endswi ta humelela eka tlhelo ra ximatsi.

Tinhloko ta le henhla! Ti dropdowns ti vekiwa hi ku khensa Popper handle ka loko ti ri eka 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>

Ku ringanisa loku hlamulaka

Loko u lava ku tirhisa ku ringanisa loku hlamulaka, tshikisa ku veka loku cinca-cincaka hi ku engetela data-bs-display="static"xihlawulekisi ivi u tirhisa titlilasi ta ku cinca-cinca loku hlamulaka.

Ku ringanisa exineneni menyu leyi nga ehansi ni ndhawu yo wisa leyi nyikiweke kumbe leyikulu, engetela .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>

Ku ringanisa menyu ya le hansi ya ximatsi.dropdown-menu-end ni ndhawu yo wisa leyi nyikiweke kumbe leyikulu, engetela na .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>

Xiya leswaku a wu lavi ku engetela data-bs-display="static"xihlawulekisi eka swikomba-nkarhi eka ti-navbar, tanihi leswi Popper yi nga tirhisiwiki eka ti-navbar.

Swihlawulekisi swa ku ringanisa

Ku teka vunyingi bya swihlawulekisi leswi kombisiweke laha henhla, hi leyi demo leyitsongo ya sinki ya khixi ya swihlawulekisi swo hambana-hambana swa ku ringanisa ehansi endhawini yin’we.

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

Tinhlokomhaka

Engetela nhlokomhaka ku lebula swiyenge swa swiendlo eka menyu yihi na yihi leyi rhetaka.

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

Swihambanisi

Hlukanisa mintlawa ya swilo swa menyu leswi fambelanaka hi xihambanisi.

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

Tsalwa

Veka tsalwa rihi na rihi ra xivumbeko xa mahala endzeni ka menyu leyi nga ehansi leyi nga ni tsalwa naswona tirhisa switirhisiwa swa ku hambana . Xiya leswaku u ta lava switayele leswi engetelekeke swo pima mpimo leswaku u sivela ku anama ka menyu.

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

Swivumbeko

Veka fomo endzeni ka menyu leyi nga ehansi, kutani u yi endla menyu leyi nga ehansi, naswona tirhisa switirhisiwa swa margin kumbe padding ku yi nyika ndhawu yo biha leyi u yi lavaka.

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

Tirhisa data-bs-offsetkumbe data-bs-referenceku cinca ndhawu ya dropdown.

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

Auto close mahanyelo

Hi ku tiyimisela, menyu leyi nga ehansi yi pfala loko u tsindziyela endzeni kumbe ehandle ka menyu leyi nga ehansi. U nga tirhisa autoClosenhlawulo ku cinca mahanyelo lawa ya xihlamusela-marito.

<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

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swa swilo hinkwaswo leswi nga ehansi:

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

Swilo leswi cinca-cincaka swa dropdown ya munyama : .

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

Swilo leswi cinca-cincaka swa tikhereti leti simekiweke eka CSS leti kombisaka ku tirhisana ka dropdown:

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

Ti- mixins

Ti mixins ti tirhisiwa ku tumbuluxa ti carets leti simekiweke eka CSS naswona tinga kumeka eka 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;
    }
  }
}

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, xiengetelo lexi nga ehansi xi cinca-cinca swilo leswi fihliweke (timenyu leti nga ehansi) hi ku cinca-cinca .showtlilasi eka mutswari .dropdown-menu. Xihlawulekisi data-bs-toggle="dropdown"xi tshembheka eka ku pfala timenyu to rhelela eka xiyimo xa xitirhisiwa, kutani i mianakanyo ya kahle ku tshama u xi tirhisa.

Eka switirhisiwa leswi pfunaka ku khumba, ku pfula dropdown swi engetela swikhomela-ndhawu leswi nga riki na nchumu mouseovereka vana va le kusuhi va <body>elemente. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , leswi handle ka sweswo a swi ta sivela ku pompa kun’wana ni kun’wana ehandle ka dropdown ku pfuxa khodi leyi pfala dropdown. Loko dropdown yi pfariwile, swikhomela-ndhawu leswi leswi engetelekeke leswi nga riki na nchumu mouseoverswa susiwa.

Hi ku tirhisa swihlawulekisi swa data

Engetela data-bs-toggle="dropdown"eka link kumbe button ku cinca-cinca dropdown.

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

Hi ku tirhisa JavaScript

Fonela swilo leswi nga ehansi hi ku tirhisa JavaScript:

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

`data-bs-toggle="dropdown"`swa ha laveka

Ku nga khathariseki leswaku u vitana dropdown ya wena hi ku tirhisa JavaScript kumbe ematshan’wini ya sweswo u tirhisa data-api, data-bs-toggle="dropdown"minkarhi hinkwayo swi laveka ku va kona eka elemente ya trigger ya dropdown.

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-offset="". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka camelCase ku ya eka kebab-case loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, ematshan’weni yo tirhisa data-bs-autoClose="false", tirhisa data-bs-auto-close="false".

Vito	Muxaka	Ku tlula	Nhlamuselo
`boundary`	ntambhu ya xirhendzevutani \| nchumu	`'clippingParents'`	Ndzilakano wa xipimelo xa ku khuluka wa menyu leyi nga ehansi (wu tirha ntsena eka mucinci wa PreventOverflow wa Popper). Hi ku tiyimisela i `'clippingParents'`naswona yi nga amukela xikombo xa HTMLElement (hi ku tirhisa JavaScript ntsena). Ku kuma vuxokoxoko byo tala languta eka Popper's detectOverflow docs .
`reference`	ntambhu ya xirhendzevutani \| xiaki xa \| nchumu	`'toggle'`	Xiphemu xa xikombo xa menyu leyi nga ehansi. Amukela mimpimo ya `'toggle'`, `'parent'`, xikombo xa HTMLElement kumbe nchumu lowu nyikaka `getBoundingClientRect`. Ku kuma vuxokoxoko byo tala languta eka tidokisi ta muaki ta Popper na tidokisi ta elemente ya xiviri .
`display`	ntambu	`'dynamic'`	Hi ku tiyimisela, hi tirhisa Popper eka xiyimo lexi cinca-cincaka. Tirhisa leswi hi `static`.
`offset`	xirhendzevutani \| ntambhu ya xirhendzevutani \| ntirho	`[0, 2]`	Offset ya dropdown loko yi pimanisiwa na target ya yona. U nga hundza ntambhu eka swihlawulekisi swa datha hi mimpimo leyi hambanisiweke hi khoma ku fana na:`data-bs-offset="10,20"` Loko ntirho wu tirhisiwa ku kumisisa offset, wu vitaniwa hi nchumu lowu nga na popper placement, reference, na popper rects tani hi argument ya wona yo sungula. Node ya DOM ya elemente leyi hlohlotelaka yi hundziseriwa tanihi argument ya vumbirhi. Ntirho wu fanele ku vuyisa array leyi nga na tinomboro timbirhi: .`[skidding, distance]` Ku kuma vuxokoxoko byo tala languta eka Popper's offset docs .
`autoClose`	xitsonga xitsonga \| ntambu	`true`	Hlela mahanyelo ya auto close ya dropdown: `true`- dropdown yi ta pfala hi ku tikhoma ehandle kumbe endzeni ka dropdown menu. `false`- dropdown yi ta pfala hi ku tikhoma toggle button na manually calling `hide`kumbe `toggle`method. (Naswona a yi nge pfaliwi hi ku tshikilela `esc`key) `'inside'`- dropdown yi ta pfala (ntsena) hi ku tikhoma endzeni ka dropdown menu. `'outside'`- dropdown yi ta pfala (ntsena) hi ku tikhoma ehandle ka dropdown menu.
`popperConfig`	null \| nchumu \| ntirho	`null`	Ku cinca xivumbeko xa Popper xa xiviri xa Bootstrap, vona xivumbeko xa Popper . Loko ntirho wu tirhisiwa ku tumbuluxa xivumbeko xa Popper, wu vitaniwa hi nchumu lowu nga na xivumbeko xa Popper xa xiviri xa Bootstrap. Swi ku pfuna ku tirhisa ni ku hlanganisa leswi nga riki swa xiviri ni xivumbeko xa wena. Ntirho wu fanele ku vuyisa nchumu wa vuhlanganisi bya Popper.

Ku tirhisa ntirho na`popperConfig`

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

Maendlelo

Ndlela	Nhlamuselo
`toggle`	Ku cinca-cinca menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`show`	Ku kombisa menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`hide`	Ku fihla menyu leyi nga ehansi ya navbar leyi nyikiweke kumbe ku famba-famba loku nga ni tithebhu.
`update`	Ku pfuxeta xiyimo xa xiaki xa xirhendzevutani.
`dispose`	Ku herisa dropdown ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
`getInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa dropdown lexi fambelanaka na elemente ya DOM, u nga xi tirhisa hi ndlela leyi:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	Ndlela ya static leyi vuyisaka xikombiso xa dropdown lexi fambelanaka na elemente ya DOM kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi:`bootstrap.Dropdown.getOrCreateInstance(element)`

Swiendlakalo

Swiendlakalo hinkwaswo swa dropdown swi duvuriwa eka toggling element ivi swi bubbled up. Kutani u nga ha tlhela u engetela vayingiseri va swiendlakalo eka .dropdown-menu's parent element. hide.bs.dropdownnaswona hidden.bs.dropdownswiendlakalo swi na clickEventnhundzu (ntsena loko muxaka wa Xiendlakalo wo sungula wu ri click) lowu nga na Nchumu wa Xiendlakalo wa xiendlakalo xa ku tsindziyela.

Ndlela	Nhlamuselo
`show.bs.dropdown`	Yi pfurha hi ku hatlisa loko ku vitaniwa ndlela ya xikombiso xa nkombiso.
`shown.bs.dropdown`	Ku pfuriwa loko dropdown yi endliwile yi vonaka eka mutirhisi naswona ku cinca ka CSS ku herile.
`hide.bs.dropdown`	Yi pfurha hi ku hatlisa loko ndlela ya hide instance yi vitaniwile.
`hidden.bs.dropdown`	Ku pfuriwa loko dropdown yi hetile ku tumbetiwa eka mutirhisi naswona ku cinca ka CSS ku herile.

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

Swilo leswi nga ehansi

Nkatsakanyo

Ku fikelela

Swikombiso

Xibamu xin’we

Ku avanyisa buti

Ku pima mpimo

Swilo leswi nga ehansi ka munyama

Swiletelo

RTL

Ku wisa

Xithopo xa xirhendzevutani

Xitombo xa drop

Swilo swa menyu

Hanya

Lamarile

Ku ringanisiwa ka menyu

Ku ringanisa loku hlamulaka

Swihlawulekisi swa ku ringanisa

Swilo leswi nga endzeni ka menyu

Tinhlokomhaka

Swihambanisi

Tsalwa

Swivumbeko

Auto close mahanyelo

Sass

Swilo leswi cinca-cincaka

Ti- mixins

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Hi ku tirhisa JavaScript

`data-bs-toggle="dropdown"`swa ha laveka

Swihlawulekisi

Ku tirhisa ntirho na`popperConfig`

Maendlelo

Swiendlakalo

Swilo leswi nga ehansi

Nkatsakanyo

Ku fikelela

Swikombiso

Xibamu xin’we

Ku avanyisa buti

Ku pima mpimo

Swilo leswi nga ehansi ka munyama

Swiletelo

RTL

Ku wisa

Xithopo xa xirhendzevutani

Xitombo xa drop

Swilo swa menyu

Hanya

Lamarile

Ku ringanisiwa ka menyu

Ku ringanisa loku hlamulaka

Swihlawulekisi swa ku ringanisa

Swilo leswi nga endzeni ka menyu

Tinhlokomhaka

Nhlokomhaka leyi nga ehansi

Swihambanisi

Tsalwa

Swivumbeko

Swihlawulekisi swa dropdown

Auto close mahanyelo

Sass

Swilo leswi cinca-cincaka

Ti- mixins

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Hi ku tirhisa JavaScript

data-bs-toggle="dropdown"swa ha laveka

Swihlawulekisi

Ku tirhisa ntirho napopperConfig

Maendlelo

Swiendlakalo

`data-bs-toggle="dropdown"`swa ha laveka

Ku tirhisa ntirho na`popperConfig`