Zazzagewa

Juyawa mai rufin mahallin mahallin don nuna jerin hanyoyin haɗin gwiwa da ƙari tare da kayan aikin saukar da Bootstrap.

A wannan shafi

Dubawa

Zazzage-zazzage ana iya jujjuyawa, mai rufin mahallin don nuna jerin hanyoyin haɗin kai da ƙari. An yi su da ma'amala tare da abubuwan da aka haɗa Bootstrap dropdown JavaScript plugin. Ana kunna su ta dannawa, ba ta shawagi ba; wannan yanke shawara ne da gangan .

An gina abubuwan saukarwa akan ɗakin karatu na ɓangare na uku, Popper , wanda ke ba da matsayi mai ƙarfi da gano gani. Tabbatar kun haɗa popper.min.js kafin Bootstrap's JavaScript ko amfani bootstrap.bundle.min.js/ bootstrap.bundle.jswanda ya ƙunshi Popper. Ba a amfani da Popper don sanya jerin abubuwan da aka saukar a cikin navbars kodayake ba a buƙatar matsayi mai ƙarfi.

Dama

Ma'auni na WAI ARIA yana bayyana ainihin role="menu"widget din , amma wannan ya keɓance ga menus-kamar aikace-aikace waɗanda ke haifar da ayyuka ko ayyuka. Menu na ARIA zai iya ƙunsar abubuwan menu kawai, abubuwan menu na akwati, abubuwan menu na maɓallin rediyo, ƙungiyoyin maɓallin rediyo, da ƙananan menus.

Bootstrap's dropdowns, a gefe guda, an ƙirƙira su don zama na yau da kullun kuma ana amfani da su ga yanayi iri-iri da tsarin saɓani. Misali, yana yiwuwa a ƙirƙiri zazzagewa waɗanda ke ƙunshe da ƙarin bayanai da sarrafawa, kamar filayen bincike ko fom ɗin shiga. Saboda wannan dalili, Bootstrap baya tsammanin (ko ƙara ta atomatik) kowane ɗayan roleda aria-halayen da ake buƙata don menu na ARIA na gaskiya. Marubuta dole ne su haɗa waɗannan ƙarin takamaiman halaye da kansu.

Koyaya, Bootstrap yana ƙara ginanniyar goyon baya don yawancin ma'amalar menu na maɓalli na yau da kullun, kamar ikon motsawa ta hanyar .dropdown-itemabubuwa ɗaya ta amfani da maɓallan siginan kwamfuta kuma rufe menu tare da ESCmaɓalli.

Misalai

Kunna maɓallin zazzagewa (maɓallin ku ko hanyar haɗin yanar gizonku) da menu na zaɓuka a cikin .dropdown, ko wani abin da ke bayyana position: relative;. Za a iya jawo saukar saukarwa daga <a>ko <button>abubuwa don dacewa da yuwuwar bukatun ku. Misalai da aka nuna a nan suna amfani <ul>da abubuwa na ma'ana inda ya dace, amma ana samun goyan bayan alamar al'ada.

Maɓalli guda ɗaya

.btnAna iya jujjuya kowane guda ɗaya zuwa juzu'in zazzagewa tare da wasu canje-canje masu alama. Ga yadda zaku iya sanya su aiki tare da kowane <button>abu:

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>

Kuma tare da <a>abubuwa:

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>

Mafi kyawun sashi shine zaku iya yin wannan tare da kowane bambance-bambancen maɓalli, kuma:

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

Maɓallin Raba

Hakazalika, ƙirƙiri maballin tsagawa tare da kusan alama iri ɗaya kamar maɓalli guda ɗaya, amma tare da ƙari .dropdown-toggle-splitdon tazarar da ta dace a kusa da wurin zaɓuka.

Muna amfani da wannan ƙarin ajin don rage kwance paddinga kowane gefe na kulawa da kashi 25% kuma cire margin-leftabin da aka ƙara don maɓalli na yau da kullun. Waɗannan ƙarin canje-canje suna kiyaye kulawar a tsakiya a cikin maɓallin tsaga kuma suna ba da mafi girman yanki mai girman da ya dace kusa da babban maɓallin.

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

Girman girma

Maɓallin zazzagewa yana aiki tare da maɓallai na kowane girma, gami da tsoho da maɓallan zaɓuka masu tsaga.

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

Dark dropdowns

Ficewa zuwa mafi duhun zazzagewa don dacewa da navbar mai duhu ko salo na al'ada ta ƙara .dropdown-menu-darkkan wani data kasance .dropdown-menu. Ba a buƙatar canje-canje ga abubuwan da aka zazzage.

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>

Kuma sanya shi don amfani a cikin 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>

Hanyoyi

RTL

