Cwympiadau

Toglo troshaenau cyd-destunol ar gyfer arddangos rhestrau o ddolenni a mwy gyda'r gwymplen Bootstrap.

Ar y dudalen hon

Trosolwg

Mae cwymplenni yn droshaenau cyd-destunol y gellir eu toglo ar gyfer arddangos rhestrau o ddolenni a mwy. Fe'u gwneir yn rhyngweithiol gyda'r ategyn JavaScript cwymplen Bootstrap sydd wedi'i gynnwys. Cânt eu toglo trwy glicio, nid trwy hofran; penderfyniad dylunio bwriadol yw hwn .

Mae cwymplenni wedi'u hadeiladu ar lyfrgell trydydd parti, Popper , sy'n darparu lleoliad deinamig a chanfod golygfannau. Gwnewch yn siŵr eich bod yn cynnwys popper.min.js cyn JavaScript Bootstrap neu defnyddiwch bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper. Nid yw popper yn cael ei ddefnyddio i osod cwymplenni mewn barrau llywio gan nad oes angen lleoli dynamig.

Hygyrchedd

Mae safon WAI ARIA yn diffinio role="menu"teclyn gwirioneddol , ond mae hyn yn benodol i fwydlenni tebyg i gymhwysiad sy'n sbarduno gweithredoedd neu swyddogaethau. Gall bwydlenni ARIA gynnwys eitemau dewislen yn unig, eitemau dewislen blwch ticio, eitemau dewislen botwm radio, grwpiau botwm radio, ac is-ddewislenni.

Ar y llaw arall, mae cwymplenni Bootstrap wedi'u cynllunio i fod yn generig ac yn berthnasol i amrywiaeth o sefyllfaoedd a strwythurau marcio. Er enghraifft, mae'n bosibl creu cwymplenni sy'n cynnwys mewnbynnau ychwanegol a rheolyddion ffurflen, megis meysydd chwilio neu ffurflenni mewngofnodi. Am y rheswm hwn, nid yw Bootstrap yn disgwyl (nac yn ychwanegu'n awtomatig) unrhyw un o'r nodweddion rolea'r aria-priodoleddau sydd eu hangen ar gyfer gwir fwydlenni ARIA . Bydd yn rhaid i awduron gynnwys y nodweddion mwy penodol hyn eu hunain.

Fodd bynnag, mae Bootstrap yn ychwanegu cefnogaeth adeiledig ar gyfer y rhan fwyaf o ryngweithiadau dewislen bysellfwrdd safonol, megis y gallu i symud trwy .dropdown-itemelfennau unigol gan ddefnyddio'r bysellau cyrchwr a chau'r ddewislen gyda'r ESCallwedd.

Enghreifftiau

Lapiwch dogl y gwymplen (eich botwm neu ddolen) a'r gwymplen o fewn .dropdown, neu elfen arall sy'n datgan position: relative;. Gall cwympiadau gael eu sbarduno o <a>neu <button>elfennau i gyd-fynd yn well â'ch anghenion posibl. Mae'r enghreifftiau a ddangosir yma yn defnyddio elfennau semantig <ul>lle bo'n briodol, ond cefnogir marcio personol.

Botwm sengl

Gellir troi unrhyw sengl .btnyn dogl cwymplen gyda rhai newidiadau marcio. Dyma sut y gallwch chi eu rhoi ar waith gyda'r naill <button>elfen neu'r llall:

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>

A chydag <a>elfennau:

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>

Y rhan orau yw y gallwch chi wneud hyn gydag unrhyw amrywiad botwm hefyd:

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

Botwm hollti

Yn yr un modd, crëwch gwymplenni botwm hollt gyda bron yr un marcio i fyny â'r cwymplenni botwm sengl, ond gan ychwanegu .dropdown-toggle-splitbylchau priodol o amgylch y cwymplen.

