Rach gu prìomh shusbaint Air adhart gu seòladh docs
in English

Droch-dhìol

Tog ath-chòmhdach co-theacsail gus liostaichean de cheanglaichean agus barrachd a thaisbeanadh leis a’ plugan tuiteam-sìos Bootstrap.

Air an duilleig seo

Ro-shealladh

Tha dropdowns nan ath-chòmhdach co-theacsail toggle airson liostaichean de cheanglaichean agus barrachd a thaisbeanadh. Tha iad air an dèanamh eadar-ghnìomhach leis a’ plugan tuiteam-sìos Bootstrap JavaScript. Tha iad air an togail le cliogadh, chan ann le hovering; is e co-dhùnadh dealbhaidh a tha seo a dh’aona ghnothach .

Tha dropdowns air an togail air leabharlann treas pàrtaidh, Popper , a bheir seachad suidheachadh fiùghantach agus lorg sealladh. Dèan cinnteach gun cuir thu a-steach popper.min.js ro JavaScript Bootstrap no cleachd bootstrap.bundle.min.js/ bootstrap.bundle.jsanns a bheil Popper. Cha bhith Popper air a chleachdadh airson dropdowns a shuidheachadh ann am bàraichean seòlaidh ged nach eil feum air suidheachadh fiùghantach.

Ruigsinneachd

Tha inbhe WAI ARIA a’ mìneachadh fìor role="menu"widget , ach tha seo sònraichte do chlàran-bìdh coltach ri tagradh a bhrosnaicheas gnìomhan no gnìomhan. Chan fhaod a bhith ann an clàir-bìdh ARIA ach nithean clàr, nithean clàr bogsa-seic, nithean clàr putan rèidio, buidhnean putan rèidio, agus fo-chlàran.

Air an làimh eile, tha dropdowns Bootstrap air an dealbhadh gus a bhith coitcheann agus iomchaidh airson grunn shuidheachaidhean agus structaran comharrachaidh. Mar eisimpleir, tha e comasach dropdowns a chruthachadh anns a bheil cuir a-steach a bharrachd agus smachdan foirm, leithid raointean sgrùdaidh no foirmean logadh a-steach. Air an adhbhar seo, chan eil Bootstrap a’ dùileachadh (no a’ cur ris gu fèin-ghluasadach) gin de na roleagus na aria-buadhan a tha riatanach airson fìor chlàran ARIA . Feumaidh ùghdaran na buadhan nas sònraichte sin a ghabhail a-steach iad fhèin.

Ach, bidh Bootstrap a’ cur taic a-staigh airson a’ mhòr-chuid de eadar-obrachaidhean clàr meur-chlàr àbhaisteach, leithid an comas gluasad tro .dropdown-itemeileamaidean fa leth a’ cleachdadh iuchraichean a’ chursair agus an clàr a dhùnadh leis an ESCiuchair.

Eisimpleirean

Còmhdaich tog an tuiteam-sìos (am putan no an ceangal agad) agus an clàr a-nuas taobh a-staigh .dropdown, no eileamaid eile a dhearbhas position: relative;. Faodar dropdowns a bhrosnachadh bho <a>no <button>eileamaidean a fhreagras air na feumalachdan a dh’ fhaodadh a bhith agad. Bidh na h-eisimpleirean a chithear an seo a’ cleachdadh <ul>eileamaidean semantach far a bheil sin iomchaidh, ach thathas a’ toirt taic do chomharradh gnàthaichte.

Putan singilte

Faodar singilte sam bith .btna thionndadh gu bhith na tog sìos le beagan atharrachaidhean comharrachaidh. Seo mar as urrainn dhut an cur gu obair le gach <button>eileamaid:

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

Agus le <a>eileamaidean:

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

Is e am pàirt as fheàrr gun urrainn dhut seo a dhèanamh le tionndadh putan sam bith, cuideachd:

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

Putan sgoltadh

San aon dòigh, cruthaich dropdowns putan sgoltadh le cha mhòr an aon chomharra ri tuiteam sìos putan singilte, ach le bhith a’ cur a-steach .dropdown-toggle-splitfarsaingeachd cheart timcheall air a ’chùram tuiteam-sìos.

Bidh sinn a’ cleachdadh a’ chlas a bharrachd seo gus a’ chòmhnard paddingair gach taobh den chùram a lughdachadh 25% agus thoir air falbh an margin-leftfheadhainn a tha air a chur ris airson putanan sìos gu cunbhalach. Bidh na h-atharrachaidhean a bharrachd sin a’ cumail a’ chùram sa mheadhan anns a’ phutan sgoltadh agus a’ toirt seachad àite bualaidh nas freagarraiche ri taobh a’ phrìomh phutan.

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

