Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
in English

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:

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

Kuma tare da <a>abubuwa:

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

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.

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

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

Hanyoyi

RTL

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

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>

Dropright

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

Sauke

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

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

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

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.

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

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

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

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 ƙunshe a cikin 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>

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 .

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

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

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

Menu abun ciki

Shugabanni

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

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

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

Wani misali rubutu wanda ke gudana kyauta a cikin menu na zazzagewa.

Kuma wannan shine ƙarin misali rubutu.

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

Sabo a nan? Yi rajista Manta kalmar sirri? 
<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>

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

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

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.

<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

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

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

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-, kamar a cikin data-bs-offset="". Tabbatar canza nau'in shari'ar sunan zaɓi daga raƙumi zuwa kebab-case lokacin ƙaddamar da zaɓuɓɓuka ta hanyar halayen bayanai. Misali, maimakon yin amfani da data-bs-autoClose="false", yi amfani da data-bs-auto-close="false".

Suna Nau'in Default Bayani
boundary zaren | kashi '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 .
reference zaren | 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 .
display kirtani 'dynamic' Ta hanyar tsoho, muna amfani da Popper don matsayi mai ƙarfi. Kashe wannan tare da static.
offset tsararru | zaren | 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: .[skidding, distance]

Don ƙarin bayani koma zuwa Popper's offset docs .
autoClose boolian | kirtani 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 hideko togglehanya. (Haka kuma ba za a rufe ta latsa escmaɓ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.
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 ɗauke 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.

Amfani da aiki tare dapopperConfig

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

Hanyoyin

Hanya Bayani
toggle Yana jujjuya 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.
hide Yana ɓoye menu na zaɓuka na mashigar kewayawa da aka bayar ko kewayawa da aka buga.
update Yana sabunta matsayin zazzagewar kashi.
dispose Yana lalata abubuwan zazzagewa. (Yana cire bayanan da aka adana akan ɓangaren DOM)
getInstance Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin zazzagewa mai alaƙa da abin 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)

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.

Hanya Bayani
show.bs.dropdown Gobara nan da nan lokacin da aka kira hanyar misalin nuni.
shown.bs.dropdown An kori lokacin da zazzagewar ta bayyana ga mai amfani kuma an gama canjin CSS.
hide.bs.dropdown Gobara nan da nan lokacin da aka kira hanyar misalin ɓoye.
hidden.bs.dropdown An kori lokacin da zazzagewar ya gama ɓoye daga mai amfani kuma an gama canjin CSS. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})