Di-dropdown tša go theoga

Fetoša dikhupetšo tša diteng bakeng sa go bontšha mananeo a dikgokagano le tše dingwe ka polaka ya go theoga ya Bootstrap.

Letlakaleng le

Kakaretšo

Di-dropdown di ka fetošwa, di-overlay tša diteng tša go bontšha mananeo a dikgokagano le tše dingwe. Di dirilwe gore di be le tirišano ka plugin ya JavaScript ya go theoga ya Bootstrap yeo e akareditšwego. Di fetošwa ka go kgotla, e sego ka go hovering; ye ke phetho ya go hlama yeo e dirilwego ka boomo .

Di-dropdown di agilwe godimo ga bokgobapuku bja mokgatlo wa boraro, Popper , yeo e fago maemo a go fetoga le go utolla lefelo la go lebelela. Kgonthišetša gore o akaretša popper.min.js pele ga JavaScript ya Bootstrap goba o diriša bootstrap.bundle.min.js/ bootstrap.bundle.jsyeo e nago le Popper. Popper ga e šomišwe go bea di-dropdown ka gare ga di-navbar le ge e le go beakanya mo go fetogago go sa nyakege.

Phihlelelo

The WAI ARIA standard defines an actual role="menu"widget , eupša se se itšego go dimenu tša go swana le tirišo tšeo di hlohleletšago ditiro goba mešomo. Dimenu tša ARIA di ka ba le fela diaetheme tša thepo, diaetheme tša thepo ya lepokisi la go hlahloba, diaetheme tša thepo ya konope ya radio, dihlopha tša dikonope tša radio, le dimenu tša ka fasana.

Di-dropdown tša Bootstrap, ka lehlakoreng le lengwe, di hlamilwe go ba tša kakaretšo le go šoma maemong a fapa-fapanego le dibopego tša go swaya. Go fa mohlala, go a kgonega go hlama dithepo te di theogago te di nago le ditseno ta tlaleleto le ditaolo ta diforomo, go swana le mafelo a go nyaka goba diforomo ta go tsena. Ka lebaka le, Bootstrap ga e letele (goba go oketša ka go iketla) efe goba efe ya rolele aria-dika tše di nyakegago bakeng sa dimenu tša nnete tša ARIA . Bangwadi ba tla swanelwa ke go akaretša dika tše tše di lebanyago kudu ka bobona.

Le ge go le bjalo, Bootstrap e tlaleletša thekgo ye e agetšwego ka gare ya bontši bja ditirišano tša thepo ya khiiboto ya maemo, go swana le bokgoni bja go sepela ka .dropdown-itemdielemente ka botee ka go šomiša dinotlelo tša khesara le go tswalela thepo ka ESCsenotlelo.

Mehlala

Phuthelela toggle ya go theoga (konope ya gago goba kgokagano) le thepo ya go theoga ka gare ga .dropdown, goba elemente ye nngwe yeo e tsebagatšago position: relative;. Di-dropdown di ka hlohleletša go tšwa <a>goba <button>dielemente go swanela gakaone dinyakwa tša gago tšeo di ka bago gona. Mehlala ye e bontšhitšwego mo e šomiša <ul>dielemente tša semantiki moo go swanetšego, eupša go swaya ga tlwaelo go a thekgwa.

Konopo e le nngwe

Sefe goba sefe se tee se .btnka fetošetšwa go toggle ya go theoga ka diphetogo tše dingwe tša go swaya. Ke kamoo o ka di beago ka gona go šoma ka <button>dielemente tše dingwe le tše dingwe:

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Le ka <a>dielemente:

html

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Karolo e kaone ke gore o ka dira se ka mohuta ofe goba ofe wa konope, le 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>

Arola konopo

Ka mo go swanago, hlama di-dropdown tša konope ya go arogana ka go nyakile go swana le go swaya mo go swanago le go theoga ga konope e tee, eupša ka tlaleletšo ya .dropdown-toggle-splitbakeng sa sekgoba se se swanetšego go dikologa caret ya go theoga.

