Բացվող պատուհաններ

Փոխարկեք համատեքստային ծածկույթները՝ հղումների ցուցակները և ավելին ցուցադրելու համար Bootstrap բացվող հավելվածի միջոցով:

Այս էջում

Ընդհանուր ակնարկ

Բացվող պատուհանները փոխարկվող, համատեքստային ծածկույթներ են՝ հղումների ցուցակները և ավելին ցուցադրելու համար: Դրանք ինտերակտիվ են ընդգրկված Bootstrap բացվող JavaScript հավելվածի հետ: Դրանք փոխվում են սեղմելով, ոչ թե սավառնելով. սա միտումնավոր նախագծային որոշում է :

Բացվող պատուհանները կառուցված են երրորդ կողմի գրադարանի՝ Popper- ի վրա, որն ապահովում է դինամիկ դիրքավորում և տեսադաշտի հայտնաբերում: Համոզվեք, որ ներառեք popper.min.js-ը Bootstrap-ի JavaScript-ից առաջ կամ օգտագործեք bootstrap.bundle.min.js/ bootstrap.bundle.jsորը պարունակում է Popper: Popper-ը չի օգտագործվում navbars-ում բացվող ցանկերը տեղադրելու համար, թեև դինամիկ դիրքավորումը չի պահանջվում:

Մատչելիություն

WAI ARIA ստանդարտը սահմանում է իրական վիջեթ role="menu", բայց սա հատուկ է հավելվածի նման մենյուներին, որոնք գործարկում են գործողություններ կամ գործառույթներ: ARIA ընտրացանկերը կարող են պարունակել միայն ընտրացանկի տարրեր, վանդակի ընտրացանկի տարրեր, ռադիոկոճակի ընտրացանկի տարրեր, ռադիոկոճակների խմբեր և ենթամենյուներ:

Մյուս կողմից, Bootstrap-ի բացվող ցանկերը նախատեսված են որպես ընդհանուր և կիրառելի տարբեր իրավիճակների և նշագրման կառուցվածքների համար: Օրինակ, հնարավոր է ստեղծել բացվող պատուհաններ, որոնք պարունակում են լրացուցիչ մուտքեր և ձևերի վերահսկում, ինչպիսիք են որոնման դաշտերը կամ մուտքի ձևերը: Այս պատճառով, Bootstrap-ը չի ակնկալում (ոչ ինքնաբերաբար ավելացնում) ARIA մենյուների համար պահանջվող որևէ ատրիբուտ roleև ատրիբուտ: Հեղինակներն իրենք պետք է ներառեն այս ավելի կոնկրետ հատկանիշները:aria-

Այնուամենայնիվ, Bootstrap-ը ներկառուցված աջակցություն է ավելացնում ստեղնաշարի մենյուի ստանդարտ փոխազդեցությունների մեծ մասի համար, ինչպես օրինակ .dropdown-item՝ կուրսորային ստեղների միջոցով առանձին տարրերով շարժվելու և մենյուը ESCստեղնով փակելու հնարավորությունը:

Օրինակներ

Փաթեթավորեք բացվող ընտրացանկը (ձեր կոճակը կամ հղումը) և բացվող ընտրացանկը .dropdownկամ մեկ այլ տարր, որը հայտարարում է position: relative;: Բացվող ցանկերը կարող են գործարկվել <a>կամ <button>տարրերից, որոնք ավելի լավ են համապատասխանում ձեր հնարավոր կարիքներին: Այստեղ ցուցադրված օրինակներն օգտագործում են իմաստային <ul>տարրեր, որտեղ հարմար է, բայց մաքսային նշումը աջակցվում է:

Մեկ կոճակ

Ցանկացած սինգլ .btnկարող է վերածվել բացվող անջատիչի՝ որոշ նշագծման փոփոխություններով: Ահա, թե ինչպես կարող եք դրանք աշխատել երկու <button>տարրերի հետ.

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>տարրերով.

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>

