in English

Hoos u dhac

Beddel dulsaarka macnaha guud si aad u muujiso liisaska isku xidhka iyo in ka badan oo leh Bootstrap-ka hoos u dhaca.

Dulmar

Hoos-u-dhacyadu waa kuwo la beddeli karo, dul-saar macnaha guud oo muujinaya liisaska xiriiriyeyaasha iyo wax ka badan. Waxa lagu sameeyay is dhexgal oo ay ku jiraan Bootstrap dropdown JavaScript plugin. Waxay ku rogaan gujisyada, ma aha inay dul heehaabayaan; kani waa go'aan naqshadayn ula kac ah .

Hoosudhaca waxaa lagu dhisay maktabad qolo saddexaad, Popper , taas oo bixisa meelayn firfircoon iyo ogaanshaha aragtida. Hubi inaad ku darto popper.min.js ka hor Bootstrap's JavaScript ama isticmaal bootstrap.bundle.min.js/ bootstrap.bundle.jska kooban Popper. Popper looma isticmaalo in lagu dhigo hoos-u-dhacyada navbars-ka inkasta oo meelaynta firfircoon aan loo baahnayn.

Haddii aad JavaScript-kayaga ka dhisayso isha, waxay u baahan tahayutil.js .

Helitaanka

Halbeegga WAI ARIA waxa uu qeexayaa role="menu"widget -ka dhabta ah , laakiin kani waxa uu gaar u yahay menu-yada codsiga u eg ee kiciya falalka ama hawlaha. Liiska ARIA waxa ka koobnaan kara oo keliya shayada menu-ka, shayga liiska sanduuqa, shayada badhanka raadiyaha, kooxaha badhanka raadiyaha, iyo menus-hoosaadka.

Hoos-u-dhaca Bootstrap, dhanka kale, waxaa loo qaabeeyey inay noqdaan kuwo guud oo lagu dabaqi karo xaalado kala duwan iyo qaab-dhismeedka calaamadaynta. Tusaale ahaan, waxa suurtogal ah in la sameeyo hoos u dhacyo ka kooban waxyaabo dheeraad ah iyo kontaroolada qaabaynta, sida goobaha raadinta ama foomamka gelitaanka. Sababtan awgeed, Bootstrap ma filayo (ama si toos ah ugu darin) mid ka mid ah roleiyo aria-sifooyinka looga baahan yahay liiska ARIA ee runta ah. Qorayaashu waa inay ku daraan sifooyin gaar ah laftooda.

Si kastaba ha ahaatee, Bootstrap wuxuu ku daraa taageerada gudaha inta badan isdhexgalka menu-ka caadiga ah ee kiiboodhka, sida awoodda lagu dhex maro .dropdown-itemwalxaha shakhsi ahaaneed iyadoo la adeegsanayo furayaasha cursorka oo ku xidh liiska ESCfuraha.

Tusaalooyinka

Isku duub beddelka hoos u dhaca (badhankaaga ama xidhiidhka) iyo liiska hoos u dhaca ee gudaha .dropdown, ama shay kale oo sheegaya position: relative;. Hoos-u-dhac ayaa laga keeni karaa <a>ama <button>canaasiir si ay ugu habboonaato baahiyahaaga suurtagalka ah.

Hal badhan

Mid kasta .btnwaxa loo rogi karaa beddelka hoos u dhaca oo leh waxoogaa isbeddello ah. Waa kuwan sida aad uga dhigi karto inay ku shaqeeyaan labada <button>shay:

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

Iyo <a>curiyayaasha:

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

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

Qaybta ugu fiican ayaa ah inaad tan ku samayn karto badhan kasta oo kala duwan, sidoo kale:

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Badhan kala jeex

Sidoo kale, samee badhanka kala qaybsan ee hoos u dhaca oo leh wax la mid ah kuwa hoos u dhaca badhanka, laakiin lagu daro .dropdown-toggle-splitkala dheeraynta saxda ah ee ku wareegsan daryeelka hoos u dhaca.

Waxaan u isticmaalnaa fasalkan dheeraadka ah si aan u dhimno jiifka paddinglabada dhinac ee daryeelka 25% oo aan ka saarno margin-leftwaxa lagu daray hoos u dhigista badhanka caadiga ah. Isbeddelladaas dheeriga ah waxay xannaanada xuddun u tahay badhanka kala qaybsan waxayna bixiyaan meel si habboon u cabbiran oo ku dheggan badhanka weyn.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- 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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Cabbirka

Hoos-u-dhacyada badhanka waxay la shaqeeyaan badhamada cabbirrada oo dhan, oo ay ku jiraan kuwa caadiga ah iyo badhamada hoos u dhaca.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Tilmaamaha

Tuur