Re diriša sehlopha se sa tlaleletšo go fokotša go rapalala paddingka mahlakoreng ka bobedi a caret ka 25% le go tloša margin-leftseo se okeditšwego bakeng sa di-dropdown tša konope tša ka mehla. Diphetogo tšeo tše oketšegilego di boloka caret e le bogareng bja konotswana yeo e arotšwego gomme e nea lefelo la go otla leo le nago le bogolo bjo bo swanetšego kudu kgaufsi le konotswana e kgolo.

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

Go lekanyetša bogolo

Dikonope tša go theoga di šoma ka dikonope tša bogolo ka moka, go akaretšwa dikonope tša go theoga tša go se fetoge le tša go arogana.

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

Di-dropdown tše lefsifsi

Kgetha go dithepo tša go theoga tše lefsifsi go swana le navbar ye lefsifsi goba setaele sa tlwaelo ka go tlaleletša .dropdown-menu-darkgodimo ga ye e lego gona .dropdown-menu. Ga go na diphetogo tše di nyakegago go diaetheme tša go theoga.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Gomme go e bea go šomiša ka gare ga navbar:

html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ditaelo

RTL e le

Directions ba seiponeng ha sebelisa Bootstrap ka RTL, ho bolela .dropstarttla hlaha ka lehlakoreng le letona.

E tsepame

Dira gore thepo ya go theoga e tsepame ka fase ga toggle ka .dropdown-centergodimo ga elemente ya motswadi.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup ya go lahlela

Hlohleletša dimenu tša go theoga ka godimo ga dielemente ka go tlaleletša .dropupgo elemente ya motswadi.

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

Dropup e tsepame

Dira gore thepo ya go theoga e tsepame ka godimo ga toggle ka .dropup-centergodimo ga elemente ya motswadi.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Hlohleletša dimenu tša go theoga ka go le letona la dielemente ka go tlaleletša .dropendgo elemente ya motswadi.

<!-- Default dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropend</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Go thoma ka go theoga

Hlohleletša dimenu tša go theoga ka go la nngele la dielemente ka go tlaleletša .dropstartgo elemente ya motswadi.

<!-- Default dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropstart button -->
<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropstart</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

O ka šomiša <a>goba <button>dielemente bjalo ka diaetheme tša go theoga.

html

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

O ka hlama gape diaetheme tša go theoga tšeo e sego tša tirišano ka .dropdown-item-text. Ikwe o lokologile go setaele go ya pele ka CSS ya tlwaelo goba didirišwa tša sengwalwa.

html

<ul class="dropdown-menu">
  <li><span class="dropdown-item-text">Dropdown item text</span></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>

Mafolofolo

Oketša .activego diaetheme ka go theoga go di setaele bjalo ka tše di šomago . Go fetišetša boemo bjo bo šomago go theknolotši ya go thuša, šomiša aria-currentseka — o šomiša pageboleng bja letlakala la bjale, goba truebakeng sa selo sa bjale ka seteng.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item active" href="#" aria-current="true">Active link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

Šitišitšwe

Oketša .disabledgo diaetheme ka go theoga go di setaele bjalo ka tše di golofetšego .

html

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

Ka go ikemela, thepo ya go theoga e bewa ka go iketla 100% go tšwa godimo le go bapa le lehlakore la nngele la motswadi wa yona. O ka fetola se ka .drop*diklase ta tlhahlo, eupa o ka di laola gape ka diklase ta tlaleleto ta sefetoledi.

Oketša .dropdown-menu-endgo a go ya .dropdown-menugo le letona logaganya thepo ya go theoga. Directions ba seiponeng ha sebelisa Bootstrap ka RTL, ho bolela .dropdown-menu-endtla hlaha ka lehlakoreng le letšehali.

Dihlogo godimo! Di-dropdown di bewa ka lebaka la Popper ntle le ge di le ka gare ga navbar.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu example
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Go logaganya mo go arabelago

Ge o nyaka go šomiša go logaganya ga go arabela, šitiša go beakanya maemo ka go oketša data-bs-display="static"seka gomme o šomiše diklase tša phapano ya go arabela.

