Açylýan ýerler

“Bootstrap” açylýan plugin bilen baglanyşyklaryň sanawyny we başga zatlary görkezmek üçin kontekstdäki örtükleri üýtgediň.

Bu sahypada

Gysgaça syn

Açylýan ýerler, baglanyşyklaryň sanawlaryny we başgalary görkezmek üçin üýtgedilip bilner, kontekstdäki örtükler. Olara goşulan Bootstrap açylýan JavaScript plugin bilen interaktiw ýasaldy. Olary basmak bilen däl-de, basmak bilen üýtgedýärler; bu bilgeşleýin dizaýn karary .

Açylýan ýerler dinamiki ýerleşiş we görnüşi kesgitlemegi üpjün edýän Popper üçünji tarap kitaphanasynda gurulýar . Bootstrap-yň JavaScript-den öň popper.min.js-i goşuň ýa-da Popper -i ulanýan bootstrap.bundle.min.js/ ulanyň. bootstrap.bundle.jsPopper, dinamiki ýerleşiş talap edilmeýänligi sebäpli, deňiz panellerinde düşýän ýerleri ýerleşdirmek üçin ulanylmaýar.

Elýeterlilik

WAI ARIA standarty hakyky role="menu"widjeti kesgitleýär , ýöne bu hereketlere ýa-da funksiýalara itergi berýän programma menýusyna mahsus. ARIA menýularynda diňe menýu elementleri, bellik gutusy menýu elementleri, radio düwmesi menýu elementleri, radio düwme toparlary we kiçi menýular bolup biler.

Beýleki tarapdan, “Bootstrap” -yň aşak düşmegi umumy we dürli ýagdaýlara we bellik gurluşlaryna degişlidir. Mysal üçin, gözleg meýdanlary ýa-da giriş formalary ýaly goşmaça girişleri we forma dolandyryşlaryny öz içine alýan açylan ýerleri döredip bolýar. Şol sebäpli “Bootstrap” hakyky ARIA menýulary üçin zerur bolan atributlara garaşmaýar (ýa-da awtomatiki goşmaýar) role. Uthorsazyjylar bu has anyk häsiýetleri özleri goşmaly bolarlar.aria-

.dropdown-itemŞeýle-de bolsa, “Bootstrap ” kursor düwmelerini ulanyp aýratyn elementleriň üstünden geçmek we menýu açary bilen ýapmak ýaly adaty klawiatura menýusynyň özara täsirleri üçin içerki goldaw goşýar ESC.

Mysallar

Açylýan açary üýtgetmek (düwmäňiz ýa-da baglanyşyk) we açylýan menýu .dropdownýa-da yglan edýän başga bir element bilen örtüň position: relative;. Mümkin bolan zerurlyklaryňyza has laýyk gelmek üçin aşak gaçmalar ýa- <a>da elementlerden döräp biler . <button>Bu ýerde görkezilen mysallar, zerur ýerlerde semantik <ul>elementleri ulanýar, ýöne adaty bellik goldaýar.

Leeke düwme

Islendik .btnýekejäni käbir bellik üýtgeşmeleri bilen açylan açyklyga öwrüp bolýar. <button>Olary iki element bilen işlemek üçin nädip goýup bilersiňiz :

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

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>

Iň gowy tarapy, muny islendik düwme görnüşi bilen hem edip bilersiňiz:

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

Bölmek düwmesi

Edil şonuň ýaly-da, bir düwmäniň aşak düşmegi bilen birmeňzeş bellik bilen bölünen düwmäni açyň, ýöne .dropdown-toggle-splitaçylýan kartetiň töwereginde dogry aralyk goşmak bilen.

paddingKaretiň iki gapdalyndaky keseligine 25% azaltmak we margin-leftyzygiderli düwmeleriň açylmagy üçin goşulanlary aýyrmak üçin bu goşmaça synpy ulanýarys . Şol goşmaça üýtgeşmeler, kartany bölmek düwmesinde jemleýär we esasy düwmäniň gapdalyndaky has laýyk ölçeg meýdanyny üpjün edýär.

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

Ölçeg

Düwmeleriň açylmagy, ähli ululykdaky düwmeler bilen işleýär, şol sanda deslapky we bölünen açylýan düwmeler.

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

Garaňky damjalar

.dropdown-menu-darkBar bolanlara goşup, garaňky deňiz paneli ýa-da adaty stil bilen gabat gelmek üçin has garaňky damjalary saýlaň .dropdown-menu. Açylýan elementlere hiç hili üýtgeşme talap edilmeýär.

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>

