Hoos u dhac

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

Boggaan

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.

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

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

Iyo <a>curiyayaasha:

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

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 ugu habboonaato navbar madow ama qaab caadadii ah adiga oo ku daraya .dropdown-menu-darkmid jira .dropdown-menu. Wax isbeddel ah lagama rabo alaabta hoos u dhaca

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

Iyo u isticmaalida navbar:

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

Tilmaamaha

RTL

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

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>

Dropright

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

Hoos u dhac

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

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

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

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.

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

<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

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">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.

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

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

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

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

Madax

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

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

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

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

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

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

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

Dhaqan isku dhow oo toos 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.

<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

Kala duwanaansho

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:             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($gray-900, 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;

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

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-offset="". Hubi inaad ka beddesho nooca kiiska ee magaca ikhtiyaarka ah ee geela una beddelo kiis kebab marka aad ku gudbinayso xulashooyinka sifada xogta. Tusaale ahaan, halkii aad isticmaali lahayd data-bs-autoClose="false", isticmaal data-bs-auto-close="false".

Magaca	Nooca	Asal ahaan	Sharaxaada
`boundary`	xadhig \| curiye	`'clippingParents'`	Xadka xad-dhaafka xad-dhaafka ah ee liiska liiska hoos-u-dhaca (waxay qusaysaa oo keliya wax ka beddelka Popper ee 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 .
`reference`	xadhig \| element \| walax	`'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 .
`display`	xadhig	`'dynamic'`	Sida caadiga ah, waxaan u isticmaalnaa Popper meelaynta firfircoon. Ku dami tan `static`.
`offset`	array \| xadhig \| shaqayn	`[0, 2]`	Deminta hoos u dhaca marka loo eego bartilmaameedkiisa. Waxaad ku gudbin kartaa xarkaha xogta sifooyin leh 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: .`[skidding, distance]` Macluumaad dheeraad ah ka eeg dukumeentiyada dhimista ee Popper .
`autoClose`	booliyan \| 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'`- Hoosudhaca waa la xidhi doonaa (kaliya) adigoo gujinaya gudaha liiska hoos u dhaca. `'outside'`- Hoosudhaca waa la xidhi doonaa (kaliya) adoo gujinaya meel ka baxsan liiska hoos u dhaca.
`popperConfig`	waxba \| shay \| shaqayn	`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.

Isticmaalka shaqada leh`popperConfig`

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

Hababka

Habka	Sharaxaada
`toggle`	Wuxuu rogaa 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.
`hide`	Wuxuu qariyaa liiska hoos u dhaca ee navbar la bixiyay ama navigation tab.
`update`	Waxay cusboonaysiisaa booska hoos u dhaca curiyaha
`dispose`	Wuxuu baabi'iyaa hoos u dhaca curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
`getInstance`	Habka istaatigga ah ee kuu oggolaanaya 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)`

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.

Habka	Sharaxaada
`show.bs.dropdown`	Dab isla markiiba marka habka tusaalaha 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.
`hide.bs.dropdown`	Dabka isla markiiba marka habka dhuumashada la waco.
`hidden.bs.dropdown`	La eryo marka hoos u dhigistu dhammaato in laga qariyo isticmaalaha iyo kala-guurka CSS waa dhammaaday.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Hoos u dhac

Dulmar

Helitaanka

Tusaalooyinka

Hal badhan

Badhan kala jeex

Cabbirka

Hoos-u-dhac madow

Tilmaamaha

RTL

Tuur

Dropright

Hoos u dhac

Shayada liiska

Firfircoon

Naafada

Isku toosinta menu

Isku toosin jawaab celin ah

Ikhtiyaarada toosinta

Nuxurka liiska

Madax

Qaybiyayaal

Qoraal

Foomamka

Dhaqan isku dhow oo toos ah

Sass

Kala duwanaansho

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

Tuur

Dropright

Hoos u dhac

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

Dhaqan isku dhow oo toos ah

Sass

Kala duwanaansho

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`