Լավագույնն այն է, որ դուք կարող եք դա անել ցանկացած կոճակի տարբերակով, ինչպես նաև.

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

Պառակտման կոճակ

Նմանապես, ստեղծեք պառակտված կոճակների բացվող պատուհաններ գրեթե նույն նշագծումով, ինչ մեկ կոճակի բացվող պատուհանները, բայց .dropdown-toggle-splitբացվող տուփի շուրջ պատշաճ տարածության համար ավելացնելով:

Մենք օգտագործում ենք այս հավելյալ դասը՝ 25%-ով կրճատելու paddingերեսպատման երկու կողմերում գտնվող հորիզոնականը և հեռացնելու այն margin-left, որն ավելացվել է կոճակների սովորական բացման համար: Այդ հավելյալ փոփոխությունները պահում են խցիկը կենտրոնացած պառակտման կոճակի վրա և ապահովում են ավելի համապատասխան չափի հարվածային տարածք հիմնական կոճակի կողքին:

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

Չափսերը

Կոճակների բացվող կոճակները աշխատում են բոլոր չափերի կոճակների հետ, ներառյալ լռելյայն և բաժանված բացվող կոճակները:

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

Մութ անկումներ

Ընտրեք ավելի մուգ բացվող պատուհանները՝ մուգ նավագոտու կամ հատուկ ոճին համապատասխանելու համար՝ ավելացնելով .dropdown-menu-darkգոյություն ունեցողի վրա .dropdown-menu: Բացվող տարրերում փոփոխություններ չեն պահանջվում:

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>

Եվ այն օգտագործելու համար navbar-ում.

html

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

Ուղղություններ

RTL

RTL-ում Bootstrap-ն օգտագործելիս ուղղությունները արտացոլվում են, ինչը նշանակում է, .dropstartոր կհայտնվի աջ կողմում:

Կենտրոնացված

Կատարեք բացվող ընտրացանկը, որը կենտրոնացած .dropdown-centerէ մայր տարրի փոխարկիչի տակ:

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մայր տարրին:

<!-- 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-centerէ մայր տարրի փոխարկիչի վերևում:

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մայր տարրին:

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

Գործարկեք բացվող ընտրացանկերը տարրերի ձախ կողմում՝ ավելացնելով .dropstartմայր տարրին:

<!-- 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>կամ <button>տարրերը որպես բացվող տարրեր:

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>

Դուք կարող եք նաև ստեղծել ոչ ինտերակտիվ բացվող տարրեր .dropdown-item-text. Ազատ զգալ ոճավորել հատուկ CSS կամ տեքստային կոմունալ ծառայություններ:

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>

Ակտիվ

Ավելացրե՛ք .activeտարրերին իջնող ցանկում՝ դրանք որպես ակտիվ ոճավորելու համար : Ակտիվ վիճակը օժանդակ տեխնոլոգիաներին փոխանցելու համար օգտագործեք aria-currentհատկանիշը — օգտագործելով pageարժեքը ընթացիկ էջի կամ trueընթացիկ տարրի համար մի շարքում:

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>

Անաշխատունակ

Ավելացրե՛ք .disabledտարրերին բացվող ցանկում՝ դրանք որպես անջատված ոճավորելու համար :

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>

Լռելյայնորեն, բացվող ընտրացանկը ավտոմատ կերպով տեղադրվում է 100% վերևից և իր ծնողի ձախ կողմում: Դուք կարող եք դա փոխել ուղղորդված .drop*դասերի միջոցով, բայց կարող եք նաև կառավարել դրանք լրացուցիչ փոփոխիչների դասերի միջոցով:

Ավելացնել .dropdown-menu-enda-ին .dropdown-menuդեպի աջ հարթեցնել բացվող ընտրացանկը: RTL-ում Bootstrap-ն օգտագործելիս ուղղությունները արտացոլվում են, ինչը նշանակում է, .dropdown-menu-endոր կհայտնվի ձախ կողմում:

