Buuka ku bigambo ebikulu Buuka ku docs navigation
in English

Ebintu ebigwa wansi

Toggle contextual overlays okulaga enkalala z'enkolagana n'ebirala ne Bootstrap dropdown plugin.

Ku muko guno

Okulaba okutwalira awamu

Dropdowns zikyusibwakyusibwa, contextual overlays okulaga enkalala z'enkolagana n'ebirala. Zikolebwa nga zikwatagana ne Bootstrap dropdown JavaScript plugin erimu. Zikyusibwakyusibwa nga zinyiga, so si nga ziwuubaala; kino kusalawo kwa dizayini mu bugenderevu .

Dropdowns zizimbibwa ku tterekero ly’ebitabo ery’ekibiina eky’okusatu, Popper , ekiwa ekifo ekikyukakyuka n’okuzuula ekifo eky’okulaba. Kakasa nti ossaamu popper.min.js nga tonnaba kukola JavaScript ya Bootstrap oba kozesa bootstrap.bundle.min.js/ bootstrap.bundle.jserimu Popper. Popper tekozesebwa kuteeka dropdowns mu navbars wadde nga dynamic positioning tekyetaagisa.

Okutuuka ku bantu

Omutindo gwa WAI ARIArole="menu" gutegeeza widget entuufu , naye kino kyetongodde ku menu eziringa enkola ezitandikawo ebikolwa oba emirimu. Menyu za ARIA zisobola okubeeramu ebintu bya menu byokka, ebintu bya menu eby’akabokisi akalaga, ebintu bya menu bya button ya radio, ebibinja bya button za radio, ne sub-menus.

Ku luuyi olulala, ebigwa bya Bootstrap bikoleddwa okuba eby’enjawulo era nga bikozesebwa mu mbeera ez’enjawulo n’ensengeka z’obubonero. Okugeza, kisoboka okukola ebifo ebikka ebirimu ebiyingizibwa ebirala n’ebifuga foomu, gamba ng’ennimiro z’okunoonya oba foomu z’okuyingira. Olw'ensonga eno, Bootstrap tesuubira (oba okwongera mu ngeri ey'otoma) ekintu kyonna ku rolen'ebintu aria-ebyetaagisa ku menu za ARIA entuufu . Abawandiisi bajja kuba balina okussaamu ebifaananyi bino ebisingawo ebitongole bennyini.

Naye, Bootstrap eyongerako obuwagizi obuzimbibwamu ku nkolagana za menu ya keyboard ezisinga obungi eza bulijjo, gamba ng’obusobozi okutambula mu .dropdown-itembintu ssekinnoomu ng’okozesa ebisumuluzo bya cursor n’okuggalawo menu ESCn’ekisumuluzo.

Eby’okulabirako

Zinga toggle ya dropdown (button yo oba link yo) ne dropdown menu munda mu .dropdown, oba elementi endala elangirira position: relative;. Dropdowns zisobola okutandika okuva <a>oba <button>elements okusobola okutuukana obulungi ku byetaago byo ebiyinza okubaawo. Ebyokulabirako ebiragiddwa wano bikozesa <ul>ebintu eby’amakulu we kisaanidde, naye obubonero obw’ennono buwagirwa.

Butaamu emu

Single yonna .btnesobola okufuulibwa dropdown toggle nga waliwo enkyukakyuka mu markup. Laba engeri gy’oyinza okuziteeka ku nkola n’ebintu byombi <button>:

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

Era nga waliwo <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>

Ekisinga obulungi kino osobola okukikola ne button variant yonna, naawe:

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

Okugabanyaamu bbaatuuni

Mu ngeri y’emu, tonda split button dropdowns nga kumpi markup y’emu nga button emu dropdowns, naye nga kwogasse .dropdown-toggle-splitfor for proper spacing around the dropdown caret.

Tukozesa kiraasi eno ey’enjawulo okukendeeza ku horizontal paddingku buli ludda lwa caret ebitundu 25% n’okuggyawo margin-leftthat’s added for regular button dropdowns. Enkyukakyuka ezo ez’enjawulo zikuuma caret ng’eri wakati mu bbaatuuni eyawuddwamu era ziwa ekifo ky’okukuba eky’obunene obutuufu okumpi ne bbaatuuni enkulu.

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