Meudachadh

Bidh dropdowns putan ag obair le putanan de gach meud, a’ toirt a-steach putanan bunaiteach agus sgoltadh sìos.

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

Còmhraidhean dorcha

Tagh a-steach do dropdowns nas dorcha gus a bhith co-ionnan ri bàr seòlaidh dorcha no stoidhle àbhaisteach le bhith a’ cur ri .dropdown-menu-darkfaidhle .dropdown-menu. Chan eil feum air atharrachaidhean sam bith air na stuthan tuiteam-sìos.

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

Agus ga chleachdadh ann an 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>

Stiùiridhean

RTL

Tha stiùiridhean mar sgàthan nuair a bhios tu a’ cleachdadh Bootstrap ann an RTL, .dropstartbidh brìgh a’ nochdadh air an taobh cheart.

Droch-dhiol

Cruthaich clàr-taice sìos os cionn eileamaidean le bhith a’ cur .dropupris an eileamaid phàrant.

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

Dèan clàir-thaice air taobh deas nan eileamaidean le bhith a’ cur .dropendris an eileamaid phàrant.

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

Droch-dhiol

Dèan clàir-thaice air taobh clì nan eileamaidean le bhith a’ cur .dropstartris an eileamaid phàrant.

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

Faodaidh tu <a>no <button>eileamaidean a chleachdadh mar nithean tuiteam-sìos.

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

Faodaidh tu cuideachd stuthan tuiteam-sìos neo-eadar-ghnìomhach a chruthachadh le .dropdown-item-text. Faodaidh tu stoidhle a bharrachd a dhèanamh le CSS àbhaisteach no goireasan teacsa.

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

Gnìomhach

Cuir .activeri nithean anns a’ chlàr tuiteam-sìos gus an stoidhle mar ghnìomhach . Gus an staid ghnìomhach a thoirt gu teicneòlasan cuideachail, cleachd am aria-currentfeart - a’ cleachdadh pageluach na duilleige làithreach, no trueairson an rud làithreach ann an seata.

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

Ciorramach

Cuir .disabledri nithean anns a’ tuiteam-sìos gus an stoidhle mar ciorramach .

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

Gu gnàthach, tha clàr tuiteam-sìos air a shuidheachadh gu fèin-ghluasadach 100% bhon mhullach agus air taobh clì a phàrant. Faodaidh tu seo atharrachadh leis na .drop*clasaichean stiùiridh, ach faodaidh tu cuideachd smachd a chumail orra le clasaichean mion-atharrachaidh a bharrachd.

Cuir .dropdown-menu-endri a .dropdown-menugu deas co-thaobhadh ris a’ chlàr tuiteam-sìos. Tha stiùireadh air a nochdadh nuair a bhios tu a’ cleachdadh Bootstrap ann an RTL, .dropdown-menu-endbidh brìgh a’ nochdadh air an taobh chlì.

Cinn suas! Tha dropdowns air an suidheachadh le taing dha Popper ach a-mhàin nuair a tha iad ann am bàr seòlaidh. 
<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>

Co-thaobhadh freagairteach

Ma tha thu airson co-thaobhadh freagairteach a chleachdadh, cuir à comas suidheachadh fiùghantach le bhith a’ cur a’ data-bs-display="static"fheart ris agus cleachd na clasaichean atharrachaidh freagairteach.

Gus an clàr tuiteam-sìos a cho-thaobhadh ceart leis a’ phuing-bhriseadh a chaidh a thoirt seachad no nas motha, cuir ris .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>

Gus an clàr-taice clì.dropdown-menu-end a cho-thaobhadh leis a’ phuing-bhriseadh a chaidh a thoirt seachad no nas motha, cuir ris agus .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>

Thoir an aire nach fheum thu data-bs-display="static"feart a chuir ri putanan tuiteam-sìos ann an navbars, leis nach eil Popper air a chleachdadh ann am bàraichean seòlaidh.

Roghainnean co-thaobhadh

A’ gabhail a’ mhòr-chuid de na roghainnean gu h-àrd, seo taisbeanadh sinc cidsin beag de dhiofar roghainnean co-thaobhadh tuiteam-sìos ann an aon àite.

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

Susbaint clàr-taice

Cinn-cinn

Cuir bann-cinn ris gus earrannan de ghnìomhan a chomharrachadh ann an clàr-taice sam bith.

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

Luchd-sgaraidh

Roinn buidhnean de stuthan clàr co-cheangailte le roinneadh.

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