Rydym yn defnyddio'r dosbarth ychwanegol hwn i leihau'r llorweddol paddingar y naill ochr a'r llall i'r caret 25% a chael gwared ar yr margin-leftun sy'n cael ei ychwanegu ar gyfer cwympiadau botwm rheolaidd. Mae'r newidiadau ychwanegol hynny yn cadw'r caret wedi'i ganoli yn y botwm hollti ac yn darparu ardal daro o faint mwy priodol wrth ymyl y prif botwm.

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

Maintioli

Mae cwymplenni botwm yn gweithio gyda botymau o bob maint, gan gynnwys botymau cwymplen rhagosodedig a hollt.

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

Cwympiadau tywyll

Optio i mewn i gwymplenni tywyllach i gyd-fynd â bar llywio tywyll neu arddull arferol trwy ychwanegu .dropdown-menu-darkat un sy'n bodoli eisoes .dropdown-menu. Nid oes angen unrhyw newidiadau i'r eitemau cwymplen.

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>

A'i roi i'w ddefnyddio mewn bar llywio:

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>

Cyfarwyddiadau

RTL

Mae cyfarwyddiadau'n cael eu hadlewyrchu wrth ddefnyddio Bootstrap yn RTL, sy'n golygu .dropstarty bydd yn ymddangos ar yr ochr dde.

Wedi'i ganoli

Gwnewch y gwymplen wedi'i chanoli o dan y togl gyda'r .dropdown-centerelfen rhiant.

html

<div class="dropdown-center">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropup

Sbardun cwymplenni uwchben elfennau trwy ychwanegu .dropupat y rhiant elfen.

<!-- 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 wedi'i ganoli

Gwnewch y ddewislen gollwng wedi'i chanoli uwchben y togl gyda'r .dropup-centerrhiant elfen.

html

<div class="dropup-center dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Centered dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action two</a></li>
    <li><a class="dropdown-item" href="#">Action three</a></li>
  </ul>
</div>

Dropend

Sbardun dewislenni ar ochr dde'r elfennau drwy ychwanegu .dropendat y rhiant elfen.

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

Sbardun dewislenni ar ochr chwith yr elfennau drwy ychwanegu .dropstartat y rhiant elfen.

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

Gallwch ddefnyddio <a>neu <button>elfennau fel eitemau cwymplen.

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>

Gallwch hefyd greu eitemau cwymplen nad ydynt yn rhyngweithiol gyda .dropdown-item-text. Mae croeso i chi steilio ymhellach gyda CSS personol neu gyfleustodau testun.

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>

Actif

Ychwanegu .activeat eitemau yn y gwymplen i'w steilio fel rhai gweithredol . I gyfleu'r cyflwr gweithredol i dechnolegau cynorthwyol, defnyddiwch y aria-currentpriodoledd - gan ddefnyddio'r pagegwerth ar gyfer y dudalen gyfredol, neu truear gyfer yr eitem gyfredol mewn set.

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>

Anabl

Ychwanegu .disabledat eitemau yn y gwymplen i'w steilio fel rhai anabl .

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>

Yn ddiofyn, mae cwymplen yn cael ei gosod yn awtomatig 100% o'r brig ac ar hyd ochr chwith ei riant. Gallwch chi newid hyn gyda'r .drop*dosbarthiadau cyfeiriadol, ond gallwch chi hefyd eu rheoli gyda dosbarthiadau addasu ychwanegol.

Ychwanegu .dropdown-menu-endat a .dropdown-menui'r dde alinio'r ddewislen. Mae cyfarwyddiadau yn cael eu hadlewyrchu wrth ddefnyddio Bootstrap yn RTL, .dropdown-menu-endbydd ystyr yn ymddangos ar yr ochr chwith.

Pennau i fyny! Mae cwymplenni wedi'u lleoli diolch i Popper ac eithrio pan fyddant wedi'u cynnwys mewn bar llywio.

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>

Aliniad ymatebol

