Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Ochiladigan menyular

Bootstrap ochiladigan plagin yordamida havolalar roʻyxatini va boshqalarni koʻrsatish uchun kontekstli qoplamalarni oʻchirib qoʻying.

Ushbu sahifada

Umumiy koʻrinish

Ochiladigan menyular o'zgaruvchan, havolalar ro'yxatini ko'rsatish uchun kontekstli qoplamalar va boshqalar. Ular kiritilgan Bootstrap ochiladigan JavaScript plagini bilan interaktiv qilingan. Ular kursorni bosish orqali emas, balki bosish orqali almashtiriladi; Bu qasddan qilingan dizayn qarori .

Ochiladigan menyular Popper uchinchi tomon kutubxonasida qurilgan bo'lib , u dinamik joylashishni aniqlash va ko'rish maydonini aniqlash imkonini beradi. Bootstrap JavaScript-dan oldin popper.min.js ni qo'shishni yoki Popperni o'z ichiga olgan bootstrap.bundle.min.js/ dan foydalanishni unutmang . bootstrap.bundle.jsPopper navigatsiya panellarida ochiladigan menyularni joylashtirish uchun ishlatilmaydi, ammo dinamik joylashishni aniqlash shart emas.

Foydalanish imkoniyati

WAI ARIArole="menu" standarti haqiqiy vidjetni belgilaydi , ammo bu amallar yoki funksiyalarni ishga tushiradigan dasturga o'xshash menyularga xosdir. ARIA menyularida faqat menyu elementlari, katakcha menyusi elementlari, radio tugmalar menyusi elementlari, radio tugmalar guruhlari va pastki menyular bo'lishi mumkin.

Boshqa tomondan, Bootstrap-ning ochiladigan ro'yxatlari umumiy bo'lishi va turli vaziyatlar va belgilash tuzilmalari uchun qo'llanilishi uchun mo'ljallangan. Masalan, qidiruv maydonlari yoki kirish shakllari kabi qo'shimcha kirishlar va shakl boshqaruvlarini o'z ichiga olgan ochiladigan menyularni yaratish mumkin. Shu sababli, Bootstrap haqiqiy ARIA menyulari uchun zarur bo'lgan roleva aria-atributlardan hech birini kutmaydi (va avtomatik ravishda qo'shmaydi) . Mualliflar ushbu aniqroq atributlarni o'zlari kiritishlari kerak.

Biroq, Bootstrap ko'pgina standart klaviatura menyusi o'zaro ta'sirlari uchun o'rnatilgan yordamni qo'shadi, masalan, .dropdown-itemkursor tugmachalari yordamida alohida elementlar bo'ylab harakatlanish va menyuni tugma bilan yopish qobiliyati ESC.

Misollar

Ochilish tugmachasini (tugmangiz yoki havolangiz) va ochiladigan menyuni .dropdownyoki ni e'lon qiladigan boshqa elementni o'rang position: relative;. Potensial ehtiyojlaringizni yaxshiroq qondirish uchun ochiladigan menyular <a>yoki elementlardan ishga tushirilishi mumkin . <button>Bu erda ko'rsatilgan misollar kerak bo'lganda semantik <ul>elementlardan foydalanadi, ammo maxsus belgilash qo'llab-quvvatlanadi.

Yagona tugma

Har qanday singl .btnba'zi belgilash o'zgarishlari bilan ochiladigan menyuga aylantirilishi mumkin. <button>Ularni ikkala element bilan ishlashga qanday qo'yishingiz mumkin :

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

Va <a>elementlar bilan:

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

Eng yaxshi tomoni shundaki, siz buni istalgan tugma varianti bilan ham qilishingiz mumkin:

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

Ajratish tugmasi

Xuddi shunday, ochiladigan ochiladigan tugmachalarni bir xil tugmachalar bilan deyarli bir xil belgilar bilan, lekin .dropdown-toggle-splitochiladigan karet atrofida to'g'ri bo'sh joy uchun qo'shilgan holda yarating.