Գլուխը վեր Բացվող պատուհանները տեղադրվում են Popper-ի շնորհիվ, բացառությամբ այն դեպքերի, երբ դրանք պարունակվում են navbar-ում:

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>

Պատասխանատու հավասարեցում

Եթե ցանկանում եք օգտագործել արձագանքող հավասարեցում, անջատեք դինամիկ դիրքավորումը՝ ավելացնելով data-bs-display="static"հատկանիշը և օգտագործեք արձագանքող տատանումների դասերը:

Բացվող ընտրացանկը տրված կամ ավելի մեծ կետի հետ հավասարեցնելու համար.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>

Ձախ բացվող ընտրացանկը տվյալ բեկման կետի կամ ավելի մեծ կետի հետ հավասարեցնելու համար ավելացրեք .dropdown-menu-endև .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>

Նկատի ունեցեք, որ ձեզ հարկավոր չէ data-bs-display="static"ատրիբուտ ավելացնել նավագոտի բացվող կոճակներին, քանի որ Popper-ը չի օգտագործվում navbars-ում:

Հարթեցման ընտրանքներ

Հաշվի առնելով վերևում ներկայացված տարբերակների մեծ մասը, ահա փոքրիկ խոհանոցի լվացարանի ցուցադրությունը՝ տարբեր բացվող դասավորության տարբերակների մեկ տեղում:

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>

Վերնագրեր

Ցանկացած բացվող ընտրացանկում գործողությունների բաժինները պիտակավորելու համար ավելացրեք վերնագիր:

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>

Բաժանարարներ

Առանձնացրեք ընտրացանկի հարակից տարրերի խմբերը բաժանարարով:

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>

Տեքստ

Տեղադրեք ցանկացած ազատ ձևի տեքստ տեքստով բացվող ընտրացանկի մեջ և օգտագործեք տարածության կոմունալ ծառայություններ : Նկատի ունեցեք, որ մենյուի լայնությունը սահմանափակելու համար ձեզ ամենայն հավանականությամբ անհրաժեշտ կլինեն չափերի լրացուցիչ ոճեր:

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>

Ձևաթղթեր

Ձևը դրեք բացվող մենյուի մեջ կամ դարձրեք այն բացվող ընտրացանկի մեջ և օգտագործեք լուսանցքի կամ լիցքավորման կոմունալ ծառայություններ ՝ ձեզ անհրաժեշտ բացասական տարածք տրամադրելու համար:

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>

Օգտագործեք data-bs-offsetկամ 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>

Ավտոմատ փակման պահվածք

Լռելյայնորեն, բացվող ընտրացանկը փակ է, երբ սեղմում եք բացվող ցանկի ներսում կամ դրսում: Դուք կարող եք օգտագործել autoCloseբացվող ցանկի այս վարքագիծը փոխելու տարբերակը:

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

Փոփոխականներ

Ավելացված է v5.2.0-ում

Որպես Bootstrap-ի զարգացող CSS փոփոխականների մոտեցման մաս, բացվող ցուցակներն այժմ օգտագործում են տեղական CSS փոփոխականները՝ .dropdown-menuիրական ժամանակում կատարելագործված հարմարեցման համար: CSS փոփոխականների արժեքները սահմանվում են Sass-ի միջոցով, ուստի Sass-ի հարմարեցումը դեռևս աջակցվում է:

  --#{$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 փոփոխականների միջոցով կարելի է տեսնել այն .dropdown-menu-darkդասում, որտեղ մենք անտեսում ենք որոշակի արժեքներ՝ առանց կրկնօրինակ CSS ընտրիչներ ավելացնելու:

  --#{$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 փոփոխականներ

Փոփոխականներ բոլոր բացվող ցանկերի համար.

$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

Փոփոխականներ մութ բացվող ցանկի համար .

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

Փոփոխականներ CSS-ի վրա հիմնված կարետների համար, որոնք ցույց են տալիս բացվող ցանկի ինտերակտիվությունը.

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

