Dropdowns

Shandura kuvharika kwemamiriro ekutaridza rondedzero yezvinongedzo uye nezvimwe neBootstrap yekudonhedza plugin.

Pa peji ino

Overview

Madonhwe anogona kuchinjika, akafukidzirana pamusoro pekuratidzira rondedzero yezvinongedzo nezvimwe. Ivo vanoitwa kupindirana neiyo inosanganisirwa Bootstrap inodonha JavaScript plugin. Vanosandurwa nekudzvanya, kwete nekutenderera; ichi chisarudzo chekugadzira nemaune .

Kudonhedza kwakavakirwa pane yechitatu bato raibhurari, Popper , iyo inopa ine simba chinzvimbo uye kuona kwekuona. Iva nechokwadi chekuisa popper.min.js pamberi peBootstrap's JavaScript kana kushandisa bootstrap.bundle.min.js/ bootstrap.bundle.jsiyo ine Popper. Popper haishandiswe kuisa kudonhedza mumabhara ekufamba asi sechinzvimbo chine simba chisingadiwi.

Accessibility

Iyo WAI ARIA chiyero inotsanangura iyo chaiyo role="menu"widget , asi iyi yakanangana nemamenu ekushandisa anokonzeresa zviito kana mabasa. ARIA mamenu anogona chete kuve nemenu zvinhu, checkbox menyu zvinhu, redhiyo bhatani menyu zvinhu, redhiyo mabhatani mapoka, uye sub-mamenu.

Kudonhedza kweBootstrap, kune rumwe rutivi, kwakagadzirirwa kuve kwakajairwa uye kunoshanda kune akasiyana mamiriro uye makiko zvimiro. Semuyenzaniso, zvinokwanisika kugadzira madonhwe ane zvimwe zvekupinza uye zvidzoreso zvemafomu, senge minda yekutsvaga kana mafomu ekupinda. Nechikonzero ichi, Bootstrap haatarisiri (kana kuwedzera otomatiki) chero roleuye aria-hunhu hunodiwa kune echokwadi ARIA menyu. Vanyori vanozofanira kusanganisira izvi zvakanyanya hunhu ivo pachavo.

Nekudaro, Bootstrap inowedzera yakavakirwa-mukati tsigiro yeakawanda akajairwa kiyibhodhi menyu kupindirana, sekugona kufamba nepakati .dropdown-itempezvinhu zvega uchishandisa makiyi ecursor uye kuvhara menyu ESCnekiyi.

Mienzaniso

Putira iyo yekudonhedza toggle (bhatani rako kana chinongedzo) uye yekudonha menyu mukati .dropdown, kana chimwe chinhu chinozivisa position: relative;. Dropdowns inogona kukonzereswa kubva <a>kana <button>zvinhu kuti zvikwane zvaungade zvaunoda. Mienzaniso inoratidzwa pano inoshandisa semantic <ul>element pazvinenge zvakakodzera, asi tsika markup inotsigirwa.

Bhatani rimwechete

Chero imwe chete .btninogona kushandurwa kuita yekudonhedza dhizaini ine dzimwe markup shanduko. Heano maitiro aungaita kuti ashande nechero <button>zvinhu:

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>

Uye <a>nezvinhu:

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>

Chikamu chakanakisa ndechekuti iwe unogona kuita izvi nechero bhatani musiyano, zvakare:

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

Split bhatani

Saizvozvo, gadzira kupatsanurwa bhatani kudonhedza pamwe neakafanana markup seyomwe bhatani kudonhedza, asi nekuwedzera kwenzvimbo .dropdown-toggle-splityakakodzera yakatenderedza yekudonha caret.

Isu tinoshandisa iyi yekuwedzera kirasi kudzikisa yakachinjika paddingkune chero mativi ecaret ne25% uye kubvisa margin-leftiyo inowedzerwa kune yakajairwa mabhatani kudonhedza. Idzo shanduko dzekuwedzera dzinoita kuti caret igare pakati pebhatani rekutsemura uye inopa yakawedzera saizi yakarova nzvimbo padyo nebhatani guru.

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

Kukura

Mabhatani anodonhedza anoshanda nemabhatani eese saizi, kusanganisira default uye kupatsanura kudonhedza mabhatani.

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

Rima dropdowns

Sarudza mune zvakasviba zvinodonhedza kuti uenderane nerima navbar kana chimiro chetsika nekuwedzera .dropdown-menu-darkpane iripo .dropdown-menu. Hapana shanduko inodiwa pazvinhu zvekudonha.

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>