Deňiz panelinde ulanmak üçin:

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>

Görkezmeler

RTL

RTL-de Bootstrap ulanylanda görkezmeler aýna bolýar, ýagny .dropstartsag tarapda peýda bolar.

Merkezleşdirilen

Açylýan menýuny esasy .dropdown-centerelement bilen üýtgetmek üçin aşakda merkezleşdiriň.

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>

Taşlamak

Esasy elemente goşup .dropup, aşaky menýulary elementleriň üstünde işlediň.

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

Çekiş merkezi

Açylýan menýuny esasy .dropup-centerelement bilen üýtgetmek üçin merkezde ediň.

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

Esasy elemente goşup, elementleriň sag tarapynda açylan menýulary işlediň .dropend.

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

.dropstartEne elementine goşmak bilen elementleriň çep tarapynda açylan menýulary işlediň .

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

<a>Açylýan <button>zatlar hökmünde elementleri ulanyp bilersiňiz .

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>

Şeýle hem, interaktiw däl açylýan zatlary döredip bilersiňiz .dropdown-item-text. Customörite CSS ýa-da tekst enjamlary bilen hasam stilleşip bilersiňiz.

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>

Işjeň

Aktiw.active görnüşde düzmek üçin açylan elementlere goşuň . Işjeň ýagdaýy kömekçi tehnologiýalara ýetirmek üçin atributdan peýdalanyň - häzirki sahypa ýa -da toplumdaky häzirki element üçin bahany ulanyň.aria-currentpagetrue

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>

Maýyp

.disabledAçyk görnüşdäki zatlary goşuň , olary ýapyk görnüşde düzüň .

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>

Düzgüne görä, açylýan menýu awtomatiki usulda ýokardan we ene-atasynyň çep tarapynda 100% ýerleşdirilýär. Muny ugrukdyryjy .drop*synplar bilen üýtgedip bilersiňiz, ýöne goşmaça üýtgediji synplar bilen dolandyryp bilersiňiz.

Açylýan menýuny sag .dropdown-menu-endtarapa goşuň . .dropdown-menuRTL-de Bootstrap ulanylanda görkezmeler aýna bolýar, ýagny .dropdown-menu-endçep tarapda peýda bolar.

Başlar! Açylýan ýerler, Popper-iň kömegi bilen, deňiz panelinde bolanyndan başga ýerde ýerleşýär.

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>

Jogaply deňleşdirme

Duýgur deňlemäni ulanmak isleseňiz, data-bs-display="static"atributy goşup dinamiki pozisiýany öçüriň we täsirli üýtgeşiklik synplaryny ulanyň.

Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .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>

Açylýan menýuny berlen bölek ýa-da has ulusy bilen deňleşdirmek üçin goşuň .dropdown-menu-endwe .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>

Deňiz panellerinde açylýan düwmelere atribut goşmagyň zerurlygynyň ýokdugyna üns beriň data-bs-display="static", sebäbi Popper deňiz panellerinde ulanylmaýar.

Düzediş opsiýalary

Aboveokarda görkezilen wariantlaryň köpüsini göz öňünde tutup, ine, bir ýerde dürli aşak düşmek deňleşdiriş wariantlarynyň kiçijik aşhana çüýşesi demo.

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>

Sözbaşylar

Islendik açylýan menýuda hereketleriň bölümlerini bellemek üçin sözbaşy goşuň.

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>

Bölünýänler

Baglanyşykly menýu elementleriniň toparlaryny bölüň.

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>

Tekst

Islendik erkin form tekstini açylýan menýuda ýerleşdiriň we aralyk hyzmatlaryny ulanyň . Menýu giňligini çäklendirmek üçin size goşmaça ululyk stilleriniň gerekdigini unutmaň.

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>

Formalar

Açylýan menýuda bir forma goýuň ýa-da açylýan menýuda düzüň we zerur negatiw ýer bermek üçin margin ýa-da padding enjamlaryny ulanyň.

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>

Açylýan ýeri ulanyň data-bs-offsetýa-da üýtgediň.data-bs-reference

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>

Awto-ýakyn hereket

Düzgüne görä, açylýan menýu içerde ýa-da daşynda basylanda açylýan menýu ýapylýar. autoCloseAçylýan bu hereketi üýtgetmek üçin opsiýany ulanyp bilersiňiz .

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

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, aşak düşýänler häzirki wagtda .dropdown-menuhakyky özleşdirmek üçin ýerli CSS üýtgeýjilerini ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

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

