Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

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 position gochuuf hin fayyadamu haa ta'u malee akka dynamic positioning hin barbaachisu.

Dhaqqabummaa

Istaandardiin WAI ARIArole="menu" wiijetii qabatamaa ibsa , garuu kun adda ta'e menuwwan aplikeeshinii fakkaatanii kanneen gochoota ykn dalagaalee kakaasan. 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 :

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

Akkasumas <a>elementoota waliin:

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

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.

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

Akkasumas navbar keessatti fayyadamuuf kaa'uu:

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

Kallattii

RTL jedhamuun beekama

Kallattiiwwan yeroo Bootstrap RTL keessatti fayyadamnu calaqqisiifama, hiikni .dropstartisaa gama mirgaatiin ni mul'ata.

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>

Dropright jedhu

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

Dropleeft jedhamuun beekama

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

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

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

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.

<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

Wantoota akka socho'ootti akkaataa.active itti godhuuf tarree keessa jiranitti dabali . Haalata socho'aa gara teeknooloojiiwwan gargaaraatti dabarsuudhaaf, amalli fayyadami — gatii fuula ammaaf fayyadamuun, ykn wanta ammaa tuuta keessatti.aria-currentpagetrue

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

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

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

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.

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

Qabiyyee menu

Mata dureewwan

Kutaalee gochaalee sajoo tarree kamiyyuu keessatti asxaa gochuuf mataduree dabali.

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

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

Barruu fakkeenyaa tokko tokko kan bilisaan yaa'u sajoo tarree keessaa.

Kunis caalaatti barreeffama fakkeenyaati.

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

Haaraa naannoo asitti? Galmaa'aa Jecha icciitii dagattee? 
<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>

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

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

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 .

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

Jijjiiramoota

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

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

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

Karaa JaavaScript

Karaa JaavaScript kanneen gadi bu'an bilbili:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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 danda'u. Amaloota deetaatiif, maqaa filannoo gara data-bs-, akkuma keessatti dabali data-bs-offset="". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo camelCase irraa gara kebab-case jijjiiruu mirkaneessi. Fakkeenyaaf, fayyadamuu mannaa data-bs-autoClose="false", fayyadami data-bs-auto-close="false".

Maqaa Akaakuu Durtii dha Ibsa
boundary tarree | qabiyyee 'clippingParents' Daangaa danqaa dhangala'aa sajoo gadi bu'aa (fooyyessaa preventOverflow Popper qofa irratti hojjata). Akka durtiitti 'clippingParents'wabii HTMLElement (karaa JavaScript qofa) fudhachuu fi fudhachuu danda'a. Odeeffannoo dabalataaf Popper's detectOverflow docs ilaali .
reference tarree | elementii | meeshaa '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 .
display hidhaa 'dynamic' Akka durtiitti, iddoo daayinamikiidhaaf Popper fayyadamna. Kana waliin hanqisi static.
offset array | tarree | faayidaa [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 .
autoClose boolee | hidhaa true

Amala ofumaan cufuu kan gadi-bu'aa qindeessuu:

  • true- tarree gadi bu'aa ala ykn keessa cuqaasuun ni cufama.
  • false- gadi bu'iinsi sun toggle button cuqaasuun harkaan bilbiluun hideykn togglemalaan 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).
popperConfig null | wanta | faayidaa 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.

Faankishinii waliin fayyadamuupopperConfig

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

Malawwan

Mala Ibsa
toggle Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira.
show Sajoo tarree navbar kenname ykn qajeelcha caancalaa agarsiisa.
hide Sajoo tarree navbar kennamee ykn qajeelcha caancalaa dhoksa.
update Bakka tarree qaama tokkoo fooyyessa.
dispose Tarree elementii tokkoo balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
getInstance Mala static kan fakkeenya gadi bu'aa elementii 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 dandeessu:bootstrap.Dropdown.getOrCreateInstance(element)

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.

Mala Ibsa
show.bs.dropdown Yeroo mala fakkeenya agarsiisaa waamamu battalumatti dhukaasa.
shown.bs.dropdown Yeroo gadi bu'iinsi fayyadamaaf akka mul'atu taasifamee fi ce'umsi CSS xumurame ari'ama.
hide.bs.dropdown Yeroo mala fakkeenya dhoksuu waamame battalumatti dhukaasa.
hidden.bs.dropdown Yeroo gadi bu'iinsi fayyadamaa irraa dhokatee xumuree fi ce'umsi CSS xumurame ni ari'ama. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})