Kici liiska hoos-u-dhaca ee ka sarreeya walxaha adiga oo ku daraya .dropupxubinta waalidka.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

Kici menus hoos u dhaca dhanka midig ee curiyayaasha adoo ku daraya .droprightxubinta waalidka.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Hoos u dhac

Kici liiska hoos-u-dhaca ee bidixda curiyayaasha adoo ku daraya .dropleftxubinta waalidka.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Taariikh ahaan liiska liiska hoos u dhigida waxa ku jira waa inay ahaadaan xiriiriyayaal, laakiin taasi hadda maahan kiiska v4. Hadda waxaad si ikhtiyaari ah u isticmaali kartaa <button>walxaha hoos u dhacaaga halkii aad ka isticmaali lahayd <a>s.

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

Waxa kale oo aad ku abuuri kartaa waxyaabaha hoos u dhaca ee aan is dhexgal ahayn .dropdown-item-text. Dareen xor u ah in aad ku sii habayso CSS caadadii ama adeegaha qoraalka.

Qoraalka sheyga hoos u dhigi Ficil Ficil kale Wax kale halkan 
<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Firfircoon

Ku dar .activeshayada hoos u dhaca si aad u habayso inay yihiin kuwo firfircoon .

Xiriirinta joogtada ah Xiriirinta firfircoon Xiriir kale 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Naafada

Ku dar .disabledshayada hoos u dhaca si aad u qaabeeyaan sida naafada

Xiriirinta joogtada ah Xiriirinta naafada Xiriir kale 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Sida caadiga ah, liiska hoos u dhaca waxa si toos ah loo dhigayaa 100% xagga sare iyo dhinaca bidix ee waalidkiisa. Ku dar .dropdown-menu-righta .dropdown-menuto midig toosi liiska hoos u dhaca.

Madaxa kor u qaad! Hoos-u-dhacyada waxaa la dhigay mahadda Popper (marka laga reebo marka ay ku jiraan navbar). 
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Isku toosin jawaab celin ah

Haddii aad rabto inaad isticmaasho toosinta jawaabta, dami meelaynta firfircoon adiga oo ku daraya data-display="static"sifada oo isticmaal fasallada kala duwanaanshaha jawaabaha.

Si aad toos ugu toosiso liiska hoos u dhaca oo leh barta nasashada ama ka weyn, ku dar .dropdown-menu{-sm|-md|-lg|-xl}-right.

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

Si loo waafajiyo liiska hoos-u-dhaca bidix ee meesha la bixiyay ama ka weyn, ku dar .dropdown-menu-rightoo .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

Ogsoonow inaadan u baahnayn inaad data-display="static"sifo ku darto badhanka hoos u dhaca ee navbars, maadaama Popper aan loo isticmaalin navbars.

Nuxurka liiska

Madax

Ku dar madax si aad u calaamadiso qaybaha ficillada ee liiska hoos u dhaca.

Madaxa hoos u dhaca
Ficil Ficil kale 
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Qaybiyayaal

Kala saar kooxo kala duwan oo ah shayada liiska laxidhiidha oo leh qaybiye.

Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Qoraal

Dhig qoraal kasta oo qaab bilaash ah gudaha liiska hoos-u-dhaca oo leh qoraal isticmaalna utility kala dheereynta . Ogsoonow inaad u badan tahay inaad u baahan doonto qaabab cabbir oo dheeri ah si aad u xaddiddo ballaca menu-ka.

Tusaalooyin qoraal ah oo bilaash ah ayaa ku dhex jira liiska hoos u dhaca.

Tanina waa tusaale dheeraad ah oo qoraal ah.

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

Foomamka

Geli foom gudaha liiska hoos u dhaca, ama ka samee liiska hoos u dhaca, oo isticmaal margin ama padding utilities si aad u siiso booska taban ee aad u baahan tahay.

Ku cusub halkan? Isdiiwaangeli Ilowday erayga sirta ah? 
<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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>

Isticmaal data-offsetama data-referenceaad bedesho goobta hoos u dhigista

Ficil Ficil kale Wax kale halkan
Ficil Ficil kale Wax kale halkan
Xiriirinta kala go'an 
<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Isticmaalka

Iyada oo loo marayo sifooyinka xogta ama JavaScript, plugin-ka hoos-u-dhaca wuxuu beddelaa nuxurka qarsoon ( menus hoos u dhaca ) isagoo ku rogaya .showfasalka waalidka .dropdown-menu. Sifada data-toggle="dropdown"waxay ku tiirsan tahay xidhitaanka liiska hoos u dhaca ee heerka codsiga, markaa waa fikrad wanaagsan in had iyo jeer la isticmaalo.