Միքսիններ

Միքսիններն օգտագործվում են CSS-ի վրա հիմնված կարեթներ ստեղծելու համար և կարելի է գտնել 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;
    }
  }
}

Օգտագործումը

Տվյալների ատրիբուտների կամ JavaScript-ի միջոցով բացվող հավելվածը փոխում է թաքնված բովանդակությունը (բացվող ընտրացանկերը)՝ փոխարկելով .showդասը ծնողի վրա .dropdown-menu: Հատկանիշը data-bs-toggle="dropdown"հիմնվում է հավելվածի մակարդակով բացվող ընտրացանկերը փակելու համար, ուստի լավ գաղափար է միշտ օգտագործել այն:

Հպումով միացված սարքերում բացվող բացվող ցանկը ավելացնում է դատարկ կառավարիչներ տարրի mouseoverանմիջական երեխաներին : <body>Այս, անկասկած, տգեղ հաքերն անհրաժեշտ է iOS-ի իրադարձությունների պատվիրակության տարօրինակությունը լուծելու համար , որը հակառակ դեպքում կկանխի բացվող ցանկից դուրս ցանկացած վայրում հպումը գործարկելու այն կոդը, որը փակում է բացվող ցանկը: Երբ բացվող ցանկը փակվի, այս լրացուցիչ դատարկ mouseoverմշակիչները հեռացվում են:

Տվյալների ատրիբուտների միջոցով

Ավելացրեք data-bs-toggle="dropdown"հղմանը կամ կոճակին՝ բացվող ցանկը փոխարկելու համար:

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

JavaScript-ի միջոցով

Զանգահարեք բացվող ցանկերը JavaScript-ի միջոցով.

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

`data-bs-toggle="dropdown"`դեռ պահանջվում է

Անկախ նրանից՝ դուք կանչում եք ձեր բացվող ցանկը JavaScript-ի միջոցով, թե փոխարենը օգտագործում եք տվյալների api-ն, data-bs-toggle="dropdown"միշտ պահանջվում է ներկա լինել բացվող ցանկի գործարկման տարրում:

Ընտրանքներ

Քանի որ ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով, կարող եք տարբերակի անուն ավելացնել data-bs-, ինչպես օրինակում data-bs-animation="{value}": Համոզվեք, որ փոխեք տարբերակի անվան պատյանների տեսակը « camelCase »-ից « kebab-case »՝ ընտրանքները տվյալների ատրիբուտների միջոցով փոխանցելիս: Օրինակ՝ օգտագործել data-bs-custom-class="beautifier"փոխարենը data-bs-customClass="beautifier":

Bootstrap 5.2.0-ի դրությամբ բոլոր բաղադրիչներն աջակցում են փորձարարական վերապահված տվյալների հատկանիշ data-bs-config, որը կարող է տեղավորել պարզ բաղադրիչի կազմաձևումը որպես JSON տող: Երբ տարրն ունի data-bs-config='{"delay":0, "title":123}'և data-bs-title="456"ատրիբուտներ, վերջնական titleարժեքը կլինի, 456և առանձին տվյալների ատրիբուտները կգերակայեն .-ին տրված արժեքներին data-bs-config: Բացի այդ, առկա տվյալների ատրիբուտները կարող են տեղավորել JSON արժեքներ, ինչպիսիք են data-bs-delay='{"show":0,"hide":150}'.