paddingBiz karetaning har ikki tomonidagi gorizontalni 25% ga qisqartirish va margin-leftoddiy ochiladigan tugmalar uchun qo'shilganlarni olib tashlash uchun ushbu qo'shimcha sinfdan foydalanamiz. Ushbu qo'shimcha o'zgarishlar karetni ajratish tugmachasining markazida ushlab turadi va asosiy tugma yonida yanada mosroq o'lchamdagi urish maydonini ta'minlaydi.

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

Hajmi

Ochiladigan tugmachalar barcha o'lchamdagi tugmalar bilan ishlaydi, shu jumladan standart va ajratilgan ochiladigan tugmalar.

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

Qorong'i ochiladigan menyular

Mavjudga qo'shish orqali qorong'i navbar yoki maxsus uslubga mos kelish uchun quyuqroq ochiladigan menyularni .dropdown-menu-darktanlang .dropdown-menu. Ochiladigan elementlarga hech qanday o'zgartirish kerak emas.

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

Va uni navigatsiya panelida ishlatish uchun:

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

Yo'nalishlar

RTL

RTL-da Bootstrap-dan foydalanganda ko'rsatmalar aks ettiriladi, ma'no .dropstarto'ng tomonda paydo bo'ladi.

Ochilish

.dropupAsosiy elementga qo'shish orqali elementlar ustidagi ochiladigan menyularni ishga tushiring.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

Dropright

.dropendAsosiy elementga qo'shish orqali elementlarning o'ng tomonidagi ochiladigan menyularni ishga tushiring .

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

Chap tomonda

.dropstartAsosiy elementga qo'shish orqali elementlarning chap tomonidagi ochiladigan menyularni ishga tushiring .

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

Ochiladigan elementlar sifatida <a>yoki elementlardan foydalanishingiz mumkin .<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>

Bundan tashqari, bilan interaktiv bo'lmagan ochiladigan elementlarni yaratishingiz mumkin .dropdown-item-text. Maxsus CSS yoki matn yordam dasturlari yordamida uslubni yanada qulayroq qiling.

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

Faol

.activeOchiladigan ro'yxatdagi elementlarga qo'shing va ularni faol deb belgilang . Faol holatni yordamchi texnologiyalarga etkazish uchun aria-currentatributdan foydalaning - pagejoriy sahifa yoki trueto'plamdagi joriy element uchun qiymatdan foydalaning.

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

O'chirilgan

.disabledOchiladigan ro'yxatdagi elementlarga qo'shing , ularni o'chirib qo'ying .

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

Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Buni yo'nalish .drop*sinflari bilan o'zgartirishingiz mumkin, lekin ularni qo'shimcha modifikator sinflari bilan ham boshqarishingiz mumkin.

Ochiladigan .dropdown-menu-endmenyuni .dropdown-menuo'ngga tekislang. RTL-da Bootstrap-dan foydalanilganda ko'rsatmalar aks ettiriladi, ma'no .dropdown-menu-endchap tomonda paydo bo'ladi.

Oldindan qisqa ma'lumot berish! Ochiladigan menyular Popper yordamida joylashtiriladi, bundan tashqari ular navigatsiya panelida joylashgan bo'lsa. 
<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>

Javobgar tekislash

Agar javob beruvchi hizalamadan foydalanmoqchi bo'lsangiz, atributni qo'shish orqali dinamik joylashishni aniqlashni o'chiring data-bs-display="static"va sezgir o'zgaruvchanlik sinflaridan foydalaning.

Ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq o'ngga tekislash uchun qo'shing .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>

Chap ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq bilan tekislash uchun .dropdown-menu-endva qo'shing .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"Esda tutingki , navigatsiya panelidagi ochiladigan tugmalarga atribut qo'shish shart emas , chunki Popper navigatsiya panellarida ishlatilmaydi.

Hizalama variantlari

Yuqorida ko'rsatilgan variantlarning ko'pchiligini hisobga olgan holda, bu erda bir joyda turli xil ochiladigan tekislash opsiyalarining kichik oshxona lavabosi demosi.

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

Menyu tarkibi

Sarlavhalar

Har qanday ochiladigan menyuda harakatlar bo'limlarini belgilash uchun sarlavha qo'shing.

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

Ajratuvchilar

Tegishli menyu elementlarini ajratuvchi bilan ajrating.

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

Matn