Uye kuishandisa kushandisa mubhari:

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>

Nhungamiro

RTL

Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL, zvinoreva kuti .dropstartzvichaonekwa kudivi rekurudyi.

Pakati

Ita iyo yekudonhedza menyu yakanangana nechepazasi pekushandura ne .dropdown-centerpachinhu chemubereki.

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>

Dropup

Tamba mamenu ekudonha pamusoro pezvinhu nekuwedzera .dropupkune chinhu chemubereki.

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

Dropup pakati

Gadzira menyu yekudonhedza pamusoro peiyo toggle .dropup-centerpachinhu chemubereki.

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>

Dropend

Tamba mamenu ekudonha kurudyi rwezvinhu nekuwedzera .dropendkune chinhu chemubereki.

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

Dropstart

Tamba mamenu ekudonha kuruboshwe rwezvinhu nekuwedzera .dropstartkune chinhu chemubereki.

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

Iwe unogona kushandisa <a>kana <button>zvinhu sechinhu chinodonha.

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>

Iwe unogona zvakare kugadzira zvisingaite zvekudonhedza zvinhu ne .dropdown-item-text. Inzwa wakasununguka kuwedzera chimiro netsika CSS kana zvinyorwa zvekushandisa.

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>

Active

Wedzera .activekuzvinhu zviri mukudonhedza kuti zvitayera sezviri kushanda . Kuendesa iyo inoshanda kune tekinoroji yekubatsira, shandisa aria-currenthunhu - uchishandisa pagekukosha kweiyo peji, kana truekune yazvino chinhu mune seti.

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>

Yakaremara

Wedzera .disabledkuzvinhu zviri mukudonhedza kuti zvitaera sezvakaremara .

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>

Nekumisikidza, menyu yekudonha inoiswa otomatiki 100% kubva kumusoro uye nekuruboshwe rwemubereki wayo. Unogona kushandura izvi .drop*nemakirasi anotungamira, asi iwe unogona zvakare kuadzora nemamwe makirasi ekugadzirisa.

Wedzera .dropdown-menu-endkune a .dropdown-menukune kurudyi gadzirisa menyu yekudonha. Mafambiro anotaridzwa kana uchishandisa Bootstrap muRTL, zvinoreva kuti .dropdown-menu-endzvichaonekwa kuruboshwe.

Musoro! Dropdowns dzakamiswa nekuda kwePopper kunze kwekunge dziri mubhara.

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>

Kugadzirisa kurongeka

Kana iwe uchida kushandisa inopindirana inopindura, dzima chinzvimbo chine simba nekuwedzera data-bs-display="static"hunhu uye shandisa inopindura mutsauko makirasi.

Kuti uenzanise menyu yekudonha neyakapuwa yakapihwa kana yakakura, wedzera .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

html

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><button class="dropdown-item" type="button">Action</button></li>
    <li><button class="dropdown-item" type="button">Another action</button></li>
    <li><button class="dropdown-item" type="button">Something else here</button></li>
  </ul>
</div>

Kuti uenzanise kuruboshwe menyu yekudonha neyakapihwa yekutyora kana yakakura, wedzera .dropdown-menu-enduye .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>

Ziva kuti haufanire kuwedzera data-bs-display="static"hunhu kumabhatani ekudonhedza mumabhawa, sezvo Popper isingashandiswe mumabhawa.

Alignment options

Kutora akawanda esarudzo anoratidzwa pamusoro, heino diki kicheni sink demo yeakasiyana ekudonhedza kurongeka sarudzo munzvimbo imwechete.

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>

Headers

Wedzera musoro kuti unyore zvikamu zvezviito mune chero kudonha menyu.

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>

Vapesanisi

Mapoka akaparadzana ezvine hukama zvemenu ane divider.

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>

Text

Isa chero mavara emahara mukati memenu yekudonha ine mavara uye shandisa spacing utilities . Ziva kuti iwe ungangoda mamwe masaizi masitaera kumanikidza menyu upamhi.

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>

Mafomu

Isa fomu mukati memenu yekudonhedza, kana gadzira iyo yekudonha menyu, uye shandisa margin kana padding zvishandiso kuti uzvipe iyo isina kunaka nzvimbo yaunoda.

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>

Shandisa data-bs-offsetkana data-bs-referencekushandura nzvimbo yekudonha.

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>

Auto close maitiro