Go logaganya ka go le letona thepo ya go theoga le ntlha ya go kgaotša ye e filwego goba ye kgolo, oketša .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Go logaganya thepo ya go theoga ya le letshadi.dropdown-menu-end le ntlha ya go kgaotša ye e filwego goba ye kgolo, oketša le .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Hlokomela gore ga o hloke go oketša data-bs-display="static"seka go dikonope tša go theoga ka go di-navbar, ka ge Popper e sa šomišwe ka go di-navbar.

Dikgetho tša go logaganya

Go tšea bontši bja dikgetho tše di bontšhitšwego ka mo godimo, mo ke demo ya go nwelela ka khitšhing ye nnyane ya dikgetho tša go fapafapana tša go logaganya go theoga lefelong le tee.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Dihlogo tša dihlogo

Oketša hlogo go leina dikarolo tša ditiro ka go thepo efe goba efe ya go theoga.

html

<ul class="dropdown-menu">
  <li><h6 class="dropdown-header">Dropdown header</h6></li>
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
</ul>

Dikaroganyo

Aroganya dihlopha tša dintho tša menu tše di amanago ka karoganyo.

html

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
  <li><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>

Sengwalwa

Bea sengwalwa sefe goba sefe sa sebopego sa go se lefelwe ka gare ga thepo ya go theoga ka sengwalwa gomme o šomiše didirišwa tša sekgoba . Hlokomela gore go na le kgonagalo ya gore o tla nyaka mekgwa ya tlaleletšo ya go lekanyetša bogolo go thibela bophara bja thepo.

html

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

Diforomo

Bea foromo ka gare ga thepo ya go theoga, goba o e dire gore e be thepo ya go theoga, gomme o šomiše didirišwa tša mošito goba tša go tlatša go e fa sekgoba se sebe seo o se nyakago.

html

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

html

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
    Dropdown form
  </button>
  <form class="dropdown-menu p-4">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck2">
        <label class="form-check-label" for="dropdownCheck2">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Šomiša data-bs-offsetgoba data-bs-referencego fetoša lefelo la go theoga.

html

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

Auto koala boitšoaro

Ka go ikemela, thepo ya go theoga e a tswalelwa ge o klika ka gare goba ka ntle ga thepo ya go theoga. O ka šomiša autoClosekgetho go fetoša boitshwaro bjo bja go theoga.

html

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya Bootstrap’s evolving CSS variables approach, dropdowns bjale e šomiša diphetogo tša CSS tša selegae godimo .dropdown-menubakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-min-width: #{$dropdown-min-width};
  --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
  --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
  --#{$prefix}dropdown-spacer: #{$dropdown-spacer};
  @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
  --#{$prefix}dropdown-color: #{$dropdown-color};
  --#{$prefix}dropdown-bg: #{$dropdown-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
  --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
  --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
  --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
  --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
  --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
  --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
  --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};

Tlwaetšo ka diphetogo tša CSS e ka bonwa .dropdown-menu-darksehlopheng moo re tlošago boleng bjo itšego ntle le go oketša bakgethi ba CSS bao ba ipoeletšago.

  --#{$prefix}dropdown-color: #{$dropdown-dark-color};
  --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
  --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
  --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
  --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
  --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
  --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
  --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
  --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
  --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
  --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};

Diphetogo tša Sass

Diphetogo tša go theoga ka moka:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             var(--#{$prefix}border-color-translucent);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding-x:         $dropdown-item-padding-x;
$dropdown-header-padding-y:         $dropdown-padding-y;
// fusv-disable
$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; // Deprecated in v5.2.0
// fusv-enable

Diphetogo bakeng sa dropdown e lefifi : .

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

Diphetogo tša di-caret tše di theilwego go CSS tšeo di laetšago tirišano ya go theoga:

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

Ditswaki

Di- mixin di šomišwa go tšweletša di- caret tše di theilwego go CSS gomme di ka hwetšwa go 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;
    }
  }
}

Tšhomišo

Ka dika tša datha goba JavaScript, polaka ya go theoga e fetoša diteng tše di utilwego (dimenu tša go theoga) ka go fetoša .showsehlopha go motswadi .dropdown-menu. Sebopego data-bs-toggle="dropdown"se ithekgile ka go tswalela dimenu tša go theoga maemong a tirišo, ka fao ke kgopolo ye botse go se šomiša ka mehla.