Os ydych chi am ddefnyddio aliniad ymatebol, analluoga lleoli deinamig trwy ychwanegu'r data-bs-display="static"priodoledd a defnyddio'r dosbarthiadau amrywiad ymatebol.

I alinio'r gwymplen i'r dde gyda'r torbwynt a roddir neu fwy, ychwanegwch .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>

I alinio i'r chwith y gwymplen gyda'r torbwynt a roddir neu fwy, ychwanegwch .dropdown-menu-enda .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>

Sylwch nad oes angen i chi ychwanegu data-bs-display="static"priodoledd at fotymau cwymplen mewn bariau llywio, gan nad yw Popper yn cael ei ddefnyddio mewn bariau llywio.

Opsiynau aliniad

Gan gymryd y rhan fwyaf o'r opsiynau a ddangosir uchod, dyma arddangosiad sinc cegin fach o wahanol opsiynau alinio cwymplen mewn un lle.

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>

Penawdau

Ychwanegwch bennyn i labelu adrannau o gamau gweithredu mewn unrhyw gwymplen.

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>

Rhanwyr

Gwahanwch grwpiau o eitemau bwydlen cysylltiedig gyda rhannwr.

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>

Testun

Rhowch unrhyw destun rhydd mewn cwymplen gyda thestun a defnyddiwch gyfleustodau bylchu . Sylwch ei bod yn debygol y bydd angen arddulliau maint ychwanegol arnoch i gyfyngu ar lled y ddewislen.

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>

Ffurflenni

Rhowch ffurflen o fewn cwymplen, neu gwnewch hi mewn cwymplen, a defnyddiwch gyfleustodau ymyl neu badin i roi'r gofod negyddol sydd ei angen arnoch.

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>

Defnyddiwch data-bs-offsetneu data-bs-referencei newid lleoliad y gwymplen.

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>

Ymddygiad cau'n awtomatig

Yn ddiofyn, mae'r gwymplen ar gau wrth glicio y tu mewn neu'r tu allan i'r gwymplen. Gallwch ddefnyddio'r autoCloseopsiwn i newid ymddygiad hwn y gwymplen.

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

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae cwymplenni bellach yn defnyddio newidynnau CSS lleol ymlaen ar .dropdown-menugyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

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

Gellir gweld addasu trwy newidynnau CSS ar y .dropdown-menu-darkdosbarth lle rydym yn diystyru gwerthoedd penodol heb ychwanegu dewiswyr CSS dyblyg.

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

Newidynnau Sass

Newidynnau ar gyfer pob cwymplen:

$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

Newidynnau ar gyfer y cwymplen dywyll :

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

Newidynnau ar gyfer y carets sy'n seiliedig ar CSS sy'n nodi rhyngweithedd cwymplen:

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

cymysgeddau

Defnyddir cymysgeddau i gynhyrchu'r carets sy'n seiliedig ar CSS a gellir eu canfod yn 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;
    }
  }
}

Defnydd

Trwy briodoleddau data neu JavaScript, mae'r ategyn cwymplen yn toglo cynnwys cudd (cwymplenni) trwy doglo'r .showdosbarth ar y rhiant .dropdown-menu. Dibynnir ar y data-bs-toggle="dropdown"priodoledd ar gyfer cau dewislenni ar lefel cais, felly mae'n syniad da ei ddefnyddio bob amser.

Ar ddyfeisiau cyffyrddiad, mae agor cwymplen yn ychwanegu mouseovertrinwyr gwag i blant uniongyrchol yr <body>elfen. Mae'r darnia hyll hwn yn angenrheidiol i weithio o amgylch quirk yn dirprwyo digwyddiad iOS , a fyddai fel arall yn atal tap yn unrhyw le y tu allan i'r gwymplen rhag sbarduno'r cod sy'n cau'r gwymplen. Unwaith y bydd y gwymplen wedi'i chau, caiff y mouseovertrinwyr gwag ychwanegol hyn eu dileu.

