Dropdowns kan jedhu

Tarreewwan hidhannoo fi kanneen biroo agarsiisuuf haguuggii haalata jijjiiri, tarreewwan tarree Bootstrap waliin.

Fuula kana irratti

Haala Waliigalaa

Kubbaawwan jijjiiramuu danda'u, tarreewwan hidhannoowwanii fi kkf agarsiisuuf haguuggii haalata. Isaanis Bootstrap tarree JavaScript plugin dabalameen walqunnamtii akka ta'an taasifamaniiru. Isaan kan toggled cuqaasuun malee hovering gochuudhaan miti; kun murtoo dizaayinii itti yaadanii kennamudha .

Dropdowns mana kitaabaa qaama sadaffaa irratti ijaaramaniiru, Popper , kan iddoo daayinamikii fi adda baasuu iddoo ilaalchaa kenna. JaavaScript Bootstrap dura popper.min.js dabaluu kee mirkaneessi ykn bootstrap.bundle.min.js/ bootstrap.bundle.jskan Popper of keessaa qabu fayyadami. Popper navbars keessatti dropdowns positioning gochuuf hin fayyadamu haa ta'u malee akka dynamic positioning hin barbaachisu.

Dhaqqabummaa

Istaandardiin WAI ARIA role="menu" wiijetii qabatamaa ibsa , garuu kun menuwwan aplikeeshinii fakkaatanii kanneen gochoota ykn dalagaalee kakaasan adda ta'a. Sajoo ARIA wanta sajoo, wanta sajoo sanduuqa filannoo, wanta sajoo qaree raadiyoo, gareewwan qaree raadiyoo, fi sajoo xiqqaa qofa qabaachuu danda'u.

Bootstrap's dropdowns, gama biraatiin, akka waliigalaa fi haalawwan adda addaa fi caasaa mallattoo irratti hojiirra ooluu danda'aniif qophaa'aniiru. Fakkeenyaaf, tarreewwan galtee dabalataa fi too'annoo unkaa of keessaa qaban uumuun ni danda'ama, kan akka man'ee barbaacha ykn unka galmee. Sababa kanaaf, Bootstrap amaloota rolefi menuwwan ARIAaria- dhugaatiif barbaachisan kamiyyuu hin eegu (ofumaanis hin dabalu). Barreessitoonni amaloota adda ta’an kana ofuma isaanii hammachuu qabu.

Haa ta'u malee, Bootstrap walqunnamtii menu furtuu istaandaardii baay'eedhaaf deeggarsa ijaarame dabalata, kan akka dandeettii .dropdown-itemfurtuuwwan qaree fayyadamuun elementoota dhuunfaa keessa socho'uu fi furtuun menu cufuu ESC.

Fakkeenyaaf

Jijjiirraa tarree (qaree ykn hidhaa kee) fi sajoo tarree keessaa .dropdown, ykn qaama biraa kan labsu marsi position: relative;. Dropdowns irraa <a>ykn <button>elementoota fedhii kee ta'uu danda'u haala gaariin walsimuuf kakaafamuu danda'a. Fakkeenyonni asitti agarsiifaman <ul>bakka barbaachisaa ta'etti qaamolee hiika fayyadamu, garuu mallattoon amala ni deeggara.

Qabduu tokko qofa

Tokkichi kamiyyuu .btngara jijjiirama mallattoo tokko tokkoon gara jijjiirraa gadi-bu'aa jijjiiramuu danda'a. <button>Akkaataa isaan elementoota lamaanuu wajjin hojiitti galchuu dandeessu kunooti :

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>

Akkasumas <a>elementoota waliin:

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>

Kutaan hundarra gaariin kana gochuu dandeessa button variant kamiinuu, akkasumas:

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

Qabduu addaan qoodi