Ka didirišwa tše di kgontšhitšwego ka go kgoma, go bula go theoga go tlaleletša mouseoverditshwaro tše di se nago selo go bana ba kgauswi ba <body>elemente. This admittedly ugly hack is necessary to work around a quirk in iOS’ event delegation , e leng ka tsela e nngwe e ne e tla thibela pompo kae kapa kae ka ntle ho dropdown ho qholotsa khoutu e koala dropdown. Ge go šetše go tswaletšwe, didirišwa tše tša tlaleletšo tše di se nago selo mouseoverdi a tlošwa.

Ka dika ya data

Oketša data-bs-toggle="dropdown"go kgokagano goba konope go fetoša go theoga.

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

Ka JavaScript

Bitša di-drolodown ka JavaScript:

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

`data-bs-toggle="dropdown"`e sa dutše e nyakega

Go sa šetšwe gore o bitša dropdown ya gago ka JavaScript goba go e na le moo o diriša data-api, data-bs-toggle="dropdown"go nyakega ka mehla go ba gona go elemente ya go hlohleletša ya dropdown.

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina	Mohuta	Hlokomologa	Tlhalošo
`autoClose`	boolean, thapo	`true`	Beakanya boitšoaro ba auto koala ya dropdown: `true`- the dropdown tla koaloa ka ho tobetsa ka ntle kapa ka hare ho theoha menu ya. `false`- the dropdown tla koaloa ka ho tobetsa konopo toggle le ka letsoho bitsa `hide`kapa `toggle`mokgwa wa. (Gape e ka se tswalelwa ka go tobetsa konopo `esc`) `'inside'`- the dropdown tla koaloa (feela) ka ho tobetsa ka hare ho theoha menu ya. `'outside'`- the dropdown tla koaloa (feela) ka ho tobetsa ka ntle ho theoha menu ya. Ela hloko: the dropdown ka kamehla koaloa le `ESC`senotlolo.
`boundary`	thapo, elemente	`'clippingParents'`	Moedi wa thibelo ya go tlala wa thepo ya go theoga (e šoma fela go sefetoši sa preventOverflow sa Popper). Ka go ikemela ke `clippingParents`gomme e ka amogela tšhupetšo ya HTMLElement (ka JavaScript fela). Bakeng sa tshedimošo ye ntši lebelela ditokomane tša detectOverflow tša Popper .
`display`	thapo	`'dynamic'`	Ka default, re sebelisa Popper bakeng sa boemo ba mafolofolo. Thibela se ka `static`.
`offset`	hlophisitsoeng, khoele, mosebetsi	`[0, 2]`	Offset ya dropdown leloko le sepheo lona. O ka fetiša thapo ka go dika tša datha ka dikelo tše di arotšwego ka koma go swana le: `data-bs-offset="10,20"`. Ge mošomo o šomišwa go laetša offset, o bitšwa ka selo seo se nago le go bewa ga popper, tšhupetšo, le popper rects bjalo ka ngangišano ya yona ya mathomo. The qholotsa elements DOM noutu e fetisoa e le ngangišano ya bobedi. Mošomo o swanetše go bušetša lenaneo leo le nago le dinomoro tše pedi: go thelela , bokgole . Bakeng sa tshedimošo ye ntši lebelela ditokomane tša offset tša Popper .
`popperConfig`	lefeela, selo, mošomo	`null`	Go fetoša peakanyo ya Popper ya maitirelo ya Bootstrap, bona peakanyo ya Popper . Ge mošomo o šomišwa go hlama peakanyo ya Popper, e bitšwa ka selo seo se nago le peakanyo ya Popper ya maitirelo ya Bootstrap. E go thuša go šomiša le go kopanya ya go se fetoge le peakanyo ya gago. Mošomo o swanetše go bušetša selo sa peakanyo sa Popper.
`reference`	thapo, elemente, ntho	`'toggle'`	Reference elements ya menu ya go theoga. E amogela dikelo tša `'toggle'`, `'parent'`, tšhupetšo ya HTMLElement goba selo seo se fago `getBoundingClientRect`. Bakeng sa tshedimošo ye ntši lebelela ditokomane tša moagi tša Popper le ditokomane tša elemente ya go bonagala .

