Унтраах цэсүүд

Bootstrap унадаг залгаасыг ашиглан холбоосын жагсаалт болон бусад зүйлийг харуулах контекст давхаргыг сэлгэх.

Энэ хуудсан дээр

Тойм

Унтраах цэсүүд нь сэлгэх боломжтой, холбоосын жагсаалт болон бусад зүйлсийг харуулах контекст давхаргууд юм. Тэдгээрийг оруулсан Bootstrap унадаг JavaScript залгаастай интерактив болгосон. Тэдгээрийг зөөвөрлөх замаар биш харин товших замаар сэлгэх боломжтой; Энэ бол санаатай дизайны шийдвэр юм.

Унтраах цэсүүд нь динамик байрлал тогтоох, харах талбар илрүүлэх боломжийг олгодог гуравдагч талын Поппер номын сан дээр бүтээгдсэн . Bootstrap-н JavaScript-н өмнө popper.min.js оруулах эсвэл Поппер агуулсан bootstrap.bundle.min.js/ ашиглахаа мартуузай . bootstrap.bundle.jsПоппер нь динамик байршлыг тогтоох шаардлагагүй тул унадаг цэсийг navbars-д байрлуулахад ашигладаггүй.

Хүртээмжтэй байдал

WAI ARIA стандарт нь бодит виджетийг role="menu"тодорхойлдог боловч энэ нь үйлдэл эсвэл функцийг идэвхжүүлдэг програмтай төстэй цэсүүдэд зориулагдсан юм. ARIA цэс нь зөвхөн цэсийн зүйл, шалгах хайрцагны цэсийн зүйл, радио товчлуурын цэсийн зүйл, радио товчлуурын бүлгүүд болон дэд цэсүүдийг агуулж болно.

Нөгөө талаас Bootstrap-ийн уналт нь ерөнхий байхаар бүтээгдсэн бөгөөд янз бүрийн нөхцөл байдал, тэмдэглэгээний бүтцэд хэрэглэгдэх боломжтой. Жишээлбэл, хайлтын талбар эсвэл нэвтрэх маягт гэх мэт нэмэлт оруулга, маягтын удирдлагыг агуулсан унадаг цэсийг үүсгэх боломжтой. Ийм учраас Bootstrap нь жинхэнэ ARIA цэсэнд шаардлагатай шинж чанаруудын аль нэгийг нь хүлээхгүй ( roleмөн автоматаар нэмдэггүй). Зохиогчид эдгээр илүү тодорхой шинж чанаруудыг өөрсдөө оруулах ёстой.aria-

.dropdown-itemГэсэн хэдий ч Bootstrap нь курсорын товчлууруудыг ашиглан тус тусад нь элементүүдээр шилжих, товчлуураар цэсийг хаах зэрэг гарны цэсийн ихэнх стандарт харилцан үйлчлэлд суурилуулсан дэмжлэгийг нэмдэг 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унждаг каретны эргэн тойронд тохирох зайг нэмж, хуваах товчлууруудыг үүсгээрэй.

Бид энэ нэмэлт ангиудыг paddingкаретны хоёр тал дахь хэвтээ хэсгийг 25%-иар багасгаж, 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ашиглан шинж чанарыг ашиглана уу .pagetrue

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-endцэсийг .dropdown-menuбаруун тийш зэрэгцүүлэх. RTL-д Bootstrap-г ашиглах үед зааврыг толин тусгал хийдэг бөгөөд утга .dropdown-menu-endнь зүүн талд гарч ирнэ.

Анхаараарай! Унтраах цэсүүд нь навигацийн мөрөнд агуулагдахаас бусад тохиолдолд Попперын ачаар байрладаг.

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>

Хариуцлагатай тохируулга

Хэрэв та responsive alignment ашиглахыг хүсвэл атрибут нэмж динамик байршлыг идэвхгүй болгож 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"Попперыг navbar дээр ашигладаггүй тул та 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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчдад хандах хандлагын нэг хэсэг болгон унадаг цэснүүд нь одоо .dropdown-menuбодит цагийн сайжруулсан тохиргоонд локал CSS хувьсагчдыг ашигладаг. 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};

.dropdown-menu-darkДавхардсан CSS сонгогчийг нэмэхгүйгээр тодорхой утгыг дарах анги дээр 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;

Холимог

Mixins нь 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;
    }
  }
}

Хэрэглээ

.showӨгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулан унадаг залгаас нь эцэг эх дээрх ангийг сэлгэх замаар далд агуулгыг (унтраах цэс) сэлгэдэг .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-ээр унадаг цэс рүү залгах эсвэл оронд нь data-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 хувилбарын хувьд бүх бүрэлдэхүүн хэсгүүд нь энгийн бүрэлдэхүүн хэсгийн тохиргоог JSON стринг болгон байрлуулах боломжтой туршилтын нөөцлөгдсөн өгөгдлийн шинж чанарыг дэмждэг. data-bs-configЭлемент 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'`	Унждаг цэсний халих хязгаарлалтын хил хязгаар (зөвхөн Попперийн preventOverflow хувиргагчид хамаарна). Анхдагч байдлаар энэ `clippingParents`нь HTMLElement лавлагааг хүлээн авах боломжтой (зөвхөн JavaScript-ээр). Дэлгэрэнгүй мэдээллийг Попперын detectOverflow баримтаас үзнэ үү .
`display`	мөр	`'dynamic'`	Анхдагч байдлаар бид динамик байрлал тогтооход Попперыг ашигладаг. Үүнийг ашиглан идэвхгүй болгох `static`.
`offset`	массив, мөр, функц	`[0, 2]`	Зорилтоттой харьцуулахад унждаг цэсийн офсет. Та өгөгдлийн атрибутуудад тэмдэгт мөрийг таслалаар тусгаарласан утгуудаар дамжуулж болно: `data-bs-offset="10,20"`. Функцийг офсетийг тодорхойлоход ашиглах үед түүнийг эхний аргумент болгон попперийн байрлал, лавлагаа, поппер шулуунуудыг агуулсан объектоор дууддаг. Өдөөгч элементийн DOM зангилааг хоёр дахь аргумент болгон дамжуулна. Функц нь хоёр тоо бүхий массивыг буцаах ёстой: skidding , distance . Дэлгэрэнгүй мэдээллийг Попперын офсет баримтаас үзнэ үү .
`popperConfig`	null, объект, функц	`null`	Bootstrap-ийн өгөгдмөл Popper тохиргоог өөрчлөхийн тулд Попперын тохиргоог үзнэ үү . Попперын тохиргоог бий болгоход функцийг ашиглах үед Bootstrap-ийн анхдагч Popper тохиргоог агуулсан объектоор дуудагдана. Энэ нь танд өгөгдмөл тохиргоог өөрийн тохиргоотой ашиглах, нэгтгэхэд тусална. Функц нь Попперын тохиргооны объектыг буцаах ёстой.
`reference`	мөр, элемент, объект	`'toggle'`	Унждаг цэсний лавлах элемент. `'toggle'`, `'parent'`, HTMLElement лавлагаа эсвэл хангадаг объектын утгыг хүлээн авна `getBoundingClientRect`. Дэлгэрэнгүй мэдээллийг Попперын бүтээгч болон виртуал элементийн баримт бичгүүдээс үзнэ үү .

Функцийг ашиглан`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эх элемент дээр нэмж болно. 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`