Source

Droch-dhìol

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

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.js , 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.js. Chan eil Popper.js air a chleachdadh gus dropdowns a shuidheachadh ann am bàraichean seòlaidh ged nach eil feum air suidheachadh fiùghantach.

Ma tha thu a’ togail ar JavaScript bhon tùs, feumaidhutil.js e .

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.

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="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Agus le <a>eileamaidean:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Stiùiridhean

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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Droch-dhiol

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

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Gu h-eachdraidheil dh'fheumadh susbaint clàr-taice a bhith mar cheanglaichean, ach chan eil sin fìor tuilleadh le v4. A-nis faodaidh tu <button>eileamaidean a chleachdadh gu roghnach anns na dropdowns agad an àite dìreach <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Faodaidh tu cuideachd nithean 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.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Gnìomhach

Cuir .activeris na nithean anns a’ tuiteam-sìos gus an stoidhle mar ghnìomhach .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Ciorramach

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

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. Cuir .dropdown-menu-rightri a .dropdown-menugu deas co-thaobhadh ris a’ chlàr tuiteam-sìos.

Cinn suas! Tha dropdowns air an suidheachadh le taing dha Popper.js (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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Cinn-cinn

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

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Luchd-sgaraidh

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

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 feum thu stoidhlichean meudachaidh a bharrachd gus leud a’ chlàr a chuingealachadh.

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Cleachdadh

Tro bhuadhan dàta no JavaScript, bidh am plugan a tha a’ tuiteam sìos a’ togail susbaint falaichte (clàran-taice sìos) le bhith a’ togail a’ .showchlas air an liosta phàrant. Thathas data-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-làimhe falamh ( $.noop) mouseoverris 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-toggle="dropdown"ri ceangal no putan gus tuiteam sìos a thogail.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Air sgàth javascript

Cuir fòn gu na dropdowns tro JavaScript:

$('.dropdown-toggle').dropdown()
data-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-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-, mar ann an data-offset="".

Ainm Seòrsa Deònach Tuairisgeul
dheth àireamh | sreang | gnìomh 0 Cuir dheth an tuiteam sìos an coimeas ris an targaid aige. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper.js .
flip boolean fìor Leig le Dropdown sleamhnachadh gun fhios nach bi an eileamaid iomraidh a’ dol thairis air. Airson tuilleadh fiosrachaidh thoir sùil air na docaichean flip aig Popper.js .
crìoch sreang | eileamaid 'scrollParent' Crìochan casg thar-shruth den chlàr tuiteam-sìos. A’ gabhail ri luachan 'viewport', 'window', , 'scrollParent', no iomradh HTMLElement (JavaScript a-mhàin). Airson tuilleadh fiosrachaidh thoir sùil air na docaichean preventOverflow aig Popper.js .
iomradh sreang | eileamaid 'tog' Eileamaid fiosrachaidh den chlàr tuiteam-sìos. A’ gabhail ri luachan 'toggle', 'parent', no iomradh HTMLElement. Airson tuilleadh fiosrachaidh thoir sùil air Popper.jsiomradhObject docs .
taisbeanadh sreang 'fiùghantach' Gu gnàthach, bidh sinn a’ cleachdadh Popper.js airson suidheachadh fiùghantach. Cuir seo à comas le static.

Thoir an aire nuair a thèid boundarya shuidheachadh gu luach sam bith a bharrachd air 'scrollParent', tha an stoidhle position: staticair a chuir a-steach don t- .dropdownsoitheach.

Dòighean-obrach

Dòigh-obrach Tuairisgeul
$().dropdown('toggle') Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.
$().dropdown('update') Ag ùrachadh suidheachadh tuiteam-sìos eileamaid.
$().dropdown('dispose') A 'sgrios tuiteam-sìos eileamaid.

Tachartasan

Tha a h-uile tachartas tuiteam-sìos air a losgadh aig an .dropdown-menueileamaid phàrant agus tha relatedTargetseilbh aca, aig a bheil luach mar an eileamaid acair toglach. hide.bs.dropdownagus hidden.bs.dropdowntha seilbh aig tachartasan clickEvent(dìreach nuair a tha an seòrsa tachartais tùsail click) anns a bheil Rud Tachartas airson an tachartas cliog.

Tachartas Tuairisgeul
show.bs.dropdown Bidh an tachartas seo a’ losgadh sa bhad nuair a chanar ris an dòigh eisimpleir taisbeanaidh.
shown.bs.dropdown Thèid an tachartas seo a losgadh nuair a bhios an tuiteam-sìos ri fhaicinn don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).
hide.bs.dropdown Thèid an tachartas seo a losgadh sa bhad nuair a thèid an dòigh seiche seiche a ghairm.
hidden.bs.dropdown Thèid an tachartas seo a losgadh nuair a tha an tuiteam-sìos deiseil a bhith falaichte bhon neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS, gus a chrìochnachadh).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})