Go šomiša mošomo ka`popperConfig`

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

Mekgwa ya go šoma

Mokgwa	Tlhalošo
`dispose`	E senya go theoga ga elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
`getInstance`	Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa go theoga wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Mokgwa wa go se fetoge wo o bušetšago mohlala wa go theoga wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa. O ka e diriša ka tsela ye: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	E uta thepo ya go theoga ya navbar ye e filwego goba go sepelasepela ga dithepo.
`show`	E bontšha thepo ya go theoga ya navbar ye e filwego goba go sepelasepela ka dithepo.
`toggle`	E fetola thepo ya go theoga ya navbar ye e filwego goba go sepelasepela ga dithepo.
`update`	E mpshafatša maemo a go theoga ga elemente.

Ditiragalo

Ditiragalo ka moka tša go theoga di thuntšhwa go elemente ya go fetoša gomme ka morago tša bubbled godimo. Ka fao o ka oketša gape le batheeletši ba tiragalo godimo ga .dropdown-menuelemente ya motswadi ya '. hide.bs.dropdowngomme hidden.bs.dropdownditiragalo di na le clickEventthepa (feela ge mohuta wa mathomo wa Tiragalo e le click) yeo e nago le Selo sa Tiragalo sa tiragalo ya go klika.

Mohuta wa tiragalo	Tlhalošo
`hide.bs.dropdown`	E thunya ka pela ge `hide`mokgwa wa mohlala o biditšwe.
`hidden.bs.dropdown`	E thuntšhwa ge go theoga go feditše go utollwa go tšwa go modiriši gomme diphetogo tša CSS di phethilwe.
`show.bs.dropdown`	E thunya ka pela ge `show`mokgwa wa mohlala o bitšwa.
`shown.bs.dropdown`	E thuntšhwa ge go theoga go dirilwe gore go bonagale go modiriši gomme diphetogo tša CSS di phethilwe.

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

Di-dropdown tša go theoga

Kakaretšo

Phihlelelo

Mehlala

Konopo e le nngwe

Arola konopo

Go lekanyetša bogolo

Di-dropdown tše lefsifsi

Ditaelo

RTL e le

E tsepame

Dropup ya go lahlela

Dropup e tsepame

Dropend

Go thoma ka go theoga

Diaetheme tša menu

Mafolofolo

Šitišitšwe

Go logaganya menu

Go logaganya mo go arabelago

Dikgetho tša go logaganya

Diteng tša menu

Dihlogo tša dihlogo

Dikaroganyo

Sengwalwa

Diforomo

Auto koala boitšoaro

CSS

Diphetogo

Diphetogo tša Sass

Ditswaki

Tšhomišo

Ka dika ya data

Ka JavaScript

`data-bs-toggle="dropdown"`e sa dutše e nyakega

Dikgetho

Go šomiša mošomo ka`popperConfig`

Mekgwa ya go šoma

Ditiragalo

Di-dropdown tša go theoga

Kakaretšo

Phihlelelo

Mehlala

Konopo e le nngwe

Arola konopo

Go lekanyetša bogolo

Di-dropdown tše lefsifsi

Ditaelo

RTL e le

E tsepame

Dropup ya go lahlela

Dropup e tsepame

Dropend

Go thoma ka go theoga

Diaetheme tša menu

Mafolofolo

Šitišitšwe

Go logaganya menu

Go logaganya mo go arabelago

Dikgetho tša go logaganya

Diteng tša menu

Dihlogo tša dihlogo

Hlogo ya go theoga

Dikaroganyo

Sengwalwa

Diforomo

Dikgetho tša go theoga

Auto koala boitšoaro

CSS

Diphetogo

Diphetogo tša Sass

Ditswaki

Tšhomišo

Ka dika ya data

Ka JavaScript

data-bs-toggle="dropdown"e sa dutše e nyakega

Dikgetho

Go šomiša mošomo kapopperConfig

Mekgwa ya go šoma

Ditiragalo

`data-bs-toggle="dropdown"`e sa dutše e nyakega

Go šomiša mošomo ka`popperConfig`