CSS üýtgeýjileriniň üsti bilen özleşdirme, .dropdown-menu-darktakyk CSS saýlaýjylaryny goşmazdan, belli bir bahalary ýok edýän synpymyzda görmek bolýar.

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

Sass üýtgeýjileri

Downhli açylanlar üçin üýtgeýjiler:

$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

Garaňky düşmek üçin üýtgeýjiler :

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

Açylýan interaktiwligi görkezýän CSS esasly kartlar üçin üýtgeýjiler:

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

Mixins

Miksinler CSS esasly kartetleri öndürmek üçin ulanylýar we tapyp bilersiňiz 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;
    }
  }
}

Ulanylyşy

Maglumat atributlary ýa-da JavaScript arkaly, açylýan plugin .showene-atanyň synpyny üýtgetmek arkaly gizlin mazmuny (açylýan menýulary) üýtgedýär .dropdown-menu. Sypat data-bs-toggle="dropdown", programma derejesinde açylýan menýulary ýapmak üçin bil baglanýar, şonuň üçin ony hemişe ulanmak gowy pikir.

Duýgurlyk bilen işleýän enjamlarda, açylan açylyşy elementiň mouseoverýakyn çagalaryna boş işleýjiler goşýar . <body>Bu ýigrenji hack, iOS-nyň çäräniň wekiliýetinde bir çekeleşigiň üstünde işlemek üçin zerurdyr , bu bolsa aşak gaçýan kody açmagynyň öňüni alyp biler. Açylma ýapylansoň, bu goşmaça boş mouseoverişleýänler aýrylýar.

Maglumat atributlary arkaly

data-bs-toggle="dropdown"Açylýan zady üýtgetmek üçin baglanyşyk ýa-da düwme goşuň .

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

JavaScript arkaly

JavaScript arkaly açylanlara jaň ediň:

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

`data-bs-toggle="dropdown"`henizem talap edilýär

Açylýan ýere JavaScript arkaly jaň edýändigiňize ýa-da ýerine maglumat-api ulanýandygyňyza garamazdan, data-bs-toggle="dropdown"açylan trigger elementinde elmydama bolmaly.

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady	Görnüşi	Bellenen	Düşündiriş
`autoClose`	bulean, setir	`true`	Açylýan awtoulagyň ýakyn hereketini sazlaň: `true`- açylýan menýu daşyna ýa-da içine basyp ýapylýar. `false`- açylyş düwmesini basmak we el bilen jaň etmek `hide`ýa-da `toggle`usul bilen ýapylýar. (Şeýle hem düwmä basyp ýapylmaz `esc`) `'inside'`- açylan menýunyň içine basyp, açylýan ýapyk (diňe) ýapylar. `'outside'`- açylýan menýunyň daşyna basyp, açyljak (diňe) ýapylar. `ESC`Bellik: aşak düşmek elmydama açar bilen ýapylyp bilner .
`boundary`	setir, element	`'clippingParents'`	Açylýan menýunyň aşýan çäk çäkleri (diňe Popper-iň öňüni alýanOverflow modifikatoryna degişlidir). Düzgüne görä, ol `clippingParents`HTMLElement salgylanmasyny kabul edip biler (diňe JavaScript arkaly). Has giňişleýin maglumat üçin Popper-iň detectOverflow resminamalaryna serediň .
`display`	setir	`'dynamic'`	Düzgüne görä, dinamiki ýerleşiş üçin Popper ulanýarys. Muny öçüriň `static`.
`offset`	massiw, setir, funksiýa	`[0, 2]`	Maksadyna görä aşak düşýän ofset. Maglumat atributlarynda yzygiderli ýaly bölünen bahalar bilen bir setir geçirip bilersiňiz `data-bs-offset="10,20"`. Ofset kesgitlemek üçin bir funksiýa ulanylanda, ilkinji argumenti hökmünde popper ýerleşdirilişi, salgylanma we popper düzedişleri bolan obýekt bilen atlandyrylýar. Tüweleme elementi DOM düwmesi ikinji argument hökmünde geçýär. Funksiýa iki san bilen bir massiw gaýtarmaly: skidding , aralyk . Has giňişleýin maglumat üçin Popper-iň ofset resminamalaryna serediň .
`popperConfig`	null, obýekt, funksiýa	`null`	Bootstrap-yň deslapky Popper konfigurasiýasyny üýtgetmek üçin Popper-iň konfigurasiýasyna serediň . Popper konfigurasiýasyny döretmek üçin bir funksiýa ulanylanda, Bootstrap-yň deslapky Popper konfigurasiýasyny öz içine alýan obýekt bilen atlandyrylýar. Dymmaklygy öz konfigurasiýaňyz bilen ulanmaga we birleşdirmäge kömek edýär. Funksiýa Popper üçin konfigurasiýa obýektini yzyna gaýtarmaly.
`reference`	setir, element, obýekt	`'toggle'`	Açylýan menýunyň salgylanma elementi. `'toggle'`, `'parent'`HTMLElement salgylanmasynyň ýa-da üpjün edýän obýektiň bahalaryny kabul edýär `getBoundingClientRect`. Has giňişleýin maglumat üçin Popper-iň konstruktor resminamalaryna we wirtual element resminamalaryna serediň .

