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.

Boggan

Dulmar

Hoosudhaca waa la rogi karaa, dulsaar macnaha guud ee muujinta liisaska isku xirka 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 firfircooni aan loo baahnayn.

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.

Bootstrap's dropdowns, dhanka kale, waxaa loo qaabeeyey inay noqdaan kuwo guud oo lagu dabaqi karo xaalado kala duwan iyo qaab-dhismeedka calaamadaynta. Tusaale ahaan, waxa suurtagal ah in la abuuro hoos u dhacyo ka kooban waxyaabo dheeraad ah iyo kontaroolada qaabaynta, sida goobaha wax laga raadiyo 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 kicin karaa <a>ama <button>canaasiirta si ay si fiican ugu habboonaato baahiyahaaga suurtagalka ah. Tusaalooyinka halkan lagu muujiyey waxay isticmaalaan <ul>walxaha semantic halka ay ku habboon tahay, laakiin calaamadaynta caadada waa la taageeray.

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:

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>

Iyo <a>curiyayaasha:

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>

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

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

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 ku hayaan badhanka kala qaybsan waxayna bixiyaan meel si habboon u cabbiran oo ku dheggan badhanka weyn.

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

Cabbirka

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

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

Hoos-u-dhac madow

Ka dooro hoos-hoosaadka mugdiga ah si aad ula mid noqoto navbar madow ama qaab caadadii adiga oo ku daraya .dropdown-menu-darkmid jira .dropdown-menu. Wax isbeddel ah lagama rabo alaabta hoos u dhaca

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>

Iyo u isticmaalida navbar:

html

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

Tilmaamaha

RTL

Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha RTL, macnaha .dropstartwaxay ka soo muuqan doontaa dhinaca midig.

Udub dhexaad u ah

Ka dhig liiska hoos-u-dhaca mid udub dhexaad u ah ka hooseeya beddelka oo leh .dropdown-centerqaybta waalidka.

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>

Tuur

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

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

Burburinta udub dhexaad u ah

Ka dhig liiska hoos u dhigida mid ka sarreeya beddelka xubinta .dropup-centerwaalidka.

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>

Tuur

Kici liiska hoos-u-dhaca ee dhinaca midigta ee curiyeyaasha adoo ku daraya .dropendxubinta waalidka.

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

Bilawga

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

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

Waxaad isticmaali kartaa <a>ama <button>canaasirta sida walxaha hoos u dhaca.

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>

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.

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>

Firfircoon

Ku dar .activeshayada hoos u dhaca si aad u habayso inay yihiin kuwo firfircoon . Si aad ugu gudbiso xaaladda firfircoon ee tignoolajiyada caawinta, isticmaal aria-currentsifada - addoo isticmaalaya pageqiimaha bogga hadda jira, ama trueshayga hadda jira ee go'an.

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>

Naafada

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

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>

Sida caadiga ah, liiska hoos u dhaca waxa si toos ah loo dhigayaa 100% xagga sare iyo dhinaca bidix ee waalidkiisa. Tan waxaad ku beddeli kartaa .drop*fasallada jihaynta, laakiin sidoo kale waxaad ku xakamayn kartaa fasallo wax-bedelayaal dheeraad ah.

Ku dar .dropdown-menu-enda .dropdown-menuto midig toosi liiska hoos u dhaca. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha RTL, macnaha .dropdown-menu-endwaxay ka soo muuqan doontaa dhinaca bidix.

Madaxa kor u qaad! Hoos-u-dhacyada waxaa la dhigay mahadnaqa Popper marka laga reebo marka ay ku jiraan navbar.

html

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

Isku toosin jawaab celin ah

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

Si aad toos ugu toosiso liiska hoos u dhaca ee bar goynta la siiyay ama ka weyn, ku dar .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>

Si loo waafajiyo liiska hoos-u-dhaca bidix ee meesha la bixiyay ama ka weyn, ku dar .dropdown-menu-endoo .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>

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

Ikhtiyaarada toosinta

Qaadashada badi xulashooyinka kor lagu soo bandhigay, halkan waxaa ah bandhig saxan yar oo jikada oo kala duwan oo xulashooyin toosin ah oo hal meel ah.

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>

Madax

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

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>

Qaybiyayaal

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

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>

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.

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>

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.

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>

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

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>

Akhlaaqda dhow ee otomaatiga ah