Ana nuna kwatance yayin amfani da Bootstrap a cikin RTL, ma'ana .dropstartzai bayyana a gefen dama.

A tsakiya

Sanya menu na zazzagewa ya kasance a tsakiya ƙasa da juyawa tare da .dropdown-centersashin iyaye.

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>

Juyawa

Fara menu na zazzage sama da abubuwa ta ƙara .dropupzuwa kashi na iyaye.

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

Juyawa a tsakiya

Sanya menu na saukewa a tsakiya sama da juyawa tare da .dropup-centersashin iyaye.

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>

Sauke

Fara menu na zazzage a dama na abubuwan ta ƙara .dropendzuwa kashi na iyaye.

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

Sauke farawa

Fara menu na zazzage a hagu na abubuwan ta ƙara .dropstartzuwa kashi na iyaye.

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

Kuna iya amfani da abubuwa <a>ko <button>abubuwa azaman abubuwan zazzagewa.

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>

Hakanan zaka iya ƙirƙirar abubuwan zazzage abubuwan da ba sa hulɗa tare da .dropdown-item-text. Jin kyauta don ƙara salo tare da CSS na al'ada ko kayan aikin rubutu.

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>

Mai aiki

Ƙara .activezuwa abubuwa a cikin zazzage don sanya su a matsayin masu aiki . Don isar da yanayi mai aiki zuwa fasahar taimako, yi amfani da aria-currentsifa - ta amfani da pageƙimar shafin na yanzu, ko truedon abu na yanzu a cikin saiti.

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>

An kashe

Ƙara .disabledabubuwa a cikin zazzage don yin salo da su azaman nakasassu .

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>

Ta hanyar tsoho, menu na zaɓuka ana sanya shi ta atomatik 100% daga sama da gefen hagu na iyayensa. Kuna iya canza wannan tare da .drop*azuzuwan jagora, amma kuma kuna iya sarrafa su tare da ƙarin azuzuwan masu gyara.

Ƙara .dropdown-menu-endzuwa .dropdown-menudama a daidaita menu na zazzagewa. Ana nuna kwatance yayin amfani da Bootstrap a cikin RTL, ma'ana .dropdown-menu-endzai bayyana a gefen hagu.

A kula! Ana ajiye saukar saukar da godiya ga Popper sai dai lokacin da aka ƙunsa a cikin 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>

Daidaitawa mai amsawa

Idan kana son amfani da jeri mai amsawa, musaki matsayi mai ƙarfi ta ƙara data-bs-display="static"sifa kuma yi amfani da azuzuwan bambance-bambancen amsa.

Don daidaita menu na zazzage dama.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end tare da wurin da aka bayar ko mafi girma, ƙara .

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>

Don daidaita menu na zazzage hagu.dropdown-menu-end tare da wurin da aka bayar ko mafi girma, ƙara da .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>

Lura cewa ba kwa buƙatar ƙara data-bs-display="static"sifa zuwa maɓallan zaɓuka a cikin navbars, tunda ba a amfani da Popper a cikin navbars.

Zaɓuɓɓukan daidaitawa

Ɗaukar mafi yawan zaɓuɓɓukan da aka nuna a sama, ga ƙaramin nunin nunin dafa abinci na zaɓuɓɓukan jeri daban-daban a wuri guda.

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>

Shugabanni

Ƙara taken zuwa lakabin sassan ayyuka a kowane menu na zazzagewa.

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>

Masu rarrabawa

Ƙungiyoyi daban na abubuwan menu masu alaƙa tare da mai rarrabawa.

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>

Rubutu

Sanya kowane rubutu na kyauta a cikin menu na zazzage tare da rubutu kuma yi amfani da abubuwan amfani tazara . Lura cewa ƙila za ku buƙaci ƙarin salon ƙima don takura faɗin menu.

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>

Siffofin

Saka fom a cikin menu na zazzage, ko sanya shi cikin menu na zaɓuka, kuma yi amfani da gefe ko abubuwan amfani don ba shi mummunan sarari da kuke buƙata.

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>

Yi amfani data-bs-offsetko data-bs-referencedon canza wurin zazzagewar.

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>

Halayyar kusanci ta atomatik

Ta hanyar tsoho, menu na zaɓuka yana rufe lokacin danna ciki ko wajen menu na zaɓuka. Kuna iya amfani da autoClosezaɓi don canza wannan hali na zazzagewar.

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

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, zazzagewa yanzu suna amfani da masu canjin CSS na gida .dropdown-menudon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

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

Ana iya ganin keɓancewa ta hanyar masu canji na CSS akan .dropdown-menu-darkajin da muke soke takamaiman ƙima ba tare da ƙara masu zaɓin CSS kwafi ba.

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

Sass masu canji

