Jya ku bintu nyamukuru Jya kuri docs
in English

Ibitonyanga

Kuzuza ibice byuzuye kugirango werekane urutonde rwihuza nibindi hamwe na Bootstrap yamanutse.

Kuriyi page

Incamake

Ibitonyanga birashobora guhindagurika, guhuza ibice kugirango werekane urutonde rwihuza nibindi byinshi. Byakozwe muburyo bwimikorere ya Bootstrap yamanutse plugin ya JavaScript. Barahindurwa mukanda, ntabwo ari ukuzunguruka; iki nicyemezo cyo gushushanya nkana .

Ibitonyanga byubatswe kububiko bwibitabo bwagatatu, Popper , itanga umwanya uhagaze hamwe no kureba. Wemeze gushyiramo popper.min.js mbere ya JavaScript ya Bootstrap cyangwa ukoreshe bootstrap.bundle.min.js/ bootstrap.bundle.jsirimo Popper. Popper ntabwo ikoreshwa kugirango ihagarike ibitonyanga muri navbars nubwo nkibikorwa bya dinamike bidasabwa.

Kuboneka

Igipimo cya WAI ARIA gisobanura role="menu"widget ifatika , ariko ibi birihariye kubisabwa-nkibikubiyemo bitera ibikorwa cyangwa imikorere. Ibikubiyemo bya ARIA birashobora gusa kuba bikubiyemo ibintu, kugenzura agasanduku k'ibikubiyemo, ibintu bya radiyo buto ya menu, amatsinda ya buto ya radio, na sub-menus.

Ibitonyanga bya Bootstrap, kurundi ruhande, byashizweho kugirango bibe rusange kandi bikurikizwa mubihe bitandukanye no kuranga imiterere. Kurugero, birashoboka gukora ibitonyanga birimo inyongeramusaruro ninyongera kugenzura, nkibice byo gushakisha cyangwa ifishi yinjira. Kubwiyi mpamvu, Bootstrap ntabwo yiteze (cyangwa guhita yongeraho) icyaricyo cyose rolenibiranga aria-bisabwa kuri ARIA nyayo . Abanditsi bagomba gushyiramo ibi biranga byihariye ubwabo.

Ariko, Bootstrap yongeramo inkunga-yubufasha bwa menu ya clavier isanzwe ikora, nkubushobozi bwo kunyura .dropdown-itemmubintu bitandukanye ukoresheje urufunguzo rwa indanga no gufunga menu ESCnurufunguzo.

Ingero

Kuzuza ibimanuka (buto yawe cyangwa ihuza) na menu yamanutse imbere .dropdown, cyangwa ikindi kintu gitangaza position: relative;. Ibitonyanga birashobora gukururwa bivuye <a>cyangwa <button>ibintu kugirango bihuze neza nibyo ukeneye. Ingero zerekanwa hano zikoresha <ul>ibintu bisobanutse aho bikenewe, ariko ikimenyetso cyihariye kirashyigikiwe.

Akabuto kamwe

Ikintu icyo aricyo cyose .btngishobora guhinduka kumanuka uhindagurika hamwe nibimenyetso byahindutse. Dore uburyo ushobora kubashyira mubikorwa hamwe <button>nibintu:

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

Kandi hamwe <a>nibintu:

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

Igice cyiza nuko ushobora kubikora ukoresheje buto iyo ariyo yose, nayo:

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

Gutandukanya buto

Mu buryo busa nabwo, kora ibice bitandukanya ibice byamanutse hamwe nikimenyetso kimwe kimwe na buto imwe yamanutse, ariko hamwe no kongeramo .dropdown-toggle-splitumwanya ukwiye hafi yigitonyanga.

Dukoresha iri somo ryinyongera kugirango tugabanye horizontal paddingkumpande zombi za caret kuri 25% hanyuma dukureho margin-leftibyo byongeweho kubisanzwe bya buto. Izo mpinduka zinyongera zituma caret yibanze muri bouton igabanijwe kandi igatanga ahantu hanini cyane hit hitabwa kuruhande rwa buto nkuru.

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

Ingano

Utubuto tumanuka dukorana na buto yubunini bwose, harimo nibisanzwe no kugabanura ibitonyanga.

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

Ibitonyanga byijimye

Hitamo muburyo bwijimye kugirango uhuze na navbar yijimye cyangwa uburyo bwihariye wongeyeho .dropdown-menu-darkkubihari .dropdown-menu. Nta gihinduka gisabwa kubintu byamanutse.

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

Kandi kuyishyira mugukoresha 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>

Icyerekezo

RTL

Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri RTL, bivuze .dropstartko izagaragara kuruhande rwiburyo.

Ibitonyanga

Imbarutso yamanutse iboneka hejuru yibintu wongeyeho .dropupkubabyeyi.

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

Ibitonyanga

Imbarutso yamanutse iboneka iburyo bwibintu wongeyeho .dropendkubabyeyi.

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

Ibitonyanga

Imbarutso yamanutse iboneka ibumoso bwibintu wongeyeho .dropstartkubabyeyi.

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