Sida caadiga ah, liiska hoos u dhaca waa la xiraa marka la gujinayo gudaha ama dibadda liiska hoos u dhaca. Waxaad isticmaali kartaa autoCloseikhtiyaarka si aad u bedesho habdhaqankan hoos u dhaca.

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

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, hoos u dhaca ayaa hadda adeegsada doorsoomayaasha CSS-ga maxalliga ah .dropdown-menusi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

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

Isbeddelka iyada oo loo marayo doorsoomayaasha CSS ayaa laga arki karaa .dropdown-menu-darkfasalka halkaas oo aan ka saarno qiyamka gaarka ah iyada oo aan lagu darin xulashooyin CSS nuqul ah.

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

Doorsoomayaasha Sass

Kala duwanaanshaha dhammaan hoos u dhaca:

$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

Kala duwanaanshaha hoos u dhaca mugdiga ah :

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

Kala duwanaanshaha daryeelka CSS-ku-salaysan ee tilmaamaya isdhexgalka hoos u dhaca:

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

Isku qas

Mixins waxaa loo isticmaalaa in lagu soo saaro daryeelka ku salaysan CSS waxaana laga heli karaa 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;
    }
  }
}

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-bs-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 daraa maamulayaal madhan mouseovercarruurta u dhow <body>curiyaha. 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-bs-toggle="dropdown"xiriiriye ama badhan si aad u beddesho hoos u dhaca.

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

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

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

`data-bs-toggle="dropdown"`weli loo baahan yahay

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca	Nooca	Asal ahaan	Sharaxaada
`autoClose`	boolean, xadhig	`true`	Habee hab-dhaqanka isu-dhowaanshaha tooska ah ee hoos u dhaca: `true`- hoos u dhigista waa la xidhi doonaa adigoo gujinaya dibadda ama gudaha liiska hoos u dhaca. `false`- Hoosudhaca waa la xidhi doonaa adigoo gujinaya badhanka beddelka oo gacanta ku wac `hide`ama `toggle`habka. (Sidoo kale ma xiri doono adigoo riixaya `esc`furaha) `'inside'`- Hoos-u-dhigga waa la xidhi doonaa (kaliya) adigoo gujinaya gudaha liiska hoos u dhaca. `'outside'`- Hoosudhaca waa la xidhi doonaa (kaliya) adigoo gujinaya meel ka baxsan liiska hoos u dhaca. Fiiro gaar ah: hoos u dhigista had iyo jeer waxaa lagu xidhi karaa `ESC`furaha.
`boundary`	xadhig, element	`'clippingParents'`	Xadka xad-dhaafka xad-dhaafka ah ee liiska liiska hoos-u-dhaca (waxay qusaysaa oo keliya wax ka beddelka Popper ka-hortagga qulqulka). Sida caadiga ah waa `clippingParents`oo aqbali kartaa tixraaca HTMLElement (iyada oo loo marayo JavaScript kaliya). Wixii macluumaad dheeraad ah tixraac Popper's detectOverflow docs .
`display`	xadhig	`'dynamic'`	Sida caadiga ah, waxaan u isticmaalnaa Popper meelaynta firfircoon. Ku dami tan `static`.
`offset`	habayn, xadhig, shaqo	`[0, 2]`	Dejinta hoos u dhaca marka loo eego bartilmaameedkiisa. Waxaad ku gudbin kartaa xarriiq sifada xogta oo wadata qiyam kala soocan sida: `data-bs-offset="10,20"`. Marka hawl loo isticmaalo in lagu go'aamiyo dhimista, waxa loogu yeedhaa shay ka kooban meelaynta popper, tixraaca, iyo popper rects sida doodiisa kowaad. Xubinta kicinta ee DOM node waxa loo gudbiyaa sidii doodda labaad. Shaqadu waa inay soo celisaa array leh laba lambar: boodboodka , fogaanta . Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper .
`popperConfig`	waxba, shay, shaqo	`null`	Si aad u bedesho Bootstrap's default Popper config, arag qaabka Popper's . Marka hawl loo isticmaalo in lagu abuuro qaabaynta Popper, waxa loogu yeedhaa shay ka kooban qaabaynta Bootstrap ee caadiga ah ee Popper. Waxay kaa caawinaysaa inaad isticmaasho oo aad ku darto qaabka caadiga ah iyo qaabayntaada. Shaqadu waa inay soo celisaa shayga qaabaynta ee Popper.
`reference`	xadhig, curiye, shay	`'toggle'`	Cunsurka tixraaca ee liiska hoos u dhaca. Aqbala qiyamka `'toggle'`, `'parent'`, tixraaca HTMLElement ama shay bixinta `getBoundingClientRect`. Macluumaad intaas ka badan ka eeg dukumeentiyada wax dhisaha ee Popper iyo dukumeentiyada element-ka ah .