Haaluma walfakkaatuun, tarreewwan qaree qoqqoodaman kanneen mallattoo walfakkaataa ta'an kanneen qaree tokkoo wajjin wal fakkaatu uumi, garuu .dropdown-toggle-splitnaannoo caret gadi bu'aa addaan fageenya sirrii ta'eef dabaluudhaan.

Gitaa dabalataa kana fayyadamnee horizontal paddinggama lamaanuu caret %25 hir'isuu fi margin-leftthat's added for regular button dropdowns balleessuuf. Jijjiiramni dabalataa sun caret qaree addaan ba'e keessatti giddugaleessa akka ta'ee fi bakka rukuttaa safara sirrii ta'e qaree guddaa cinatti kenna.

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

Saayizii gochuu

Tarreewwan qaree qaree hammangaa hunda waliin hojjetu, qaree durtii fi qoodame dabalatee.

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

Dukkanaan kan gadi bu'u

Navbar dukkanaa'aa ykn akkaataa amala .dropdown-menu-darkjiru irratti dabaluudhaan walsimsiisuuf gara tarreewwan dukkanaa'ootti filadhu .dropdown-menu. Wantoota gadi bu'an irratti jijjiiramni hin barbaachisu.

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>

Akkasumas navbar keessatti fayyadamuuf kaa'uu:

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>

Kallattii

RTL jedhamuun beekama

Kallattii yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama, hiikni .dropstartgama mirgaatiin ni mul'ata.

Giddugaleessa godhate

Sajoo tarree giddugaleessaa jalatti jijjiirraa .dropdown-centerqaama warraa irratti godhi.

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 jedhu

.dropupQaaqa warraa irratti dabaluudhaan qaaqawwan tarree qaamolee olitti kakaasi .

<!-- 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 giddu galeessa godhate

Sajoo gadi bu'aa giddugaleessaa olitti toggle with .dropup-centeron on the parent element godhi.

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

.dropendQaaqa warraa irratti dabaluudhaan sajoo tarree mirgaa qaamolee irratti kakaasi .

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

Dropstart jedhu

.dropstartQaaqa warraa irratti dabaluudhaan sajoo tarree bitaa qaamolee irratti kakaasi .

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

<a>ykn <button>elementoota akka wanta tarreetti fayyadamuu dandeessa .

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>

Akkasumas wantoota tarree wal-qunnamsiisoo hin taane waliin uumuu dandeessa .dropdown-item-text. Faayidaa CSS ykn barruu amala ta'een caalaatti style gochuuf bilisa ta'i.

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>

Si'aawaa

.activeWantoota tarree keessa jiranitti dabali akka socho'aa ta'etti akkaataa itti gootu . Haalata socho'aa gara teeknooloojiiwwan gargaaraatti dabarsuudhaaf, aria-currentamalli fayyadami — pagegatii fuula ammaaf fayyadamuun, ykn truewanta ammaa tuuta keessatti.

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>

Miidhamaa

.disabledWantoota akka hanqifameetti akkaataa itti godhuuf tarree keessa jiranitti dabali .

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>

Akka durtiitti, sajoo tarree ofumaan 100% gubbaa irraa fi gama bitaa warra isaa irratti dhaabbata. Kana .drop*gita kallattii waliin jijjiiruu dandeessa, garuu gita fooyyessaa dabalataatiinis to'achuu dandeessa.

Sajoo tarree gara mirgaatti .dropdown-menu-enddabali . .dropdown-menuKallattiiwwan yeroo Bootstrap RTL keessatti fayyadamtu calaqqisiifama, hiikni .dropdown-menu-endisaa gama bitaa irratti ni mul'ata.

Mataa ol qaba! Dropdowns yeroo navbar keessatti qabaman malee galata Popper'f kan dhaabbatudha.

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>

Hiriirsuu deebii kennuu

Yoo qindaa'ina deebii fayyadamuu barbaadde, data-bs-display="static"amalli dabaluudhaan iddoo daayinamikii hanqisi fi gita jijjiirama deebii fayyadami.