Erkin shakldagi har qanday matnni matnli ochiladigan menyuga joylashtiring va intervalli yordam dasturlaridan foydalaning . Menyu kengligini cheklash uchun sizga qo'shimcha o'lcham uslublari kerak bo'lishi mumkinligini unutmang.

Ochiladigan menyuda erkin harakatlanadigan ba'zi misol matni.

Va bu ko'proq misol matn.

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

Shakllar

Shaklni ochiladigan menyuga qo'ying yoki uni ochiladigan menyuga aylantiring va unga kerakli salbiy bo'sh joy berish uchun chekka yoki to'ldirish yordam dasturlaridan foydalaning.

Bu yerda yangimi? Ro'yxatdan o'tish Parolni unutdingizmi? 
<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>

Ochiladigan ro'yxatning joylashuvini o'zgartirish uchun data-bs-offsetyoki dan foydalaning .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>

Avtomatik yopish harakati

Odatiy bo'lib, ochiladigan menyuning ichida yoki tashqarisida bosilganda ochiladigan menyu yopiladi. autoCloseOchiladigan menyuning ushbu harakatini o'zgartirish uchun opsiyadan foydalanishingiz mumkin .

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

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

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

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

Sass

O'zgaruvchilar

Barcha ochiladigan menyular uchun o'zgaruvchilar:

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

Qorong'i ochiladigan menyu uchun o'zgaruvchilar :

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

Ochiladigan oynaning interaktivligini ko'rsatadigan CSS-ga asoslangan karetlar uchun o'zgaruvchilar:

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

Aralashmalar

Mixinlar CSS-ga asoslangan karetlarni yaratish uchun ishlatiladi va ularni 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;
    }
  }
}

Foydalanish

Ma'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin ota-onadagi .showsinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi .dropdown-menu. Atribut data-bs-toggle="dropdown"ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.

Sensorli qurilmalarda ochiladigan menyuni ochish elementning mouseoverbevosita bolalariga bo'sh ishlov beruvchilarni qo'shadi. <body>Bu, shubhasiz, xunuk buzg'unchilik iOS-ning tadbirlar delegatsiyasidagi g'alati muammoni hal qilish uchun zarur bo'lib, aks holda ochiladigan menyudan tashqaridagi istalgan joyga teginish ochiladigan menyuni yopuvchi kodni ishga tushirishiga yo'l qo'ymaydi. Ochiladigan menyu yopilgach, ushbu qo'shimcha bo'sh mouseoverishlov beruvchilar o'chiriladi.

Ma'lumotlar atributlari orqali

data-bs-toggle="dropdown"Ochiladigan menyuni almashtirish uchun havola yoki tugmaga qo'shing .

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

JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})
data-bs-toggle="dropdown"hali ham talab qilinadi

Ochiladigan menyuga JavaScript orqali qo'ng'iroq qilishingiz yoki uning o'rniga data-api dan foydalanmasligingizdan qat'i nazar, data-bs-toggle="dropdown"har doim ochiladigan menyuning tetik elementida bo'lish talab qilinadi.

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-kabi qoʻshing data-bs-offset="". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda optsion nomining registr turini camelCase’dan kabob-case’ga oʻzgartirishni unutmang. Misol uchun, dan foydalanish o'rniga data-bs-autoClose="false", foydalaning data-bs-auto-close="false".

Ism Turi Standart Tavsif
boundary string | element 'clippingParents' Ochiladigan menyuning toshib ketish cheklovi chegarasi (faqat Popperning preventOverflow modifikatoriga tegishli). Odatiy bo'lib, u 'clippingParents'HTMLElement havolasini qabul qilishi mumkin (faqat JavaScript orqali). Qo'shimcha ma'lumot olish uchun Popperning detectOverflow hujjatlariga qarang .
reference string | element | ob'ekt 'toggle' Ochiladigan menyuning mos yozuvlar elementi. 'toggle', 'parent', HTMLElement havolasi yoki taqdim etuvchi obyekt qiymatlarini qabul qiladi getBoundingClientRect. Qo'shimcha ma'lumot olish uchun Popperning konstruktor hujjatlari va virtual element hujjatlariga qarang .
display ip 'dynamic' Odatiy bo'lib, biz dinamik joylashishni aniqlash uchun Popperdan foydalanamiz. Buni bilan o'chirib qo'ying static.
offset massiv | string | funktsiyasi [0, 2]