Bilen işlemek`popperConfig`

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

Usullar

Usul	Düşündiriş
`dispose`	Bir elementiň gaçmagyny ýok edýär. (DOM elementindäki saklanan maglumatlary aýyrýar)
`getInstance`	DOM elementi bilen baglanyşykly açylan mysallary almaga mümkinçilik berýän statiki usul, ony şeýle ulanyp bilersiňiz : `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	DOM elementi bilen baglanyşykly açylan mysaly yzyna gaýtaryp berýän ýa-da başlamadyk ýagdaýynda täzesini döredýän statiki usul. Muny şeýle ulanyp bilersiňiz : `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny gizleýär.
`show`	Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny görkezýär.
`toggle`	Berlen navbar ýa-da bellikli nawigasiýa açylýan menýusyny üýtgedýär.
`update`	Bir elementiň aşak düşýän ýerini täzeleýär.

Wakalar

Downhli açylýan hadysalar üýtgeýän elemente atylýar we soň köpürjiklenýär. .dropdown-menuŞeýlelikde, waka diňleýjilerini ene-atanyň elementine goşup bilersiňiz . hide.bs.dropdownwe hidden.bs.dropdownhadysalaryň basmak hadysasy üçin Waka obýektini öz içine alýan häsiýeti bar clickEvent(diňe asyl Waka görnüşi bolanda ).click

Çäräniň görnüşi	Düşündiriş
`hide.bs.dropdown`	`hide`Mysal usuly çagyrylanda derrew ýanýar .
`hidden.bs.dropdown`	Açylan ulanyjydan gizlenip, CSS geçişleri gutarandan soň ýanýar.
`show.bs.dropdown`	`show`Mysal usuly çagyrylanda derrew ýanýar .
`shown.bs.dropdown`	Ulanyjy üçin açyk görkezilende we CSS geçişleri gutaranda işden çykdy.

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

Açylýan ýerler

Gysgaça syn

Elýeterlilik

Mysallar

Leeke düwme

Bölmek düwmesi

Ölçeg

Garaňky damjalar

Görkezmeler

RTL

Merkezleşdirilen

Taşlamak

Çekiş merkezi

Dropend

Dropstart

Menýu elementleri

Işjeň

Maýyp

Menýu deňleşdirmek

Jogaply deňleşdirme

Düzediş opsiýalary

Menýu mazmuny

Sözbaşylar

Bölünýänler

Tekst

Formalar

Awto-ýakyn hereket

CSS

Üýtgeýjiler

Sass üýtgeýjileri

Mixins

Ulanylyşy

Maglumat atributlary arkaly

JavaScript arkaly

`data-bs-toggle="dropdown"`henizem talap edilýär

Görnüş

Bilen işlemek`popperConfig`

Usullar

Wakalar

Açylýan ýerler

Gysgaça syn

Elýeterlilik

Mysallar

Leeke düwme

Bölmek düwmesi

Ölçeg

Garaňky damjalar

Görkezmeler

RTL

Merkezleşdirilen

Taşlamak

Çekiş merkezi

Dropend

Dropstart

Menýu elementleri

Işjeň

Maýyp

Menýu deňleşdirmek

Jogaply deňleşdirme

Düzediş opsiýalary

Menýu mazmuny

Sözbaşylar

Açylýan sözbaşy

Bölünýänler

Tekst

Formalar

Açylyş opsiýalary

Awto-ýakyn hereket

CSS

Üýtgeýjiler

Sass üýtgeýjileri

Mixins

Ulanylyşy

Maglumat atributlary arkaly

JavaScript arkaly

data-bs-toggle="dropdown"henizem talap edilýär

Görnüş

Bilen işlemekpopperConfig

Usullar

Wakalar

`data-bs-toggle="dropdown"`henizem talap edilýär

Bilen işlemek`popperConfig`