Canje-canje ga duk zazzagewa:

$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

Canje-canje don zazzagewar duhu :

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

Daban-daban don kulawar tushen CSS waɗanda ke nuna ma'amalar zazzagewa:

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

Mixins

Ana amfani da Mixins don samar da tushen kulawar CSS kuma ana iya samun su a 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;
    }
  }
}

Amfani

Ta hanyar sifofin bayanai ko JavaScript, zazzage plugin ɗin yana jujjuya abun ciki na ɓoye (menun saukarwa) ta hanyar jujjuya .showaji akan iyaye .dropdown-menu. An data-bs-toggle="dropdown"dogara da sifa don rufe menu na zazzagewa a matakin aikace-aikace, don haka yana da kyau a yi amfani da shi koyaushe.

A kan na'urorin da aka kunna taɓawa, buɗe zazzagewa yana ƙara mouseovermasu sarrafa fanko ga yaran da ke kusa da <body>sigar. Wannan admittedly mummuna hack wajibi ne don aiki a kusa da wani quirk a iOS' taron wakilan , wanda in ba haka ba zai hana wani famfo a ko'ina a waje da dropdown daga jawo da code cewa rufe jerin zaɓuka. Da zarar an rufe mouseoverzazzagewar, ana cire waɗannan ƙarin masu sarrafa fanko.

Ta hanyar bayanan halayen

Ƙara data-bs-toggle="dropdown"zuwa hanyar haɗi ko maɓalli don kunna zazzagewa.

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

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

`data-bs-toggle="dropdown"`har yanzu ake bukata

Ko da kun kira zazzagewar ku ta JavaScript ko kuma a maimakon haka amfani da data-api, data-bs-toggle="dropdown"ana buƙatar koyaushe don kasancewa akan abubuwan faɗakarwa.

Zabuka

Kamar yadda za a iya wuce zaɓuɓɓuka ta hanyar sifofin bayanai ko JavaScript, zaku iya ƙara sunan zaɓi zuwa data-bs-, kamar a cikin data-bs-animation="{value}". Tabbatar canza nau'in shari'ar sunan zaɓi daga " CamelCase " zuwa " kebab-case " lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, amfani data-bs-custom-class="beautifier"maimakon data-bs-customClass="beautifier".

Dangane da Bootstrap 5.2.0, duk abubuwan da aka gyara suna goyan bayan sifa da aka keɓance na gwajidata-bs-config wanda zai iya daidaita tsarin sassa mai sauƙi azaman kirtani JSON. Lokacin da kashi yana data-bs-config='{"delay":0, "title":123}'da data-bs-title="456"sifofi, titleƙimar ƙarshe za ta kasance 456kuma keɓantattun halayen bayanan za su soke ƙimar da aka bayar akan data-bs-config. Bugu da ƙari, halayen bayanan da ke akwai suna iya ɗaukar ƙimar JSON kamar data-bs-delay='{"show":0,"hide":150}'.