Sajoo tarree gadi bu'aa qabxii cabsuu kennamee ykn guddaa wajjin mirga qindeessuuf , dabali .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>

Sajoo tarree bitaa tuqaa cabsuu kennamee ykn guddaa waliin qindeessuuf , dabali .dropdown-menu-endfi .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>

Hubadhu data-bs-display="static", Popper navbar keessatti waan hin fayyadamneef, qaree gadi bu'aa navbar keessatti amaloota dabaluu hin barbaachisu.

Filannoowwan qindeessuu

Filannoowwan armaan olitti agarsiifaman irra caalaan isaanii fudhachuun, kunoo demoo xiqqaa kushiinaa sinqii filannoowwan adda addaa qindaa'ina gadi bu'aa bakka tokkotti.

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>

Mata dureewwan

Kutaalee gochaalee sajoo tarree kamiyyuu keessatti asxaa gochuuf mataduree dabali.

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>

Qoqqoodduu

Garee wanta menu walqabatan qoqqoodduu waliin addaan baasi.

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>

Barreeffama

Barruu bifa bilisaa kamiyyuu barruu waliin sajoo tarree keessa kaa'iitii faayidaa addaan fageenyaa fayyadami . Hubadhu, bal'ina sajoo daangessuuf akkaataa safara dabalataa si barbaachisuu hin oolu.

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>

Unkaalee

Unkaa sajoo tarree keessa kaa'i, ykn gara sajoo gadi bu'aa godhi, fi faayidaa margina ykn padding fayyadamii iddoo negaatiivii barbaaddu kenniif.

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>

Bakka gadi bu'aa jijjiiruuf data-bs-offsetykn fayyadami .data-bs-reference

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>

Amala ofumaan cufuu

Akka durtiitti, sajoo tarree gadi-bu'aa yeroo sajoo tarree keessaa ykn alaa cuqaastu cufama. autoCloseAmala kana tarjaa jijjiiruuf filannoo fayyadamuu dandeessa .

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

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, gadi bu'iinsi amma jijjiiramoota CSS naannoo on fayyadama .dropdown-menudhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$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};

Dhuunfachiisuun karaa jijjiiramoota CSS .dropdown-menu-darkgita irratti bakka nuti gatiiwwan murtaa'oo filattoota CSS dachaa ta'an osoo hin dabaliin irra darbinu irratti mul'achuu danda'a.

  --#{$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};

Jijjiiramoota Sass

Jijjiiramoota tarree hundaaf:

$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

Jijjiiramoota gadi bu'iinsa dukkanaa'aa : .

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

Jijjiiramoota kunuunsa CSS irratti hundaa'aniif kanneen walqunnamtii tarree agarsiisan:

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

Mixins jedhaman

Mixins carets CSS irratti hundaa'an maddisiisuudhaaf kan fayyadaman yoo ta'u, keessatti argamuu danda'u 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;
    }
  }
}

Fayyadama

Karaa amaloota deetaa ykn JaavaScript, ifteessituun gadi bu'aa qabiyyee dhokataa (menuuwwan gadi bu'aa) .showgita warra irratti jijjiiruun jijjiira .dropdown-menu. Amalli kun data-bs-toggle="dropdown"sadarkaa aplikeeshinii irratti qaaqawwan gadi bu'aa cufuuf irratti hirkata, kanaaf yeroo hunda fayyadamuun yaada gaarii dha.

Meeshaalee tuqaan dandeessifaman irratti, tarree banuun mouseoverqabattoota duwwaa ijoollee dhiyeenya <body>elementichaatti dabalata. This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , kunis yoo kana hin taane tuquun bakka kamittiyyuu gadi bu'iinsaan ala ta'e koodii gadi bu'aa cufu akka hin kakaasne dhorka ture. Erga gadi bu'iinsi cufamee booda, mouseoverqabattoonni duwwaa dabalataa kun ni haqamu.

Karaa amaloota deetaa