Teacs

Cuir teacsa an-asgaidh sam bith taobh a-staigh clàr-taice le teacsa agus cleachd goireasan eadar-dhealaichte . Thoir an aire gur dòcha gum bi feum agad air stoidhlichean meudachaidh a bharrachd gus leud a’ chlàr a chuingealachadh.

Cuid de theacsa eisimpleir a tha a ’sruthadh gu saor taobh a-staigh a’ chlàr tuiteam-sìos.

Agus seo barrachd eisimpleir teacsa.

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

Foirmean

Cuir foirm taobh a-staigh clàr tuiteam-sìos, no dèan a-steach do chlàr tuiteam-sìos, agus cleachd goireasan iomaill no pleadhaig gus an àite àicheil a tha a dhìth ort a thoirt dha.

Ùr mun cuairt an seo? Cuir d’ainm ris Facal-faire air dearmad? 
<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>

Cleachd data-bs-offsetno data-bs-referenceatharraich suidheachadh a’ chlàr tuiteam-sìos.

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

Giùlan dùnadh fèin-ghluasadach

Gu gnàthach, tha an clàr tuiteam-sìos dùinte nuair a phutas tu taobh a-staigh no taobh a-muigh a’ chlàr tuiteam-sìos. Faodaidh tu an autoCloseroghainn a chleachdadh gus an giùlan seo den tuiteam-sìos atharrachadh.

<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

Caochlaidhean

Caochlaidhean airson a h-uile dropdown:

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

Caochlaidhean airson an tuiteam- sìos dorcha :

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

Caochlaidhean airson na cùraman stèidhichte air CSS a tha a’ nochdadh eadar-ghnìomhachd tuiteam-sìos:

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

Measgachadh

Bithear a’ cleachdadh mheasgachaidhean gus na cùraman stèidhichte air CSS a ghineadh agus gheibhear iad ann an 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;
    }
  }
}

Cleachdadh

Tro bhuadhan dàta no JavaScript, bidh am plugan tuiteam-sìos a’ togail susbaint falaichte (clàran-taice sìos) le bhith a’ togail a’ .showchlas air a’ phàrant .dropdown-menu. Thathas data-bs-toggle="dropdown"an urra ris a’ fheart airson clàran-bìdh a dhùnadh sìos aig ìre tagraidh, agus mar sin is e deagh bheachd a th’ ann a chleachdadh an-còmhnaidh.

Air innealan le comas suathaidh, bidh fosgladh tuiteam-sìos a’ cur innealan- mouseoverlàimhseachaidh falamh ris a’ chloinn a tha faisg air làimh den <body>eileamaid. Feumar am hack grànda seo aideachadh gus obrachadh timcheall air quirk ann an tiomnadh tachartais iOS , a chuireadh casg air tap an àite sam bith taobh a-muigh an tuiteam-sìos bho bhith a’ brosnachadh a ’chòd a dhùineas an tuiteam-sìos. Aon uair ‘s gu bheil an tuiteam-sìos dùinte, thèid na mouseoverlàimhseachadh falamh a bharrachd sin a thoirt air falbh.

Tro fheartan dàta

Cuir data-bs-toggle="dropdown"ri ceangal no putan gus tuiteam sìos a thogail.

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

Air sgàth javascript

Cuir fòn gu na dropdowns tro JavaScript:

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

Ge bith co-dhiù an cuir thu fios chun chlàr tuiteam-sìos agad tro JavaScript no an àite sin cleachd an data-api, data-bs-toggle="dropdown"feumaidh tu an-còmhnaidh a bhith an làthair air eileamaid brosnachaidh an tuiteam-sìos.

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-, mar ann an data-bs-offset="". Dèan cinnteach gun atharraich thu an seòrsa cùis den ainm roghainn bho camelCase gu kebab-case nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, an àite a bhith a’ cleachdadh data-bs-autoClose="false", cleachd data-bs-auto-close="false".

