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. Dim ond eitemau dewislen, eitemau dewislen blwch ticio, eitemau dewislen botwm radio, grwpiau botwm radio, ac is-ddewislenni y gall bwydlenni ARIA eu cynnwys.

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:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

A chydag <a>elfennau:

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

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

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

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Cyfarwyddiadau

RTL

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

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>

Dropright

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">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

<!-- Split dropend button -->
<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary">
    Split dropend
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropright</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Defnyn

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">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

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

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

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.

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

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

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Regular link</a></li>
  <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
  <li><a class="dropdown-item" href="#">Another link</a></li>
</ul>

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.

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

<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'r ddewislen i'r chwith gyda'r torbwynt a roddir neu fwy, ychwanegwch .dropdown-menu-enda .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

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

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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Left-aligned, right-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
    Right-aligned, left-aligned lg
  </button>
  <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropstart">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropstart
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropend">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Penawdau

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

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

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

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="mb-3">
      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="mb-3">
      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="mb-3">
    <label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="mb-3">
    <label for="exampleDropdownFormPassword2" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

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

<div class="d-flex">
  <div class="dropdown me-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">
      Offset
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </div>
</div>

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.

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
    Default dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
    Clickable outside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
    Manual close
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

Sass

Newidynnau

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:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

$dropdown-link-color:               $gray-900;
$dropdown-link-hover-color:         shade-color($gray-900, 10%);
$dropdown-link-hover-bg:            $gray-200;

$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           $component-active-bg;

$dropdown-link-disabled-color:      $gray-500;

$dropdown-item-padding-y:           $spacer * .25;
$dropdown-item-padding-x:           $spacer;

$dropdown-header-color:             $gray-600;
$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x;

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

Trwy JavaScript

Ffoniwch y cwymplenni trwy JavaScript:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return 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

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-offset="". Gwnewch yn siŵr eich bod yn newid math achos enw'r opsiwn o camelCase i achos cebab wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, yn lle defnyddio data-bs-autoClose="false", defnyddiwch data-bs-auto-close="false".

Enw	Math	Diofyn	Disgrifiad
`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 .
`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 .
`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 chi 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: .`[skidding, distance]` Am ragor o wybodaeth cyfeiriwch at ddogfennau gwrthbwyso Popper .
`autoClose`	boolaidd \| llinyn	`true`	Ffurfweddu ymddygiad cau ceir y gwymplen: `true`- bydd y gwymplen ar gau 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 togl 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.
`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 cyfluniad 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.

Defnyddio swyddogaeth gyda`popperConfig`

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

Dulliau

Dull	Disgrifiad
`toggle`	Toglo'r gwymplen o far llywio penodol neu dabl llywio.
`show`	Yn dangos y gwymplen o far llywio penodol neu dabl llywio.
`hide`	Yn cuddio'r gwymplen o far llywio penodol neu dabl.
`update`	Yn diweddaru lleoliad cwymplen elfen.
`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)`

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.

Dull	Disgrifiad
`show.bs.dropdown`	Yn tanio ar unwaith pan elwir y dull enghraifft sioe.
`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.
`hide.bs.dropdown`	Yn tanio ar unwaith pan fydd y dull cuddfan 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.

var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})

Cwympiadau

Trosolwg

Hygyrchedd

Enghreifftiau

Botwm sengl

Botwm hollti

Maintioli

Cwympiadau tywyll

Cyfarwyddiadau

RTL

Dropup

Dropright

Defnyn

Eitemau ar y ddewislen

Actif

Anabl

Aliniad dewislen

Aliniad ymatebol

Opsiynau aliniad

Cynnwys y ddewislen

Penawdau

Rhanwyr

Testun

Ffurflenni

Ymddygiad cau'n awtomatig

Sass

Newidynnau

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

Dropup

Dropright

Defnyn

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

Sass

Newidynnau

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`