Isticmaalka shaqada leh`popperConfig`

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

Hababka

Habka	Sharaxaada
`dispose`	Wuxuu baabi'iyaa hoos u dhaca curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
`getInstance`	Habka istaatigga ah ee kuu ogolaanaya inaad hesho tusaalaha hoos u dhaca ee la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Qaabka taagan ee soo celiya tusaale hoos u dhaca oo la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Wuxuu qariyaa liiska hoos u dhaca ee navbar la bixiyay ama navigation tab.
`show`	Wuxuu muujiyaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
`toggle`	Wuxuu rogaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.
`update`	Waxay cusboonaysiisaa booska hoos u dhaca curiyaha

Dhacdooyinka

Dhammaan dhacdooyinka hoos u dhaca waxa lagu ridaa curiyaha leexanaya ka dibna waa la xumbo kor. Markaa waxaad sidoo kale ku dari kartaa dhagaystayaasha dhacdada qaybta .dropdown-menuwaalidka. hide.bs.dropdowniyo hidden.bs.dropdowndhacdooyinku waxay leeyihiin clickEventhanti (kaliya marka nooca Dhacdada asalka ah ay tahay click) oo ka kooban shayga Dhacdada ee dhacdada gujinta.

Nooca dhacdada	Sharaxaada
`hide.bs.dropdown`	Dab isla markiiba marka `hide`habka tusaale ahaan loo waco.
`hidden.bs.dropdown`	La eryo marka hoos u dhigistu dhammaato in laga qariyo isticmaalaha iyo kala-guurka CSS waa dhammaaday.
`show.bs.dropdown`	Dab isla markiiba marka `show`habka tusaale ahaan la yiraahdo.
`shown.bs.dropdown`	La eryay markii hoos u dhigista laga dhigay mid la arki karo isticmaalaha iyo kala wareejinta CSS waa la dhammeeyay.

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

Hoos u dhac

Dulmar

Helitaanka

Tusaalooyinka

Hal badhan

Badhan kala jeex

Cabbirka

Hoos-u-dhac madow

Tilmaamaha

RTL

Udub dhexaad u ah

Tuur

Burburinta udub dhexaad u ah

Tuur

Bilawga

Shayada liiska

Firfircoon

Naafada

Isku toosinta menu

Isku toosin jawaab celin ah

Ikhtiyaarada toosinta

Nuxurka liiska

Madax

Qaybiyayaal

Qoraal

Foomamka

Akhlaaqda dhow ee otomaatiga ah

CSS

Kala duwanaansho

Doorsoomayaasha Sass

Isku qas

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Iyadoo loo marayo JavaScript

`data-bs-toggle="dropdown"`weli loo baahan yahay

Ikhtiyaarada

Isticmaalka shaqada leh`popperConfig`

Hababka

Dhacdooyinka

Hoos u dhac

Dulmar

Helitaanka

Tusaalooyinka

Hal badhan

Badhan kala jeex

Cabbirka

Hoos-u-dhac madow

Tilmaamaha

RTL

Udub dhexaad u ah

Tuur

Burburinta udub dhexaad u ah

Tuur

Bilawga

Shayada liiska

Firfircoon

Naafada

Isku toosinta menu

Isku toosin jawaab celin ah

Ikhtiyaarada toosinta

Nuxurka liiska

Madax

Madaxa hoos u dhaca

Qaybiyayaal

Qoraal

Foomamka

Doorashooyinka hoos u dhaca

Akhlaaqda dhow ee otomaatiga ah

CSS

Kala duwanaansho

Doorsoomayaasha Sass

Isku qas

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Iyadoo loo marayo JavaScript

data-bs-toggle="dropdown"weli loo baahan yahay

Ikhtiyaarada

Isticmaalka shaqada lehpopperConfig

Hababka

Dhacdooyinka

`data-bs-toggle="dropdown"`weli loo baahan yahay

Isticmaalka shaqada leh`popperConfig`