Okugerageranya obunene

Ebintu ebikka wansi bikola ne butaamu eza sayizi zonna, omuli obutambi obugwa wansi obusookerwako n’obw’enjawulo.

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

Ebiwujjo ebiddugavu

Londa mu dropdowns enzirugavu okukwatagana ne navbar enzirugavu oba custom style ng'ogatta .dropdown-menu-darkku eriwo .dropdown-menu. Tewali nkyukakyuka yeetaagibwa ku bintu ebikka wansi.

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

Era okugiteeka okukozesa mu 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>

Endagiriro

RTL

Endagiriro ziraga endabirwamu nga okozesa Bootstrap mu RTL, amakulu .dropstartgajja kulabika ku ludda olwa ddyo.

Okugwa wansi

Trigger dropdown menus waggulu wa elements nga oyongera .dropupku elementi omuzadde.

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

Eddembe ly’okutonnya

Trigger dropdown menus ku ddyo w'ebintu nga oyongera .dropendku elementi omuzadde.

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

Okutonnya

Trigger dropdown menus ku kkono w'ebintu nga oyongera .dropstartku elementi omuzadde.

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

Osobola okukozesa <a>oba <button>elements nga ebintu ebikka wansi.

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

Osobola n'okukola ebintu ebitali bikwatagana ne .dropdown-item-text. Wulira nga oli waddembe okwongera sitayiro n'ebikozesebwa ebya custom CSS oba ebiwandiiko.

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

Obunyiikivu

Yongera .activeku bintu ebiri mu dropdown okubikola sitayiro nga active . Okutuusa embeera ekola ku tekinologiya ayamba, kozesa aria-currentekintu — ng’okozesa pageomuwendo gw’olupapula oluliwo kati, oba trueku kintu ekiriwo kati mu kibinja.

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

Obutesobola

Yongera .disabledku bintu mu dropdown okubikola sitayiro nga ebilema .

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

Nga bwekiba, menu egwa wansi eteekebwa mu ngeri ey’otoma 100% okuva waggulu ne ku ludda olwa kkono olwa muzadde waayo. Kino osobola okukyusa ne .drop*kiraasi z’obulagirizi, naye osobola n’okuzifuga n’ekiraasi z’abakyusa endala.

Okwongera .dropdown-menu-endku a .dropdown-menuku ddyo sengeka menu egwa wansi. Endagiriro zibeera mu ndabirwamu nga okozesa Bootstrap mu RTL, amakulu .dropdown-menu-endgajja kulabika ku ludda olwa kkono.

Emitwe gigulumivu! Dropdowns ziteekebwa mu kifo okwebaza Popper okuggyako nga ziri mu 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>

Okulaganya okuddamu

Bw’oba ​​oyagala okukozesa okulaganya okuddamu, lemesa okuteeka mu kifo ekikyukakyuka ng’ogattako data-bs-display="static"ekintu era okozese ebika by’enkyukakyuka eziddamu.

Okukwataganya ku ddyo menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongerako .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>

Okukwataganya ku kkono menu egwa wansi n'ekifo ekiweereddwa oba ekinene, yongera .dropdown-menu-endne .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>

Weetegereze nti teweetaaga kwongerako kintu data-bs-display="static"ku buttons ezikka mu navbars, okuva Popper bwetakozesebwa mu navbars.

Enkola z’okulaganya

Nga otwala ebisinga ku by’okulonda ebiragiddwa waggulu, wuuno akatono aka sinki y’omu ffumbiro demo ey’enjawulo ez’okulaga okugwa wansi mu kifo kimu.

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

Ebirimu mu menu

Emitwe gy’omutwe

Okwongerako omutwe okuwandiika ebitundu by'ebikolwa mu menu yonna ekka.

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

Abagabanya ebintu

Yawula ebibinja by’ebintu ebikwatagana mu menu n’omugabanya.

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