Nekumisikidza, iyo yekudonha menyu inovharwa kana uchidzvanya mukati kana kunze kwekudonhedza menyu. Unogona kushandisa autoClosesarudzo kushandura iyi maitiro ekudonha.

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

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, anodonhedza zvino anoshandisa emuno CSS madhizaini pane .dropdown-menuyekusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

Kugadzirisa kuburikidza neCSS zvinosiyana zvinogona kuonekwa .dropdown-menu-darkpakirasi apo isu tinodarika zvakati zvakakosha pasina kuwedzera duplicate CSS selectors.

  --#{$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 zvakasiyana

Variables kune ese anodonha:

$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

Variables yekudonha kwakasviba :

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

Misiyano yeCSS-based carets inoratidza kudonha kwekudyidzana:

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

Mixins

Mixins inoshandiswa kugadzira iyo CSS-based carets uye inogona kuwanikwa mu 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;
    }
  }
}

Usage

Kuburikidza nedhata hunhu kana JavaScript, iyo yekudonhedza plugin inoshandura zvakavanzika zvemukati (kudonhedza menyu) nekushandura .showkirasi pamubereki .dropdown-menu. Hunhu data-bs-toggle="dropdown"hunovimbwa nahwo pakuvhara mamenu ekudonha padanho rekushandisa, saka ipfungwa yakanaka kugara uchiishandisa.

Pazvishandiso zvinogonesa kubata, kuvhura kudonhedza kunowedzera zvibatiso zvisina chinhu mouseoverkune vekare vana <body>vechinhu. Uku kubhejera kunobvumwa kwakashata kunodiwa kuti ushande zvakatenderedza muiOS' chiitiko delegation , iyo yaizodzivirira tepi chero kupi zvako kunze kwekudonha kubva kukonzeresa kodhi inovhara kudonha. Kamwe kudonhedza kwavharwa, aya ekuwedzera asina chinhu mouseoveranobatika anobviswa.

Via data hunhu

Wedzera data-bs-toggle="dropdown"kune chinongedzo kana bhatani kuti uchinje kudonhedza pasi.

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

Via JavaScript

Fonera zvinodonha kuburikidza neJavaScript:

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

`data-bs-toggle="dropdown"`zvichiri kudiwa