Aaladaha la taabto, furista hoos u dhaca waxay ku dartaa maareeyayaal madhan ( $.noop) mouseoverubadka <body>curiyaha ah. Tani waxay qirtay jabsiga fool xun waa lagama maarmaan in ay ka shaqeeyaan agagaarka quirk ah ee iOS' waftiga dhacdo , taas oo haddii kale ka hortagi lahaa tuubada meel kasta oo ka baxsan hoos-u-dhicidda ka kiciya code in xidho hoos u dhaca ah. Marka hoos u dhigista la xiro, kuwan dheeraadka ah mouseoveree gacanta ku haya waa la saarayaa.

Iyada oo loo marayo sifooyinka xogta

Ku dar data-toggle="dropdown"xiriiriye ama badhan si aad u beddesho hoos u dhaca.

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

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

$('.dropdown-toggle').dropdown()
data-toggle="dropdown"weli loo baahan yahay

Iyadoo aan loo eegin haddii aad ugu wacdo hoos u dhigistaada JavaScript ama aad isticmaasho xogta-api, data-toggle="dropdown"had iyo jeer waxaa looga baahan yahay inaad ku jirto qaybta kicinta ee hoos u dhaca.

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

Magaca Nooca Asal ahaan Sharaxaada
dhimis lambarka | xadhig | shaqayn 0

Dejinta hoos u dhaca marka loo eego bartilmaameedkiisa.

Marka shaqada loo isticmaalo in lagu go'aamiyo dhimista, waxaa loogu yeeraa shay ay ku jiraan xogta la dhimay sida doodeeda koowaad. Shaqadu waa in ay soo celisaa shay leh qaab isku mid ah. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad.

Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper .
rogo booliyan run Oggolow hoos u dhigida inuu rogo haddii ay dhacdo in ay is dul saaran yihiin qaybta tixraaca. Macluumaad intaas ka badan ka eeg dukumeentiyada Ropper's flip .
xuduud xadhig | curiye 'kor u qaadida waalidka' Xadka xad-dhaafka ah ee xaddidaadda liiska hoos u dhaca. Aqbala qiyamka 'viewport', 'window', 'scrollParent', ama tixraaca HTMLElement (JavaScript kaliya). Macluumaad intaas ka badan waxaad eegtaa dukumeentiyada Popper ee ka hortagga qulqulka .
tixraac xadhig | curiye 'rogid' Cunsurka tixraaca ee liiska hoos u dhaca. Aqbala qiyamka 'toggle', 'parent', ama tixraaca HTMLElement. Macluumaad dheeraad ah ka eeg dukumeentiyada Walaxda ee tixraaca Popper .
bandhig xadhig 'firfircoon' Sida caadiga ah, waxaan u isticmaalnaa Popper meelaynta firfircoon. Ku dami tan static.
popperConfig waxba | walax waxba Si aad u bedesho Bootstrap's default Popper config, arag qaabka Popper

Ogow marka boundarylagu dejiyo qiimo kasta oo aan ahayn 'scrollParent', qaabka position: staticwaxa lagu dabaqayaa .dropdownweelka.

Hababka

Habka Sharaxaada
$().dropdown('toggle') Wuxuu rogaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
$().dropdown('show') Wuxuu muujiyaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
$().dropdown('hide') Wuxuu qariyaa liiska hoos u dhaca ee navbar la bixiyay ama navigation tab.
$().dropdown('update') Waxay cusboonaysiisaa booska hoos u dhaca curiyaha
$().dropdown('dispose') Wuxuu baabi'iyaa hoos u dhaca curiyaha.

Dhacdooyinka

Dhammaan dhacdooyinka hoos u dhaca waxaa lagu eryaa xubinta .dropdown-menuwaalidka waxayna leeyihiin relatedTargethanti, qiimihiisu waa curiyaha barroosinka roganaya. hide.bs.dropdowniyo hidden.bs.dropdowndhacdooyinku waxay leeyihiin clickEventhanti (kaliya marka nooca dhacdada asalka ah uu yahay click) oo ka kooban shayga Dhacdada ee dhacdada gujinta.

Dhacdo Sharaxaada
show.bs.dropdown Dhacdadani waxay isla markiiba gubtaa marka habka tusaalaha bandhigga la yiraahdo.
shown.bs.dropdown Dhacdadan ayaa la eryaa marka hoos u dhigista laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa kala-guurka CSS, si loo dhamaystiro).
hide.bs.dropdown Dhacdadan ayaa isla markiiba la eryaa marka habka dhuumashada la waco.
hidden.bs.dropdown Dhacdadan waxa la eryaa marka ay dhammaato hoos u dhigista laga qarinayo isticmaalaha (waxa ay sugi doontaa kala-guurka CSS, si loo dhamaystiro). 
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})