Urashobora gukoresha <a>cyangwa <button>ibintu nkibintu byamanutse.

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

Urashobora kandi gukora ibintu bitagabanije kumanura ibintu hamwe .dropdown-item-text. Wumve neza ko wuburyo bwiza hamwe na CSS yihariye cyangwa ibikoresho byingirakamaro.

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

Bikora

Ongeraho .activemubintu mumanuka kugirango ubitondere nkibikorwa . Kugirango utange leta ikora kugirango ifashe ikoranabuhanga, koresha aria-currentikiranga - ukoresheje pageagaciro kurupapuro rwubu, cyangwa truekubintu biri mumurongo.

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

Abamugaye

Ongeraho .disabledmubintu biri kumanuka kugirango ubitondere nkuko byahagaritswe .

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

Mburabuzi, menu yamanutse ihita ishyirwa 100% uhereye hejuru no kuruhande rwibumoso rwababyeyi. Urashobora guhindura ibi hamwe nibyiciro byerekezo .drop*, ariko urashobora no kubigenzura hamwe namasomo yinyongera yo guhindura.

Ongeraho iburyo .dropdown-menu-endkugirango .dropdown-menuuhuze menu yamanutse. Icyerekezo kirimo indorerwamo mugihe ukoresheje Bootstrap muri RTL, bivuze .dropdown-menu-endko izagaragara kuruhande rwibumoso.

Umutwe! Ibitonyanga byashyizwe kumurongo dukesha Popper usibye iyo bikubiye muri 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>

Guhuza ibisubizo

Niba ushaka gukoresha ihuza ryitondewe, hagarika dinamike ihagaze wongeyeho data-bs-display="static"ikiranga kandi ukoreshe ibyiciro bitandukanye.

Guhuza iburyo ibimanuka hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .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>

Guhuza ibumoso bwamanutse hamwe nibisobanuro byatanzwe cyangwa binini, ongeraho .dropdown-menu-endna .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>

Menya ko udakeneye kongeramo data-bs-display="static"ikiranga kumanuka utubuto muri navbars, kubera ko Popper idakoreshwa muri navbars.

Guhitamo

Ufashe ibyinshi mumahitamo yerekanwe hejuru, dore igikoni gito cyo mu gikoni cyerekana uburyo butandukanye bwo guhuza ibiciro ahantu hamwe.

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

Ibikubiyemo

Imitwe

Ongeraho umutwe kumurango ibice byibikorwa muri menu yamanutse.

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

Abatandukanya

Tandukanya amatsinda yibintu bifitanye isano nibice.

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

Inyandiko

Shira inyandiko iyo ari yo yose yubuntu muri menu yamanutse hamwe ninyandiko hanyuma ukoreshe umwanya utandukanye . Menya ko ushobora gukenera inyongera zingana kugirango ubuze menu ubugari.

Ingero zimwe inyandiko zirimo ubusa-zitemba muri menu yamanutse.

Kandi iyi ni urugero rwinyandiko.

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

Ifishi

Shira ifishi muri menu yamanutse, cyangwa uyigire muri menu yamanutse, hanyuma ukoreshe margin cyangwa padding utanga kugirango uhe umwanya mubi ukeneye.

Gishya hano? Iyandikishe Wibagiwe ijambo ryibanga? 
<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>

Koresha data-bs-offsetcyangwa data-bs-referenceuhindure ahantu hamanuka.

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

Imodoka yegeranye

Mburabuzi, ibimanuka byafunzwe iyo ukanze imbere cyangwa hanze ya menu yamanutse. Urashobora gukoresha autoCloseuburyo bwo guhindura iyi myitwarire yo guta.

<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

Ibihinduka

Ibihinduka kubintu byose byamanutse:

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

Ibihinduka kumanuka wijimye :

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

Ibihinduka kuri CSS ishingiye kuri carets yerekana imikoranire yamanuka:

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

Imvange

Imvange zikoreshwa mukubyara CSS ishingiye kumurongo kandi urashobora kuboneka muri 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;
    }
  }
}

Ikoreshwa

Binyuze muri data ibiranga cyangwa JavaScript, plugin yamanutse ihindura ibintu byihishe (ibimanuka byamanutse) uhinduranya .showishuri kubabyeyi .dropdown-menu. Ikiranga data-bs-toggle="dropdown"gishingiye ku gufunga ibimanuka kurutonde rwa porogaramu, nibyiza rero guhora tuyikoresha.

Kubikoresho bifasha gukoraho, gufungura ibitonyanga byongeramo ibikoresho byubusa mouseoverkubana bahita ba <body>element. Ibi byemewe ko ari hack birakenewe kugirango dukore hafi yikinamico mu ntumwa za iOS , ibyo bikaba byabuza gukanda ahantu hose hanze y’igitonyanga gukurura code ifunga ibitonyanga. Iyo ibitonyanga bimaze gufungwa, ibyo byongeweho ubusa mouseoverbikurwaho.

Binyuze mu biranga amakuru

Ongeraho data-bs-toggle="dropdown"kumurongo cyangwa buto kugirango uhindure ibitonyanga.

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

Binyuze kuri JavaScript