Trwy briodoleddau data

Ychwanegu data-bs-toggle="dropdown"at ddolen neu fotwm i doglo cwymplen.

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

Trwy JavaScript

Ffoniwch y cwymplenni trwy JavaScript:

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

`data-bs-toggle="dropdown"`dal yn ofynnol

Ni waeth a ydych chi'n ffonio'ch cwymplen trwy JavaScript neu yn lle hynny'n defnyddio'r data-api, data-bs-toggle="dropdown"mae'n ofynnol bob amser i fod yn bresennol ar elfen sbardun y gwymplen.

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Enw	Math	Diofyn	Disgrifiad
`autoClose`	boolean, llinyn	`true`	Ffurfweddu ymddygiad cau ceir y gwymplen: `true`- bydd y gwymplen yn cael ei chau trwy glicio y tu allan neu y tu mewn i'r gwymplen. `false`- bydd y gwymplen yn cael ei chau trwy glicio ar y botwm toggle a galw `hide`neu `toggle`ddull â llaw. (Hefyd ni fydd yn cael ei gau trwy wasgu'r `esc`allwedd) `'inside'`- bydd y gwymplen ar gau (yn unig) trwy glicio y tu mewn i'r gwymplen. `'outside'`- bydd y gwymplen ar gau (yn unig) trwy glicio y tu allan i'r gwymplen. Sylwch: gellir cau'r gwymplen bob amser gyda'r `ESC`allwedd.
`boundary`	llinyn, elfen	`'clippingParents'`	Ffin cyfyngiad gorlif y gwymplen (yn berthnasol i addasydd preventOverflow Popper yn unig). Yn ddiofyn mae'n `clippingParents`gyfeirnod HTMLElement a gall dderbyn (trwy JavaScript yn unig). Am ragor o wybodaeth cyfeiriwch at ddogfennau detectOverflow Popper .
`display`	llinyn	`'dynamic'`	Yn ddiofyn, rydym yn defnyddio Popper ar gyfer lleoli deinamig. Analluoga hwn gyda `static`.
`offset`	arae, llinyn, swyddogaeth	`[0, 2]`	Gwrthbwyso'r gwymplen o'i gymharu â'i darged. Gallwch basio llinyn mewn priodoleddau data gyda gwerthoedd wedi'u gwahanu gan goma fel: `data-bs-offset="10,20"`. Pan ddefnyddir swyddogaeth i bennu'r gwrthbwyso, fe'i gelwir gyda gwrthrych sy'n cynnwys y lleoliad popper, y cyfeirnod, a phopper recs fel ei ddadl gyntaf. Mae nod DOM yr elfen sbarduno yn cael ei basio fel yr ail ddadl. Rhaid i'r ffwythiant ddychwelyd arae gyda dau rif: sgidio , pellter . Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper .
`popperConfig`	null, gwrthrych, swyddogaeth	`null`	I newid ffurfweddiad Popper rhagosodedig Bootstrap, gweler cyfluniad Popper . Pan ddefnyddir swyddogaeth i greu'r cyfluniad Popper, fe'i gelwir gyda gwrthrych sy'n cynnwys ffurfweddiad Popper rhagosodedig Bootstrap. Mae'n eich helpu i ddefnyddio ac uno'r rhagosodiad gyda'ch ffurfweddiad eich hun. Rhaid i'r swyddogaeth ddychwelyd gwrthrych cyfluniad ar gyfer Popper.
`reference`	llinyn, elfen, gwrthrych	`'toggle'`	Elfen gyfeirio o'r gwymplen. Yn derbyn gwerthoedd `'toggle'`, `'parent'`, cyfeirnod Elfen HTML neu wrthrych yn darparu `getBoundingClientRect`. I gael rhagor o wybodaeth, cyfeiriwch at ddogfennau lluniwr Popper a dogfennau rhith-elfennau .

Defnyddio swyddogaeth gyda`popperConfig`

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

Dulliau