Ochiladigan ro'yxatning maqsadiga nisbatan ofset. Siz qatorni vergul bilan ajratilgan ma'lumotlar atributlariga o'tkazishingiz mumkin, masalan:data-bs-offset="10,20"

Ofsetni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida popper joylashuvi, havola va popper rectsni o'z ichiga olgan ob'ekt bilan chaqiriladi. DOM tugunining ishga tushiruvchi elementi ikkinchi argument sifatida uzatiladi. Funktsiya ikkita raqamdan iborat massivni qaytarishi kerak: .[skidding, distance]

Qo'shimcha ma'lumot olish uchun Popperning ofset hujjatlariga qarang .
autoClose mantiqiy | ip true

Ochiladigan menyuning avtomatik yopilishini sozlang:

  • true- ochiladigan menyu tashqarisida yoki ichida bosish orqali ochiladigan menyu yopiladi.
  • false- ochiladigan menyu almashtirish tugmachasini bosish va qo'lda qo'ng'iroq qilish hideyoki toggleusul bilan yopiladi. (Shuningdek, tugmani bosish bilan yopilmaydi esc)
  • 'inside'- ochiladigan menyu (faqat) ochiladigan menyuni bosish orqali yopiladi.
  • 'outside'- ochiladigan menyu (faqat) ochiladigan menyudan tashqaridagi tugmani bosish orqali yopiladi.
popperConfig null | ob'ekt | funktsiyasi null

Bootstrap-ning standart Popper konfiguratsiyasini o'zgartirish uchun Popper konfiguratsiyasiga qarang .

Popper konfiguratsiyasini yaratish uchun funktsiyadan foydalanilganda, u Bootstrap standart Popper konfiguratsiyasini o'z ichiga olgan ob'ekt bilan chaqiriladi. Bu standartni o'zingizning konfiguratsiyangiz bilan ishlatish va birlashtirishga yordam beradi. Funktsiya Popper uchun konfiguratsiya ob'ektini qaytarishi kerak.

Funktsiyadan foydalanishpopperConfig

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

Usullari

Usul Tavsif
toggle Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.
show Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini ko'rsatadi.
hide Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini yashiradi.
update Elementning ochiladigan ro'yxatining o'rnini yangilaydi.
dispose Elementning ochiladigan ro'yxatini yo'q qiladi. (DOM elementida saqlangan ma'lumotlarni o'chiradi)
getInstance DOM elementi bilan bog'langan ochiladigan misolni olish imkonini beruvchi statik usul, uni quyidagicha ishlatishingiz mumkin:bootstrap.Dropdown.getInstance(element)
getOrCreateInstance DOM elementi bilan bog'langan ochiladigan misolni qaytaradigan yoki ishga tushirilmagan bo'lsa, yangisini yaratadigan statik usul. Siz undan shunday foydalanishingiz mumkin:bootstrap.Dropdown.getOrCreateInstance(element)

Voqealar

Barcha ochiladigan hodisalar o'tish elementida ishga tushiriladi va keyin ko'piklanadi. Shunday qilib, siz voqea tinglovchilarini .dropdown-menuota-ona elementiga ham qo'shishingiz mumkin. hide.bs.dropdownva hidden.bs.dropdownhodisalar bosish hodisasi uchun Hodisa ob'ektini o'z ichiga olgan clickEventxususiyatga ega (faqat Voqeaning asl turi bo'lsa ).click

Usul Tavsif
show.bs.dropdown Ko'rsatish namunasi usuli chaqirilganda darhol yonadi.
shown.bs.dropdown Ochiladigan menyu foydalanuvchiga ko'rinadigan bo'lsa va CSS o'tishlari tugallanganda ishga tushiriladi.
hide.bs.dropdown Hide misol usuli chaqirilganda darhol yonadi.
hidden.bs.dropdown Ochiladigan ro'yxat foydalanuvchidan yashirilib, CSS o'tishlari tugallangandan so'ng ishga tushiriladi. 
var myDropdown = document.getElementById('myDropdown')
myDropdown.addEventListener('show.bs.dropdown', function () {
  // do something...
})