Անուն	Տիպ	Կանխադրված	Նկարագրություն
`autoClose`	բուլյան, լարային	`true`	Կարգավորեք բացվող ցանկի ավտոմատ փակման պահվածքը. `true`- բացվող ցանկը կփակվի՝ սեղմելով բացվող ցանկի դրսում կամ ներսում: `false`- բացվող ցանկը կփակվի՝ սեղմելով փոխարկման կոճակը և ձեռքով զանգահարելով `hide`կամ `toggle`մեթոդով: (Նաև չի փակվի `esc`ստեղնը սեղմելով) `'inside'`- բացվող ցանկը կփակվի (միայն)՝ սեղմելով բացվող ցանկի ներսում: `'outside'`- բացվող ցանկը կփակվի (միայն)՝ սեղմելով բացվող ցանկից դուրս: Նշում. բացվող ցանկը միշտ կարող է փակվել `ESC`բանալիով:
`boundary`	լար, տարր	`'clippingParents'`	Բացվող ընտրացանկի գերհոսքի սահմանափակման սահմանը (կիրառվում է միայն Popper-ի preventOverflow փոփոխիչի համար): Լռելյայն այն է `clippingParents`և կարող է ընդունել HTMLElement հղում (միայն JavaScript-ի միջոցով): Լրացուցիչ տեղեկությունների համար տես Popper's detectOverflow փաստաթղթերը :
`display`	լար	`'dynamic'`	Լռելյայն, մենք օգտագործում ենք Popper-ը դինամիկ դիրքավորման համար: Անջատեք սա `static`.
`offset`	զանգված, տող, ֆունկցիա	`[0, 2]`	Բացվող ցանկի օֆսեթ՝ իր թիրախի համեմատ: Դուք կարող եք տող փոխանցել տվյալների ատրիբուտներում ստորակետերով առանձնացված արժեքներով, ինչպիսիք են `data-bs-offset="10,20"`. Երբ ֆունկցիան օգտագործվում է օֆսեթը որոշելու համար, այն կանչվում է՝ որպես իր առաջին արգումենտ պարունակող popper-ի տեղադրումը, հղումը և popper-ի ուղղումները: Գործարկող տարրը DOM հանգույցը փոխանցվում է որպես երկրորդ արգումենտ: Ֆունկցիան պետք է վերադարձնի զանգված երկու թվերով՝ skidding , հեռավորություն : Լրացուցիչ տեղեկությունների համար տես Պոպերի օֆսեթ փաստաթղթերը :
`popperConfig`	զրոյական, օբյեկտ, ֆունկցիա	`null`	Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան փոխելու համար տե՛ս Popper-ի կոնֆիգուրացիան : Երբ ֆունկցիան օգտագործվում է Popper կոնֆիգուրացիան ստեղծելու համար, այն կանչվում է օբյեկտի հետ, որը պարունակում է Bootstrap-ի լռելյայն Popper կոնֆիգուրացիան: Այն օգնում է ձեզ օգտագործել և միաձուլել կանխադրվածը ձեր սեփական կազմաձևի հետ: Ֆունկցիան պետք է վերադարձնի Popper-ի կազմաձևման օբյեկտ:
`reference`	տող, տարր, առարկա	`'toggle'`	Բացվող ընտրացանկի տեղեկատու տարր: Ընդունում է `'toggle'`, `'parent'`, HTMLElement հղումի կամ տրամադրող օբյեկտի արժեքները `getBoundingClientRect`: Լրացուցիչ տեղեկությունների համար դիմեք Popper-ի կառուցողական փաստաթղթերին և վիրտուալ տարրերի փաստաթղթերին :

Օգտագործելով գործառույթը`popperConfig`

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

Մեթոդներ

Մեթոդ	Նկարագրություն
`dispose`	Ոչնչացնում է տարրի բացվող ցանկը: (Հեռացնում է DOM տարրի վրա պահված տվյալները)
`getInstance`	Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված բացվող օրինակը, կարող եք օգտագործել այն այսպես `bootstrap.Dropdown.getInstance(element)`.
`getOrCreateInstance`	Ստատիկ մեթոդ, որը վերադարձնում է DOM տարրի հետ կապված բացվող օրինակ կամ ստեղծում է նորը, եթե այն նախաստորագրված չէ: Դուք կարող եք օգտագործել այն այսպես `bootstrap.Dropdown.getOrCreateInstance(element)`.
`hide`	Թաքցնում է տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը:
`show`	Ցույց է տալիս տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը:
`toggle`	Անջատում է տվյալ նավագոտու կամ ներդիրներով նավիգացիայի բացվող ընտրացանկը:
`update`	Թարմացնում է տարրի բացվող ցանկի դիրքը:

Իրադարձություններ

Բոլոր բացվող իրադարձությունները գործարկվում են փոխարկվող տարրի վրա, այնուհետև փրփրվում են: Այսպիսով, դուք կարող եք նաև իրադարձությունների ունկնդիրներ ավելացնել .dropdown-menu's մայր տարրի վրա: hide.bs.dropdownև hidden.bs.dropdownիրադարձություններն ունեն clickEventհատկություն (միայն այն դեպքում, երբ սկզբնական Իրադարձության տեսակն է click), որը պարունակում է Իրադարձության օբյեկտ սեղմման իրադարձության համար:

Միջոցառման տեսակը	Նկարագրություն
`hide.bs.dropdown`	Հրդեհվում է անմիջապես, երբ `hide`կանչվում է օրինակի մեթոդը:
`hidden.bs.dropdown`	Գործարկվել է, երբ բացվող ցանկն ավարտվել է օգտագործողից թաքցնելու և CSS-ի անցումներն ավարտվել են:
`show.bs.dropdown`	Անմիջապես հրդեհվում է, երբ `show`կանչվում է օրինակի մեթոդը:
`shown.bs.dropdown`	Գործարկվել է, երբ բացվող ցանկը տեսանելի է դարձել օգտատիրոջը, և CSS-ի անցումներն ավարտվել են:

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

Բացվող պատուհաններ

Ընդհանուր ակնարկ

Մատչելիություն

Օրինակներ

Մեկ կոճակ

Պառակտման կոճակ

Չափսերը

Մութ անկումներ

Ուղղություններ

RTL

Կենտրոնացված

Բացվող

Բաց թողնելը կենտրոնացած է

Կաթիլ

Dropstart

Ցանկի տարրեր

Ակտիվ

Անաշխատունակ

Մենյուի հավասարեցում

Պատասխանատու հավասարեցում

Հարթեցման ընտրանքներ

Ցանկի բովանդակությունը

Վերնագրեր

Բաժանարարներ

Տեքստ

Ձևաթղթեր

Ավտոմատ փակման պահվածք

CSS

Փոփոխականներ

Sass փոփոխականներ

Միքսիններ

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

JavaScript-ի միջոցով

`data-bs-toggle="dropdown"`դեռ պահանջվում է

Ընտրանքներ

Օգտագործելով գործառույթը`popperConfig`

Մեթոդներ

Իրադարձություններ

Բացվող պատուհաններ

Ընդհանուր ակնարկ

Մատչելիություն

Օրինակներ

Մեկ կոճակ

Պառակտման կոճակ

Չափսերը

Մութ անկումներ

Ուղղություններ

RTL

Կենտրոնացված

Բացվող

Բաց թողնելը կենտրոնացած է

Կաթիլ

Dropstart

Ցանկի տարրեր

Ակտիվ

Անաշխատունակ

Մենյուի հավասարեցում

Պատասխանատու հավասարեցում

Հարթեցման ընտրանքներ

Ցանկի բովանդակությունը

Վերնագրեր

Բացվող վերնագիր

Բաժանարարներ

Տեքստ

Ձևաթղթեր

Բացվող ընտրանքներ

Ավտոմատ փակման պահվածք

CSS

Փոփոխականներ

Sass փոփոխականներ

Միքսիններ

Օգտագործումը

Տվյալների ատրիբուտների միջոցով

JavaScript-ի միջոցով

data-bs-toggle="dropdown"դեռ պահանջվում է

Ընտրանքներ

Օգտագործելով գործառույթըpopperConfig

Մեթոդներ

Իրադարձություններ

`data-bs-toggle="dropdown"`դեռ պահանջվում է

Օգտագործելով գործառույթը`popperConfig`