Ainm Seòrsa Deònach Tuairisgeul
boundary sreang | eileamaid 'clippingParents' Crìochan cuibhreachaidh thar-shruth den chlàr tuiteam-sìos (a’ buntainn a-mhàin ri inneal-atharrachaidh preventOverflow Popper). Gu gnàthach tha e 'clippingParents'agus gabhaidh e ri iomradh HTMLElement (tro JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean detectOverflow aig Popper .
reference sreang | eileamaid | nì 'toggle' Eileamaid fiosrachaidh den chlàr tuiteam-sìos. A’ gabhail ri luachan 'toggle', 'parent', iomradh HTMLElement no nì a’ toirt seachad getBoundingClientRect. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean neach- togail Popper agus docaichean eileamaid brìgheil .
display sreang 'dynamic' Gu gnàthach, bidh sinn a’ cleachdadh Popper airson suidheachadh fiùghantach. Cuir seo à comas le static.
offset eagar | sreang | gnìomh [0, 2]

Cuir dheth an tuiteam sìos an coimeas ris an targaid aige. Faodaidh tu sreang a thoirt seachad ann am buadhan dàta le luachan sgaraichte le cromag mar:data-bs-offset="10,20"

Nuair a thèid gnìomh a chleachdadh gus an co-chothromachadh a dhearbhadh, canar le nì anns a bheil suidheachadh popper, an iomradh, agus popper a’ chiad argamaid aige. Tha an eileamaid brosnachaidh DOM air a thoirt seachad mar an dàrna argamaid. Feumaidh an gnìomh sreath a thilleadh le dà àireamh: .[skidding, distance]

Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper .
autoClose boolean | sreang true

Dèan rèiteachadh air giùlan dùnadh fèin-ghluasadach an tuiteam-sìos:

  • true- thèid an tuiteam sìos a dhùnadh le bhith a’ cliogadh taobh a-muigh no taobh a-staigh a’ chlàr tuiteam-sìos.
  • false- thèid an tuiteam-sìos a dhùnadh le bhith a’ briogadh air a’ phutan tog agus a’ gairm hideno togglemodh làimhe. (Cha tèid a dhùnadh cuideachd le putadh air an esciuchair)
  • 'inside'- thèid an tuiteam sìos a dhùnadh (a-mhàin) le bhith a’ cliogadh taobh a-staigh a ’chlàr tuiteam-sìos.
  • 'outside'- thèid an tuiteam-sìos a dhùnadh (a-mhàin) le bhith a’ cliogadh taobh a-muigh a’ chlàr tuiteam-sìos.
popperConfig null | nì | gnìomh null

Gus an rèiteachadh Popper bunaiteach aig Bootstrap atharrachadh, faic rèiteachadh Popper .

Nuair a thèid gnìomh a chleachdadh gus an rèiteachadh Popper a chruthachadh, tha e air a ghairm le nì anns a bheil an rèiteachadh Popper bunaiteach aig Bootstrap. Cuidichidh e thu le bhith a’ cleachdadh agus a’ ceangal a’ bhunait leis an rèiteachadh agad fhèin. Feumaidh an gnìomh rud rèiteachaidh a thilleadh airson Popper.

A 'cleachdadh gnìomh lepopperConfig

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

Dòighean-obrach

Dòigh-obrach Tuairisgeul
toggle Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.
show A’ sealltainn a’ chlàr tuiteam-sìos de bhàr nav no seòladh tabaichte.
hide A’ falach a’ chlàr tuiteam-sìos de bhàr-seòlaidh ainmichte no clàr-seòlaidh.
update Ag ùrachadh suidheachadh tuiteam-sìos eileamaid.
dispose A 'sgrios tuiteam-sìos eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
getInstance Modh statach a leigeas leat an t-eisimpleir tuiteam-sìos fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance Modh statach a thilleas eisimpleir tuiteam-sìos co-cheangailte ri eileamaid DOM no a chruthaicheas fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo:bootstrap.Dropdown.getOrCreateInstance(element)

Tachartasan

Bidh a h-uile tachartas tuiteam sìos air a losgadh aig an eileamaid toggling agus an uairsin air a thogail suas. Mar sin faodaidh tu cuideachd luchd-èisteachd tachartais a chuir air an .dropdown-menueileamaid phàrant. hide.bs.dropdownagus hidden.bs.dropdowntha seilbh aig tachartasan clickEvent(dìreach nuair a tha an seòrsa Tachartas tùsail click) anns a bheil Rud Tachartas airson an tachartas cliog.

Dòigh-obrach Tuairisgeul
show.bs.dropdown A’ losgadh sa bhad nuair a chanar ris an dòigh eisimpleir taisbeanaidh.
shown.bs.dropdown Air a losgadh nuair a tha an tuiteam-sìos air a dhèanamh follaiseach don neach-cleachdaidh agus gu bheil eadar-ghluasadan CSS air tighinn gu crìch.
hide.bs.dropdown A’ losgadh sa bhad nuair a chaidh am modh seiche seiche a ghairm.
hidden.bs.dropdown Air a losgadh nuair a tha an tuiteam-sìos deiseil a bhith falaichte bhon neach-cleachdaidh agus eadar-ghluasadan CSS air tighinn gu crìch. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})