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

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>Та тэдгээрийг аль ч элементтэй хэрхэн ажиллуулахыг эндээс үзнэ үү :

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

Мөн <a>элементүүдтэй:

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

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

Хамгийн сайн тал нь та үүнийг дурын товчлуурын хувилбараар хийж болно.

<!-- 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. Унждаг зүйлд өөрчлөлт оруулах шаардлагагүй.

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

Мөн үүнийг navbar дээр ашиглахад:

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

Чиглэл

RTL

RTL-д Bootstrap-г ашиглах үед зааврыг толин тусгал хийдэг бөгөөд утга .dropstartнь баруун талд гарч ирнэ.

Унтраах

Үндсэн элемент дээр нэмэх замаар элементүүдийн дээрх унждаг цэсийг өдөөх .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>

Дусал

Үндсэн элемент дээр нэмэх замаар элементүүдийн баруун талд байрлах унждаг цэсийг .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">
    Dropright
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

Зүүн талд

Үндсэн элемент дээр нэмэх замаар элементүүдийн зүүн талд байрлах унждаг цэсийг .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">
  <div class="btn-group dropstart" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
      <span class="visually-hidden">Toggle Dropstart</span>
    </button>
    <ul class="dropdown-menu">
      <!-- Dropdown menu links -->
    </ul>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropstart
  </button>
</div>

Та <a>эсвэл <button>элементүүдийг унадаг зүйл болгон ашиглаж болно.

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

Та мөн интерактив бус унждаг зүйлсийг ашиглан үүсгэж болно .dropdown-item-text. Захиалгат CSS эсвэл текст хэрэглүүрүүдийг ашиглан цаашид загварчлах боломжтой.

<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

<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Унтраах жагсаалтад байгаа зүйлсэд нэмээд тэдгээрийг идэвхгүй болгож хэвлэ .

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

Өгөгдмөл байдлаар, унждаг цэс нь эцэг эхийнхээ дээд ба зүүн талд автоматаар 100% байрладаг. Та үүнийг чиглэлийн .drop*ангиудын тусламжтайгаар өөрчилж болох ч нэмэлт хувиргагч ангиудын тусламжтайгаар удирдаж болно.

Унждаг .dropdown-menu-endцэсийг .dropdown-menuбаруун тийш зэрэгцүүлэх. RTL-д Bootstrap-г ашиглах үед зааврыг толин тусгал хийх бөгөөд утга .dropdown-menu-endнь зүүн талд гарч ирнэ.

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

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

Унждаг цэсийг өгөгдсөн таслах цэг эсвэл түүнээс дээш хэмжээтэй баруун тийш зэрэгцүүлэхийн тулд нэмнэ үү .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.

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

Зүүн унадаг цэсийг өгөгдсөн таслах цэг эсвэл түүнээс дээш хэмжээтэй зэрэгцүүлэхийн тулд болон нэмнэ .dropdown-menu-endүү .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

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

data-bs-display="static"Попперыг navbar-д ашигладаггүй тул та navbars-ийн унадаг товчлууруудад атрибут нэмэх шаардлагагүйг анхаарна уу .

Тохируулгын сонголтууд

Дээр үзүүлсэн ихэнх сонголтуудыг авч үзвэл, энд нэг дороос доош унадаг янз бүрийн тохируулгын сонголтуудын жижиг гал тогооны угаалтуурыг үзүүлэв.

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

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

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

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

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

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

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

Гарчиг

Дурын унждаг цэсэнд үйлдлүүдийн хэсгийг шошголохын тулд толгой хэсгийг нэмнэ үү.

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

Хуваагчид

Холбогдох цэсний бүлгүүдийг хуваагчаар тусгаарла.

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

Маягтууд

Унждаг цэсэнд маягт байрлуулж эсвэл доош унадаг цэс болгож, шаардлагатай сөрөг зайг өгөхийн тулд маржин эсвэл дүүргэх хэрэгслийг ашиглана уу.

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

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

Унждаг жагсаалтын байршлыг өөрчлөхийн тулд data-bs-offsetэсвэл ашиглана уу.data-bs-reference

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

Автомат хаах үйлдэл

Анхдагч байдлаар, унждаг цэсний дотор эсвэл гадна талд дарахад унждаг цэс хаагдана. autoCloseУнждаг цэсний энэ үйлдлийг өөрчлөхийн тулд та сонголтыг ашиглаж болно.

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

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

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

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

Сасс

Хувьсагч

Бүх унадаг цэсийн хувьсагчид:

$dropdown-min-width:                10rem;
$dropdown-padding-x:                0;
$dropdown-padding-y:                .5rem;
$dropdown-spacer:                   .125rem;
$dropdown-font-size:                $font-size-base;
$dropdown-color:                    $body-color;
$dropdown-bg:                       $white;
$dropdown-border-color:             rgba($black, .15);
$dropdown-border-radius:            $border-radius;
$dropdown-border-width:             $border-width;
$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);
$dropdown-divider-bg:               $dropdown-border-color;
$dropdown-divider-margin-y:         $spacer * .5;
$dropdown-box-shadow:               $box-shadow;

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

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

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

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

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