data-bs-toggle="dropdown"Tarree tokko jijjiiruuf hidhaa ykn qaree irratti dabali .

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

Karaa JaavaScript

Karaa JaavaScript kanneen gadi bu'an bilbili:

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

`data-bs-toggle="dropdown"`ammallee barbaachisaadha

Karaa JaavaScript tarree kee waamtus ykn inumaayyuu data-api fayyadamuu kee osoo hin ilaalin, data-bs-toggle="dropdown"yeroo hunda elementii kaka'umsaa gadi bu'aa irratti argamuun barbaachisaadha.

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Maqaa	Akaakuu	Durtii dha	Ibsa
`autoClose`	boolean, tarree	`true`	Amala ofumaan cufuu kan tarree qindeessuu: `true`- tarree gadi bu'aa ala ykn keessaa cuqaasuun ni cufama. `false`- gadi bu'iinsi sun toggle button cuqaasuun harkaan bilbiluun `hide`ykn `toggle`malaan ni cufama. `esc`(Akkasumas furtuu dhiibuun hin cufamu ) `'inside'`- tarree gadi bu'aa keessaa cuqaasuun ni cufama (qofa). `'outside'`- tarree gadi bu'aa ala cuqaasuun ni cufama (qofa). `ESC`Hubachiisa: yeroo hunda furtuun cufamuu danda'a .
`boundary`	tarree, elementii	`'clippingParents'`	Daangaa danqaa dhangala'aa sajoo gadi bu'aa (fooyyessaa preventOverflow Popper qofa irratti hojjeta). Akka durtiitti `clippingParents`wabii HTMLElement (karaa JavaScript qofa) fudhachuu fi fudhachuu danda'a. Odeeffannoo dabalataaf Popper's detectOverflow docs ilaali .
`display`	hidhaa	`'dynamic'`	Akka durtiitti, iddoo daayinamikiidhaaf Popper fayyadamna. Kana waliin hanqisi `static`.
`offset`	tarree, tarree, faankishinii	`[0, 2]`	Ofseeti kufaatii galma isaa wajjin walqabatee. Amaloota deetaa keessatti tarree gatiiwwan komaandiin addaan baafaman akka: `data-bs-offset="10,20"`. Faankishiniin tokko ofseeti murteessuuf yeroo fayyadamu, wanta iddoo popper, wabii, fi popper rects akka falmii isaa isa jalqabaatti of keessaa qabuun waama. Qaamni kakaasu DOM noodiin akka falmii lammaffaatti darba. Faankishinichi tarree lakkoofsota lama qabu deebisuu qaba: skidding , distance . Odeeffannoo dabalataaf Popper's offset docs ilaali .
`popperConfig`	null, wanta, faankishinii	`null`	Qindaa'ina Popper durtii Bootstrap jijjiiruuf, qindeessaa Popper ilaali . Yeroo faankishiniin qindeessaa Popper uumuuf fayyadamu, wanta qindeessaa Popper durtii Bootstrap of keessaa qabuun waamama. Durtii qindeessaa mataa keetiin fayyadamuu fi walitti makuuf si gargaara. Faankishinichi wanta qindeessaa Popperiif deebisuu qaba.
`reference`	tarree, elementii, wanta	`'toggle'`	Qaama wabii sajoo tarree. Gatii `'toggle'`, `'parent'`, wabii HTMLElement ykn wanta kennuu fudhata `getBoundingClientRect`. Odeeffannoo dabalataaf galmeewwan ijaarsaa Popper fi galmeewwan elementii dhugaa ilaali .

Faankishinii waliin fayyadamuu`popperConfig`

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

Malawwan