Hamagara ibitonyanga ukoresheje JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"biracyasabwa

Utitaye ko wahamagaye ibitonyanga ukoresheje JavaScript cyangwa ugakoresha data-api, data-bs-toggle="dropdown"burigihe birasabwa kuba uhari kubintu byamanutse.

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-, Nka Muri data-bs-offset="". Witondere guhindura ubwoko bwurubanza rwamazina kuva kuri camelCase kuri kebab-urubanza mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, aho gukoresha data-bs-autoClose="false", koresha data-bs-auto-close="false".

Izina Andika Mburabuzi Ibisobanuro
boundary umugozi | element 'clippingParents' Kurenga imipaka ntarengwa ya menu yamanutse (ikoreshwa gusa kuri popper yo gukumiraOverflow modifier). Mubusanzwe ni 'clippingParents'kandi irashobora kwemera HTMLElement (ukoresheje JavaScript gusa). Kubindi bisobanuro reba popper's detectOverflow docs .
reference umugozi | ikintu | ikintu 'toggle' Ibikoresho byerekana ibintu byamanutse. Emera indangagaciro za 'toggle',, 'parent'HTMLElement yerekanwe cyangwa ikintu gitanga getBoundingClientRect. Kubindi bisobanuro reba popper yubaka docs hamwe nibintu bisanzwe .
display umugozi 'dynamic' Mburabuzi, dukoresha Popper kumwanya uhagaze. Hagarika ibi hamwe static.
offset array | umugozi | imikorere [0, 2]

Kureka kugabanuka ugereranije nintego yayo. Urashobora gutambutsa umurongo muri data ibiranga hamwe na koma yatandukanijwe indangagaciro nka:data-bs-offset="10,20"

Iyo imikorere ikoreshwa mukumenya offset, yitwa hamwe nikintu kirimo icyerekezo cya popper, icyerekezo, hamwe na popper ikosora nkibitekerezo byayo byambere. Ikintu gikurura DOM node yatambutse nkimpaka ya kabiri. Igikorwa kigomba gusubiza umurongo hamwe nimibare ibiri : .[skidding, distance]

Kubindi bisobanuro reba kuri popper ya offset .
autoClose boolean | umugozi true

Hindura ibinyabiziga bifunga imyitwarire yamanuka:

  • true- ibitonyanga bizafungwa ukanze hanze cyangwa imbere muri menu yamanutse.
  • false- ibitonyanga bizafungwa ukanze buto yo guhinduranya no guhamagara intoki hidecyangwa toggleuburyo. (Na none ntabwo bizafungwa ukanze escurufunguzo)
  • 'inside'- ibitonyanga bizafungwa (gusa) ukanze imbere muri menu yamanutse.
  • 'outside'- ibitonyanga bizafungwa (gusa) ukanze hanze menu yamanutse.
popperConfig null | ikintu | imikorere null

Guhindura Bootstrap isanzwe ya Popper config, reba iboneza rya Popper .

Iyo imikorere ikoreshwa mugukora iboneza rya Popper, byitwa hamwe nikintu kirimo Bootstrap idasanzwe ya Popper. Iragufasha gukoresha no guhuza ibisanzwe hamwe nuburyo bwawe bwite. Imikorere igomba gusubiza ibintu byabugenewe kuri Popper.

Gukoresha imikorere hamwepopperConfig

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

Uburyo

Uburyo Ibisobanuro
toggle Kuzuza menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.
show Erekana ibimanuka byamanuka ya navbar yatanzwe cyangwa tabbed navigation.
hide Hisha menu yamanutse ya navbar yatanzwe cyangwa kugendagenda.
update Kuvugurura umwanya wibintu byamanutse.
dispose Gusenya ikintu cyamanutse. (Kuraho amakuru yabitswe kubintu bya DOM)
getInstance Uburyo buhamye butuma ubona urugero rwamanutse rujyanye nibintu bya DOM, urashobora kubikoresha gutya:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Uburyo buhagaze busubiza ibintu byamanutse bifitanye isano na DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya:bootstrap.Dropdown.getOrCreateInstance(element)

Ibyabaye

Ibintu byose byamanutse birasa kubintu bihindagurika hanyuma bikabyimba. Urashobora rero kongeramo ibyabaye abumva kubintu .dropdown-menubyababyeyi. nibyabaye bifite hide.bs.dropdownumutungo (gusa iyo ubwoko bwambere bwubwoko bwabaye ) burimo Ikintu cyabaye cyo gukanda ibyabaye.hidden.bs.dropdownclickEventclick

Uburyo Ibisobanuro
show.bs.dropdown Umuriro uhita iyo kwerekana urugero uburyo bwitwa.
shown.bs.dropdown Umuriro iyo ibitonyanga byakozwe kugaragara kubakoresha kandi inzibacyuho ya CSS yarangiye.
hide.bs.dropdown Umuriro uhita iyo uburyo bwo guhisha bwahamagawe.
hidden.bs.dropdown Umuriro mugihe ibitonyanga byarangije guhishwa kumukoresha na CSS inzibacyuho zirangiye. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})