Харанхуй унадаг цэсний хувьсагчид :

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

JavaScript-ээр дамжуулан

JavaScript-ээр унадаг цэс рүү залгана уу:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

`data-bs-toggle="dropdown"`шаардлагатай хэвээр байна

Та JavaScript-ээр унадаг цэс рүү залгах эсвэл оронд нь data-api ашиглах эсэхээс үл хамааран унадаг цэсний data-bs-toggle="dropdown"гох элемент дээр байнга байх шаардлагатай.

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-bs-хавсаргана data-bs-offset="". Өгөгдлийн шинж чанараар сонголтуудыг дамжуулахдаа опционы нэрийн төрлийг camelCase-аас kebab-case болгон өөрчлөхөө мартуузай. Жишээлбэл, ашиглахын оронд data-bs-autoClose="false"ашиглах data-bs-auto-close="false".

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

Функцийг ашиглан`popperConfig`

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

Арга зүй

Арга	Тодорхойлолт
`toggle`	Өгөгдсөн навигацийн самбар эсвэл цонхтой навигацийн унждаг цэсийг сэлгэх.
`show`	Өгөгдсөн навигацийн цэс эсвэл цонхтой навигацийн унждаг цэсийг харуулна.
`hide`	Өгөгдсөн навигацийн цэс эсвэл цонхтой навигацийн унждаг цэсийг нууна.
`update`	Элементийн унадаг цэсийн байрлалыг шинэчилнэ.
`dispose`	Элементийн унадаг цэсийг устгана. (DOM элемент дээр хадгалагдсан өгөгдлийг устгана)
`getInstance`	DOM элементтэй холбоотой унадаг жишээг авах боломжийг олгодог статик арга, та үүнийг дараах байдлаар ашиглаж болно:`bootstrap.Dropdown.getInstance(element)`
`getOrCreateInstance`	DOM элементтэй холбоотой унадаг жишээг буцаадаг статик арга эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх. Та үүнийг дараах байдлаар ашиглаж болно.`bootstrap.Dropdown.getOrCreateInstance(element)`

Үйл явдал

Унтраах бүх үйл явдлуудыг сэлгэн залгах элемент дээр ажиллуулж, дараа нь хөөсөрдөг. Тиймээс та мөн үйл явдлын сонсогчдыг .dropdown-menuэх элемент дээр нэмж болно. hide.bs.dropdownболон hidden.bs.dropdownүйл явдлууд нь товшилтын үйл явдалд зориулсан Үйл явдлын объект агуулсан clickEventөмчтэй (зөвхөн Үйл явдлын анхны төрөл нь ).click

Арга	Тодорхойлолт
`show.bs.dropdown`	Шоу жишээний аргыг дуудах үед шууд галладаг.
`shown.bs.dropdown`	Унтраах цэсийг хэрэглэгчдэд харагдуулж, CSS шилжилтүүд дууссаны дараа идэвхжсэн.
`hide.bs.dropdown`	Нуух жишээний аргыг дуудсан үед шууд асаана.
`hidden.bs.dropdown`	Унтраах цэсийг хэрэглэгчээс нууж, CSS шилжилт дууссаны дараа идэвхжсэн.

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

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

Тойм

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

Жишээ

Ганц товчлуур

Хуваах товчлуур

Хэмжээ тогтоох

Харанхуй унадаг цэсүүд

Чиглэл

RTL

Унтраах

Дусал

Зүүн талд

Цэсийн зүйл

Идэвхтэй

Идэвхгүй

Цэсний тохируулга

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

Тохируулгын сонголтууд

Цэсийн агуулга

Гарчиг

Хуваагчид

Текст

Маягтууд

Автомат хаах үйлдэл

Сасс

Хувьсагч

Холимог

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

`data-bs-toggle="dropdown"`шаардлагатай хэвээр байна

Сонголтууд

Функцийг ашиглан`popperConfig`

Арга зүй

Үйл явдал

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

Тойм

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

Жишээ

Ганц товчлуур

Хуваах товчлуур

Хэмжээ тогтоох

Харанхуй унадаг цэсүүд

Чиглэл

RTL

Унтраах

Дусал

Зүүн талд

Цэсийн зүйл

Идэвхтэй

Идэвхгүй

Цэсний тохируулга

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

Тохируулгын сонголтууд

Цэсийн агуулга

Гарчиг

Унждаг толгой хэсэг

Хуваагчид

Текст

Маягтууд

Унтраах сонголтууд

Автомат хаах үйлдэл

Сасс

Хувьсагч

Холимог

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

data-bs-toggle="dropdown"шаардлагатай хэвээр байна

Сонголтууд

Функцийг ашигланpopperConfig

Арга зүй

Үйл явдал

`data-bs-toggle="dropdown"`шаардлагатай хэвээр байна

Функцийг ашиглан`popperConfig`