Okuwandiika obubaka

Teeka ekiwandiiko kyonna eky'eddembe munda mu menu egwa wansi n'ebiwandiiko era kozesa ebikozesebwa mu kuteeka ebanga . Weetegereze nti ojja kwetaaga sitayiro endala ez'okugerageranya okuziyiza obugazi bwa menu.

Ebiwandiiko ebimu eby'okulabirako ebikulukuta mu ddembe munda mu menu egwa wansi.

Era kino kye kiwandiiko ekisingako ekyokulabirako.

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

Ffoomu

Teeka foomu munda mu menu egwa wansi, oba gifuule mu menu egwa wansi, era kozesa margin oba padding utilities okugiwa ekifo ekibi ky’oyagala.

Ebipya okwetoloola wano? Wewandiise Weerabidde ekigambo ky'okuyingira? 
<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>

Kozesa data-bs-offsetoba data-bs-referenceokukyusa ekifo ekigenda okukka.

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

Nga bwe kibadde, menu egwa eggalwa nga onyiga munda oba ebweru wa menu egwa. Osobola okukozesa autoCloseeky'okulonda okukyusa enneeyisa eno ey'okugwa.

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

Enkyukakyuka ku byonna ebigwa wansi:

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

Enkyukakyuka z'okugwa kw'ekizikiza :

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

Enkyukakyuka za carets ezesigamiziddwa ku CSS eziraga enkolagana ya dropdown:

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

Ebirungo ebitabuddwa

Mixins zikozesebwa okukola carets ezesigamiziddwa ku CSS era zisobola okusangibwa mu 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;
    }
  }
}

Enkozesa

Okuyita mu data attributes oba JavaScript, plugin egwa wansi ekyusa ebirimu ebikwekebwa (dropdown menus) nga ekyusa .showkiraasi ku muzadde .dropdown-menu. Attribute data-bs-toggle="dropdown"yesigamyeko okuggalawo dropdown menus ku ddaala ly'enkola, kale kirungi bulijjo okugikozesa.

Ku byuma ebisobola okukwata, okuggulawo ekintu ekigwa wansi kwongera ebikwaata ebitalimu kintu kyonna mouseoverku baana ab’amangu <body>ab’ekintu. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , ekiyinza okulemesa tap wonna ebweru w'okugwa okuva ku kutandika koodi eggalawo okugwa. Ekifo ekikka wansi bwe kimala okuggalwa, ebikwaso bino ebirala ebitaliiko kintu kyonna mouseoverbiggyibwawo.

Okuyita mu bikwata ku data

Yongera data-bs-toggle="dropdown"ku link oba button okukyusa 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>

Okuyita mu JavaScript

Kuba ku bigenda okukka wansi ng’oyita mu JavaScript:

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

Nga tofuddeeyo oba oyita dropdown yo ng'oyita mu JavaScript oba mu kifo ky'ekyo okozesa data-api, data-bs-toggle="dropdown"bulijjo kyetaagisa okubeerawo ku dropdown's trigger element.

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-bs-, nga mu data-bs-offset="". Kakasa nti okyusa ekika kya case eky'erinnya ly'okulonda okuva ku camelCase okudda ku kebab-case ng'oyisa eby'okulonda ng'oyita mu data attributes. Okugeza, mu kifo ky’okukozesa data-bs-autoClose="false", kozesa data-bs-auto-close="false".

Erinnya Okuwandiika Okukosamu Okunnyonnyola
boundary olunyiriri | ekintu 'clippingParents' Ensalo y'okuziyiza okujjula eya menu egwa wansi (ekola ku Popper's preventOverflow modifier yokka). Nga bwekiba 'clippingParents'era esobola okukkiriza HTMLElement reference (nga eyita mu JavaScript yokka). Okumanya ebisingawo laba Popper's detectOverflow docs .
reference olunyiriri | elementi | ekintu 'toggle' Ekintu ekijuliziddwa mu menu egwa wansi. Akkiriza emiwendo gya 'toggle', 'parent', ekijuliziddwa HTMLElement oba ekintu ekiwa getBoundingClientRect. Okumanya ebisingawo laba Popper's constructor docs ne virtual element docs .
display akaguwa 'dynamic' Nga bwekiba, tukozesa Popper ku dynamic positioning. Kino lemesa nga olina static.
offset ensengekera | olunyiriri | enkola [0, 2]