Suna	Nau'in	Default	Bayani
`autoClose`	boolean, zaren	`true`	Saita yanayin kusancin atomatik na zazzagewa: `true`- za a rufe zazzagewar ta danna waje ko cikin menu na zazzagewa. `false`- za a rufe zazzagewar ta danna maɓallin juyawa da kira da hannu `hide`ko `toggle`hanya. (Haka kuma ba za a rufe ta latsa `esc`maɓalli ba) `'inside'`- Za a rufe zazzagewar (kawai) ta danna cikin menu na zazzagewa. `'outside'`- Za a rufe zazzagewar (kawai) ta danna wajen menu na zazzagewa. Lura: Za a iya rufe zazzagewa koyaushe tare da `ESC`maɓalli.
`boundary`	kirtani, element	`'clippingParents'`	Matsakaicin ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun menu na menu na zaɓuka (ya shafi Popper's preventOverflow modifier kawai). Ta hanyar tsoho yana `clippingParents`kuma yana iya karɓar bayanin HTMLElement (ta JavaScript kawai). Don ƙarin bayani koma zuwa Popper's detectOverflow docs .
`display`	kirtani	`'dynamic'`	Ta hanyar tsoho, muna amfani da Popper don matsayi mai ƙarfi. Kashe wannan tare da `static`.
`offset`	tsararru, kirtani, aiki	`[0, 2]`	Matsakaicin zazzagewa dangane da manufar sa. Kuna iya wuce kirtani a cikin sifofin bayanai tare da raba waƙafi kamar: `data-bs-offset="10,20"`. Lokacin da aka yi amfani da aiki don tantance abin kashewa, ana kiran shi da wani abu mai ɗauke da popper placement, the reference, and popper rects as his first case. An wuce kullin DOM mai jawowa azaman hujja ta biyu. Dole ne aikin ya dawo da jeri tare da lambobi biyu: tsalle -tsalle , nisa . Don ƙarin bayani koma zuwa Popper's offset docs .
`popperConfig`	null, abu, aiki	`null`	Don canza saitunan Popper tsoho na Bootstrap, duba Tsarin Popper . Lokacin da aka yi amfani da aiki don ƙirƙirar tsarin Popper, ana kiran shi da wani abu da ke ƙunshe da tsohowar Popper na Bootstrap. Yana taimaka muku amfani da haɗa tsoho tare da tsarin ku. Dole ne aikin ya dawo da abin daidaitawa don Popper.
`reference`	kirtani, kashi, abu	`'toggle'`	Abubuwan da ake bi na menu na zazzagewa. Yana yarda da ƙimar `'toggle'`, `'parent'`, bayanin HTMLElement ko wani abu yana bayarwa `getBoundingClientRect`. Don ƙarin bayani koma zuwa Popper's constructor docs da kama-da -wane takardun docs .

Amfani da aiki tare da`popperConfig`

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

Hanyoyin

Hanya	Bayani
`dispose`	Yana lalata abubuwan zazzagewa. (Yana cire bayanan da aka adana akan ɓangaren DOM)
`getInstance`	Hanyar a tsaye wacce ke ba ku damar samun misalin zazzagewar da ke da alaƙa da nau'in DOM, zaku iya amfani da shi kamar haka: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Hanya madaidaiciya wacce ke dawo da misalin zazzagewa mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Yana ɓoye menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga.
`show`	Yana nuna menu na zazzagewa na mashigin kewayawa da aka bayar ko kewayawa ta shafi.
`toggle`	Yana jujjuya menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga.
`update`	Yana sabunta matsayin zazzagewar kashi.

Abubuwan da suka faru

Ana harba duk abubuwan da suka faru a zazzagewa akan abin da ke jujjuyawa sannan kuma a kumfa. Don haka kuna iya ƙara masu sauraron taron akan .dropdown-menuɓangaren iyaye. hide.bs.dropdownkuma hidden.bs.dropdownabubuwan da suka faru suna da clickEventdukiya (kawai lokacin da ainihin nau'in Abubuwan da suka faru shine click) wanda ya ƙunshi Abun Abubuwan da ke faruwa don taron dannawa.

Nau'in taron	Bayani
`hide.bs.dropdown`	Gobara nan da nan lokacin da `hide`aka kira hanyar misali.
`hidden.bs.dropdown`	An kori lokacin da zazzagewar ya gama ɓoye daga mai amfani kuma an gama canjin CSS.
`show.bs.dropdown`	Gobara nan da nan lokacin da `show`aka kira hanyar misali.
`shown.bs.dropdown`	An kori lokacin da zazzagewar ta bayyana ga mai amfani kuma an gama canjin CSS.

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

Zazzagewa

Dubawa

Dama

Misalai

Maɓalli guda ɗaya

Maɓallin Raba

Girman girma

Dark dropdowns

Hanyoyi

RTL

A tsakiya

Juyawa

Juyawa a tsakiya

Sauke

Sauke farawa

Abubuwan menu

Mai aiki

An kashe

Daidaita menu

Daidaitawa mai amsawa

Zaɓuɓɓukan daidaitawa

Menu abun ciki

Shugabanni

Masu rarrabawa

Rubutu

Siffofin

Halayyar kusanci ta atomatik

CSS

Masu canji

Sass masu canji

Mixins

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

`data-bs-toggle="dropdown"`har yanzu ake bukata

Zabuka

Amfani da aiki tare da`popperConfig`

Hanyoyin

Abubuwan da suka faru

Zazzagewa

Dubawa

Dama

Misalai

Maɓalli guda ɗaya

Maɓallin Raba

Girman girma

Dark dropdowns

Hanyoyi

RTL

A tsakiya

Juyawa

Juyawa a tsakiya

Sauke

Sauke farawa

Abubuwan menu

Mai aiki

An kashe

Daidaita menu

Daidaitawa mai amsawa

Zaɓuɓɓukan daidaitawa

Menu abun ciki

Shugabanni

Jigon saukarwa

Masu rarrabawa

Rubutu

Siffofin

Zaɓuɓɓukan saukarwa

Halayyar kusanci ta atomatik

CSS

Masu canji

Sass masu canji

Mixins

Amfani

Ta hanyar bayanan halayen

Ta hanyar JavaScript

data-bs-toggle="dropdown"har yanzu ake bukata

Zabuka

Amfani da aiki tare dapopperConfig

Hanyoyin

Abubuwan da suka faru

`data-bs-toggle="dropdown"`har yanzu ake bukata

Amfani da aiki tare da`popperConfig`