Kunyangwe iwe uchifonera kudonha kwako kuburikidza neJavaScript kana kuti panzvimbo pacho shandisa iyo data-api, data-bs-toggle="dropdown"inogara ichidikanwa kuti unge uripo pane inodonhedza inokonzeresa chinhu.

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Zita	Type	Default	Tsanangudzo
`autoClose`	boolean, tambo	`true`	Gadzirisa maitiro ekuvhara otomatiki ekudonha: `true`- iyo yekudonha ichavharwa nekudzvanya kunze kana mukati meiyo yekudonha menyu. `false`- iyo yekudonha ichavharwa nekudzvanya bhatani rekushandura uye kufona nemaoko `hide`kana `toggle`nzira. (Zvakare hazvizovharwe nekudzvanya `esc`kiyi) `'inside'`- iyo yekudonha ichavharwa (chete) nekudzvanya mukati meiyo yekudonha menyu. `'outside'`- iyo yekudonhedza ichavharwa (chete) nekudzvanya kunze kwekudonhedza menyu. Ongorora: iyo yekudonha inogona kugara yakavharwa `ESC`nekiyi.
`boundary`	tambo, chinhu	`'clippingParents'`	Kufashukira kunomanikidza muganho weiyo inodonha menyu (inoshanda chete kune Popper's kudziviriraOverflow modifier). Nekusagadzikana `clippingParents`ndeye uye inogona kugamuchira HTMLElement referensi (kuburikidza neJavaScript chete). Kuti uwane rumwe ruzivo tarisa kuPopper's detectOverflow docs .
`display`	tambo	`'dynamic'`	Nekumisikidza, isu tinoshandisa Popper kune inoshanduka chinzvimbo. Dzima izvi ne `static`.
`offset`	hurongwa, tambo, basa	`[0, 2]`	Offset yekudonha inoenderana nechinangwa chayo. Iwe unogona kupfuudza tambo mune data hunhu uine comma akapatsanurwa maitiro senge: `data-bs-offset="10,20"`. Kana basa rinoshandiswa kuona kumisa, rinodanwa nechinhu chine popper placement, referensi, uye popper rects senharo yayo yekutanga. Iyo inokonzeresa element DOM node inopfuudzwa seyechipiri nharo. Basa racho rinofanira kudzosa rondedzero ine nhamba mbiri: skidding , chinhambwe . Kuti uwane rumwe ruzivo tarisa kuPopper's offset docs .
`popperConfig`	null, chinhu, basa	`null`	Kuti uchinje Bootstrap's default Popper config, ona Popper's configuration . Kana basa richishandiswa kugadzira iyo Popper kumisikidzwa, inodanwa nechinhu chine Bootstrap's default Popper kumisikidza. Inokubatsira kushandisa uye kubatanidza iyo yakasarudzika neyako gadziriso. Basa racho rinofanira kudzorera chinhu chekugadzirisa chePopper.
`reference`	tambo, chinhu, chinhu	`'toggle'`	Reference element yemenu yekudonha. Inobvuma kukosha kwe `'toggle'`, `'parent'`, HTMLElement referensi kana chinhu chinopa `getBoundingClientRect`. Kuti uwane rumwe ruzivo tarisa kuPopper's constructor docs uye virtual element docs .

Kushandisa basa ne`popperConfig`

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

Nzira

Nzira	Tsanangudzo
`dispose`	Inoparadza kudonha kwechimwe chinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
`getInstance`	Static nzira iyo inokutendera iwe kuti uwane iyo yekudonha muenzaniso yakabatana neiyo DOM chinhu, unogona kuishandisa seizvi: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Static nzira inodzosa muenzaniso wekudonhedza wakabatana nechinhu cheDOM kana kugadzira imwe nyowani kana isina kutangwa. Unogona kuishandisa sezvizvi `bootstrap.Dropdown.getOrCreateInstance(element)`:.
`hide`	Inoviga menyu yekudonhedza yeakapihwa navbar kana tabbed navigation.
`show`	Inoratidza iyo yekudonha menyu yeakapihwa navbar kana tabbed navigation.
`toggle`	Shandura menyu yekudonhedza yakapihwa navbar kana tabbed navigation.
`update`	Inovandudza nzvimbo yekudonha kwechimwe chinhu.

Zviitiko

Zviitiko zvese zvekudonhedza zvinopfurwa pachinhu chekugadzirisa uye zvobva zvaputirwa. Saka iwe unogona zvakare kuwedzera vateereri vechiitiko pane .dropdown-menu's mubereki chinhu. hide.bs.dropdownuye hidden.bs.dropdownzviitiko zvine chivakwa clickEvent(chete kana yekutanga Chiitiko mhando click) ine Chiitiko Chinhu chechiitiko chekudzvanya.

Chiitiko mhando	Tsanangudzo
`hide.bs.dropdown`	Moto pakarepo kana `hide`nzira yemuenzaniso yadanwa.
`hidden.bs.dropdown`	Kudzingwa kana kudonhedza kwapera kuvanzwa kubva kumushandisi uye shanduko yeCSS yapera.
`show.bs.dropdown`	Inodzima moto pakarepo kana `show`nzira yemuenzaniso inodanwa.
`shown.bs.dropdown`	Kudzingwa kana kudonha kwaitwa kuti kuonekwe kumushandisi uye shanduko yeCSS yapera.

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

Dropdowns

Overview

Accessibility

Mienzaniso

Bhatani rimwechete

Split bhatani

Kukura

Rima dropdowns

Nhungamiro

RTL

Pakati

Dropup

Dropup pakati

Dropend

Dropstart

Menu zvinhu

Active

Yakaremara

Menu alignment

Kugadzirisa kurongeka

Alignment options

Menu content

Headers

Vapesanisi

Text

Mafomu

Auto close maitiro

CSS

Variables

Sass zvakasiyana

Mixins

Usage

Via data hunhu

Via JavaScript

`data-bs-toggle="dropdown"`zvichiri kudiwa

Options

Kushandisa basa ne`popperConfig`

Nzira

Zviitiko

Dropdowns

Overview

Accessibility

Mienzaniso

Bhatani rimwechete

Split bhatani

Kukura

Rima dropdowns

Nhungamiro

RTL

Pakati

Dropup

Dropup pakati

Dropend

Dropstart

Menu zvinhu

Active

Yakaremara

Menu alignment

Kugadzirisa kurongeka

Alignment options

Menu content

Headers

Dropdown header

Vapesanisi

Text

Mafomu

Dropdown options

Auto close maitiro

CSS

Variables

Sass zvakasiyana

Mixins

Usage

Via data hunhu

Via JavaScript

data-bs-toggle="dropdown"zvichiri kudiwa

Options

Kushandisa basa nepopperConfig

Nzira

Zviitiko

`data-bs-toggle="dropdown"`zvichiri kudiwa

Kushandisa basa ne`popperConfig`