Offset ya dropdown okusinziira ku target yaayo. Osobola okuyisa olunyiriri mu data attributes nga zirina emiwendo egyawuddwamu comma nga:data-bs-offset="10,20"

Omulimu bwe gukozesebwa okuzuula offset, guyitibwa n’ekintu ekirimu popper placement, reference, ne popper rects nga argument yaayo esooka. Ekintu ekivaako DOM node kiyisibwa nga ensonga eyokubiri. Omulimu gulina okuzzaayo ensengekera erimu ennamba bbiri: .[skidding, distance]

Okumanya ebisingawo laba Popper's offset docs .
autoClose boolean | akaguwa true

Tegeka enneeyisa y'okuggalawo mu ngeri ey'obwengula ey'ekintu ekikka wansi:

  • true- ekintu ekikka wansi kijja kuggalwa nga onyiga ebweru oba munda mu menu egwa wansi.
  • false- dropdown ejja kuggalwa nga onyiga ku toggle button era nga oyita mu ngalo hideoba toggleenkola. (Era tegenda kuggalwa nga onyiga escekisumuluzo)
  • 'inside'- ekintu ekikka wansi kijja kuggalwa (kwokka) nga onyiga munda mu menu egwa wansi.
  • 'outside'- ekintu ekikka wansi kijja kuggalwa (kwokka) nga onyiga ebweru wa menu egwa wansi.
popperConfig null | ekintu | enkola null

Okukyusa ensengeka ya Popper eya Bootstrap esookerwako, laba ensengeka ya Popper .

Omulimu bwe gukozesebwa okukola ensengeka ya Popper, guyitibwa n'ekintu ekirimu ensengeka ya Popper eya Bootstrap eya bulijjo. Kikuyamba okukozesa n'okugatta ekisookerwako n'ensengeka yo. Omulimu gulina okuzzaayo ekintu eky'okusengeka ekya Popper.

Okukozesa function nepopperConfig

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

Enkola

Engeri Okunnyonnyola
toggle Ekyusa menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
show Eraga menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
hide Ekweka menu egwa wansi eya navbar oba tabbed navigation eweereddwa.
update Ezza obuggya ekifo ky'ekintu ekigwa wansi.
dispose Esaanyaawo ekintu ekigwa wansi. (Eggyawo data eterekeddwa ku elementi ya DOM)
getInstance Enkola ya static ekusobozesa okufuna dropdown instance ekwatagana ne DOM element, osobola okugikozesa nga eno:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Enkola ya static ezzaayo ekifaananyi ekikka ekikwatagana n'ekintu kya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo:bootstrap.Dropdown.getOrCreateInstance(element)

Ebibaddewo

Ebintu byonna ebigwa wansi bikubwa ku elementi ekyukakyuka oluvannyuma ne bifuumuulwa waggulu. Kale osobola n'okugattako abawuliriza b'ebibaddewo ku .dropdown-menu's parent element. hide.bs.dropdownera hidden.bs.dropdownebibaddewo birina ekintu clickEvent(nga ekika ky'Ekibaddewo ekyasooka kiri click) ekirimu Ekintu ky'Ekibaddewo eky'ekintu eky'okunyiga.

Engeri Okunnyonnyola
show.bs.dropdown Ekuba amangu ddala nga enkola ya show instance eyitiddwa.
shown.bs.dropdown Ekubwa nga dropdown ekoleddwa okulabika eri omukozesa era nga enkyukakyuka za CSS ziwedde.
hide.bs.dropdown Ekuba amangu ddala nga enkola ya hide instance eyitiddwa.
hidden.bs.dropdown Ekubwa nga dropdown ewedde okukwekebwa okuva eri omukozesa era enkyukakyuka za CSS ziwedde. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})