Dull	Disgrifiad
`dispose`	Yn dinistrio cwymplen elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM)
`getInstance`	Dull statig sy'n eich galluogi i gael y cwymplen sy'n gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn: `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Dull statig sy'n dychwelyd cwymplen sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn: `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Yn cuddio'r gwymplen o far llywio penodol neu dabl.
`show`	Yn dangos y gwymplen o far llywio penodol neu dabl llywio.
`toggle`	Toglo'r gwymplen o far llywio penodol neu dabl llywio.
`update`	Yn diweddaru lleoliad cwymplen elfen.

Digwyddiadau

Mae'r holl ddigwyddiadau cwymplen yn cael eu tanio at yr elfen toglo ac yna'n cael eu byrlymu. Felly gallwch chi hefyd ychwanegu gwrandawyr digwyddiadau ar yr .dropdown-menuelfen rhiant. hide.bs.dropdownac hidden.bs.dropdownmae gan ddigwyddiadau clickEventbriodwedd (dim ond pan fydd y math Digwyddiad gwreiddiol yn click) sy'n cynnwys Gwrthrych Digwyddiad ar gyfer y digwyddiad clicio.

Math o ddigwyddiad	Disgrifiad
`hide.bs.dropdown`	Yn tanio ar unwaith pan fydd y `hide`dull enghraifft wedi'i alw.
`hidden.bs.dropdown`	Wedi'i danio pan fydd y gwymplen wedi gorffen cael ei chuddio rhag y defnyddiwr a thrawsnewidiadau CSS wedi'u cwblhau.
`show.bs.dropdown`	Yn tanio ar unwaith pan fydd y `show`dull enghraifft yn cael ei alw.
`shown.bs.dropdown`	Wedi'i danio pan fydd y gwymplen wedi'i gwneud yn weladwy i'r defnyddiwr ac mae trawsnewidiadau CSS wedi'u cwblhau.

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

Cwympiadau

Trosolwg

Hygyrchedd

Enghreifftiau

Botwm sengl

Botwm hollti

Maintioli

Cwympiadau tywyll

Cyfarwyddiadau

RTL

Wedi'i ganoli

Dropup

Dropup wedi'i ganoli

Dropend

Dropstart

Eitemau ar y ddewislen

Actif

Anabl

Aliniad dewislen

Aliniad ymatebol

Opsiynau aliniad

Cynnwys y ddewislen

Penawdau

Rhanwyr

Testun

Ffurflenni

Ymddygiad cau'n awtomatig

CSS

Newidynnau

Newidynnau Sass

cymysgeddau

Defnydd

Trwy briodoleddau data

Trwy JavaScript

`data-bs-toggle="dropdown"`dal yn ofynnol

Opsiynau

Defnyddio swyddogaeth gyda`popperConfig`

Dulliau

Digwyddiadau

Cwympiadau

Trosolwg

Hygyrchedd

Enghreifftiau

Botwm sengl

Botwm hollti

Maintioli

Cwympiadau tywyll

Cyfarwyddiadau

RTL

Wedi'i ganoli

Dropup

Dropup wedi'i ganoli

Dropend

Dropstart

Eitemau ar y ddewislen

Actif

Anabl

Aliniad dewislen

Aliniad ymatebol

Opsiynau aliniad

Cynnwys y ddewislen

Penawdau

Pennawd cwymplen

Rhanwyr

Testun

Ffurflenni

Opsiynau cwymplen

Ymddygiad cau'n awtomatig

CSS

Newidynnau

Newidynnau Sass

cymysgeddau

Defnydd

Trwy briodoleddau data

Trwy JavaScript

data-bs-toggle="dropdown"dal yn ofynnol

Opsiynau

Defnyddio swyddogaeth gydapopperConfig

Dulliau

Digwyddiadau

`data-bs-toggle="dropdown"`dal yn ofynnol

Defnyddio swyddogaeth gyda`popperConfig`