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:

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>

Agus le <a>eileamaidean:

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>

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.

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>

Agus ga chleachdadh ann an navbar:

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>

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.

Meadhanaichte

Dèan an clàr tuiteam-sìos stèidhichte fon toggle leis .dropdown-centeran eileamaid phàrant.

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>

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>

Dropup stèidhichte

Dèan an clàr-taice a tha stèidhichte os cionn an toggle leis .dropup-centeran eileamaid phàrant.

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>

Dropainn

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

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

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

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>

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.

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>

Gnìomhach

Cuir .activeris na nithean anns a’ 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.

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>

Ciorramach

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

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>

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.

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>

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.

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>

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.

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>

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.

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>

Cinn-cinn

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

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>

Luchd-sgaraidh

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

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>

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.

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>

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.

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>

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

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>

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.

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

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap a tha ag atharrachadh, bidh dropdowns a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .dropdown-menuairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

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

Chithear gnàthachadh tro chaochladairean CSS air a’ .dropdown-menu-darkchlas far am bi sinn a’ dol thairis air luachan sònraichte gun a bhith a’ cur luchd-taghaidh CSS dùblaichte ris.

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

caochladairean Sass

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

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

Air sgàth javascript

Cuir fòn gu na dropdowns tro JavaScript:

const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
const dropdownList = [...dropdownElementList].map(dropdownToggleEl => 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

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Ainm	Seòrsa	Deònach	Tuairisgeul
`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 `hide`no `toggle`modh làimhe. (Cha tèid a dhùnadh cuideachd le putadh air an `esc`iuchair) `'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. Thoir an aire: faodar an tuiteam-sìos a dhùnadh leis an `ESC`iuchair an-còmhnaidh.
`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 .
`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: sleamhnachadh , astar . Airson tuilleadh fiosrachaidh thoir sùil air na docaichean dheth Popper .
`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.
`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 .

A 'cleachdadh gnìomh le`popperConfig`

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

Dòighean-obrach

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios tuiteam-sìos eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
`getInstance`	Dòigh statach a leigeas leat an 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)`.
`hide`	A’ falach a’ chlàr tuiteam-sìos de bhàr-seòlaidh ainmichte no clàr-seòlaidh.
`show`	A’ sealltainn a’ chlàr tuiteam-sìos de bhàr nav no seòladh tabaichte.
`toggle`	Tog an clàr-taice sìos de bhàr-seòlaidh ainmichte no seòladh tabaichte.
`update`	Ag ùrachadh suidheachadh tuiteam-sìos eileamaid.

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.

Seòrsa tachartas	Tuairisgeul
`hide.bs.dropdown`	A’ losgadh sa bhad nuair a chaidh an `hide`dòigh eisimpleir 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.
`show.bs.dropdown`	A’ losgadh sa bhad nuair `show`a chanar ris an dòigh eisimpleir.
`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.

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

Droch-dhìol

Ro-shealladh

Ruigsinneachd

Eisimpleirean

Putan singilte

Putan sgoltadh

Meudachadh

Còmhraidhean dorcha

Stiùiridhean

RTL

Meadhanaichte

Droch-dhiol

Dropup stèidhichte

Dropainn

Dropstart

Feartan clàr-taice

Gnìomhach

Ciorramach

Co-thaobhadh clàr-taice

Co-thaobhadh freagairteach

Roghainnean co-thaobhadh

Susbaint clàr-taice

Cinn-cinn

Luchd-sgaraidh

Teacs

Foirmean

Giùlan dùnadh fèin-ghluasadach

CSS

Caochlaidhean

caochladairean Sass

Measgachadh

Cleachdadh

Tro fheartan dàta

Air sgàth javascript

`data-bs-toggle="dropdown"`fhathast a dhìth

Roghainnean

A 'cleachdadh gnìomh le`popperConfig`

Dòighean-obrach

Tachartasan

Droch-dhìol

Ro-shealladh

Ruigsinneachd

Eisimpleirean

Putan singilte

Putan sgoltadh

Meudachadh

Còmhraidhean dorcha

Stiùiridhean

RTL

Meadhanaichte

Droch-dhiol

Dropup stèidhichte

Dropainn

Dropstart

Feartan clàr-taice

Gnìomhach

Ciorramach

Co-thaobhadh clàr-taice

Co-thaobhadh freagairteach

Roghainnean co-thaobhadh

Susbaint clàr-taice

Cinn-cinn

Ceann-uidhe tuiteam-sìos

Luchd-sgaraidh

Teacs

Foirmean

Roghainnean tuiteam-sìos

Giùlan dùnadh fèin-ghluasadach

CSS

Caochlaidhean

caochladairean Sass

Measgachadh

Cleachdadh

Tro fheartan dàta

Air sgàth javascript

data-bs-toggle="dropdown"fhathast a dhìth

Roghainnean

A 'cleachdadh gnìomh lepopperConfig

Dòighean-obrach

Tachartasan

`data-bs-toggle="dropdown"`fhathast a dhìth

A 'cleachdadh gnìomh le`popperConfig`