Mala	Ibsa
`dispose`	Tarree elementii tokkoo balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
`getInstance`	Mala istaatiksii kan fakkeenya gadi bu'aa qaama DOM wajjin walqabate argachuuf si dandeessisu, akkasitti fayyadamuu dandeessa: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Mala istaatiksii kan fakkeenya gadi bu'aa qaama DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumuu. Akkasitti fayyadamuu dandeessa: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Sajoo tarree navbar kennamee ykn qajeelcha caancalaa dhoksa.
`show`	Sajoo tarree navbar kenname ykn qajeelcha caancalaa agarsiisa.
`toggle`	Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira.
`update`	Bakka tarree qaama tokkoo fooyyessa.

Taateewwan

Taateewwan gadi bu'aa hundi elementii toggling irratti dhukaafamu sana booda bubbled up. .dropdown-menuKanaafuu dhaggeeffattoota taatee qaama warraa 's irrattis dabaluu dandeessa . hide.bs.dropdownfi hidden.bs.dropdowntaateewwan clickEventqabeentaa qabu (yeroo akaakuu Taatee jalqabaa ta'e qofa click) kan Wanti Taatee taatee cuqaasuuf of keessaa qabu.

Gosa taatee	Ibsa
`hide.bs.dropdown`	`hide`Yeroo mala fakkeenyaa waamame battalumatti dhukaasa .
`hidden.bs.dropdown`	Yeroo gadi bu'iinsi fayyadamaa irraa dhokatee xumuree fi ce'umsi CSS xumurame ni ari'ama.
`show.bs.dropdown`	`show`Yeroo mala fakkeenyaa waamamu battalumatti dhukaasa .
`shown.bs.dropdown`	Yeroo gadi bu'iinsi fayyadamaaf akka mul'atu taasifamee fi ce'umsi CSS xumurame ari'ama.

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

Dropdowns kan jedhu

Haala Waliigalaa

Dhaqqabummaa

Fakkeenyaaf

Qabduu tokko qofa

Qabduu addaan qoodi

Saayizii gochuu

Dukkanaan kan gadi bu'u

Kallattii

RTL jedhamuun beekama

Giddugaleessa godhate

Dropup jedhu

Dropup giddu galeessa godhate

Dropend jedhamuun beekama

Dropstart jedhu

Wantoota menu

Si'aawaa

Miidhamaa

Hiriirsa menu

Hiriirsuu deebii kennuu

Filannoowwan qindeessuu

Qabiyyee menu

Mata dureewwan

Qoqqoodduu

Barreeffama

Unkaalee

Amala ofumaan cufuu

CSS jedhamuun beekama

Jijjiiramoota

Jijjiiramoota Sass

Mixins jedhaman

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

`data-bs-toggle="dropdown"`ammallee barbaachisaadha

Filannoowwan

Faankishinii waliin fayyadamuu`popperConfig`

Malawwan

Taateewwan

Dropdowns kan jedhu

Haala Waliigalaa

Dhaqqabummaa

Fakkeenyaaf

Qabduu tokko qofa

Qabduu addaan qoodi

Saayizii gochuu

Dukkanaan kan gadi bu'u

Kallattii

RTL jedhamuun beekama

Giddugaleessa godhate

Dropup jedhu

Dropup giddu galeessa godhate

Dropend jedhamuun beekama

Dropstart jedhu

Wantoota menu

Si'aawaa

Miidhamaa

Hiriirsa menu

Hiriirsuu deebii kennuu

Filannoowwan qindeessuu

Qabiyyee menu

Mata dureewwan

Mata duree gadi bu'aa

Qoqqoodduu

Barreeffama

Unkaalee

Filannoowwan gadi bu'an

Amala ofumaan cufuu

CSS jedhamuun beekama

Jijjiiramoota

Jijjiiramoota Sass

Mixins jedhaman

Fayyadama

Karaa amaloota deetaa

Karaa JaavaScript

data-bs-toggle="dropdown"ammallee barbaachisaadha

Filannoowwan

Faankishinii waliin fayyadamuupopperConfig

Malawwan

Taateewwan

`data-bs-toggle="dropdown"`ammallee barbaachisaadha

Faankishinii waliin fayyadamuu`popperConfig`