Ochiladigan menyular

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

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.

Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js .

Foydalanish imkoniyati

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

Boshqa tomondan, Bootstrap-ning ochiladigan ro'yxatlari umumiy bo'lib, 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>

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" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Va <a>elementlar bilan:

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

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</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-toggle="dropdown" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Yo'nalishlar

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-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</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-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Dropright

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

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

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Chap tomonda

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

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

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Tarixiy ravishda ochiladigan menyu mazmuni havolalar bo'lishi kerak edi , lekin bu endi v4 bilan emas. Endi siz ixtiyoriy ravishda ochiladigan menyuda faqat s <button>o'rniga elementlardan foydalanishingiz mumkin.<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</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.

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

Faol

.activeOchiladigan menyudagi elementlarga qo'shing va ularni faol deb belgilang .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

O'chirilgan

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

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Odatiy bo'lib, ochiladigan menyu avtomatik ravishda ota-onasining yuqori qismidan 100% va chap tomonida joylashgan. Ochiladigan .dropdown-menu-rightmenyuni .dropdown-menuo'ngga tekislang.

Oldindan qisqa ma'lumot berish! Ochiladigan ro'yxatlar Popper tufayli joylashtirilgan (ular navigatsiya panelida bo'lmaganidan tashqari).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Javobgar tekislash

Agar javob beruvchi hizalamadan foydalanmoqchi bo'lsangiz, atributni qo'shish orqali dinamik joylashishni aniqlashni o'chiring data-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}-right.

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

Chap ochiladigan menyuni berilgan to'xtash nuqtasi yoki undan kattaroq bilan tekislash uchun .dropdown-menu-rightva qo'shing .dropdown-menu{-sm|-md|-lg|-xl}-left.

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

data-display="static"Esda tutingki , navigatsiya panelidagi ochiladigan tugmalarga atribut qo'shish shart emas , chunki Popper navigatsiya panellarida ishlatilmaydi.

Sarlavhalar

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

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Ajratuvchilar

Tegishli menyu elementlarini ajratuvchi bilan ajrating.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

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.

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

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <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="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <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-offsetyoki dan foydalaning .data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </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-toggle="dropdown" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Foydalanish

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

Sensorli qurilmalarda ochiladigan menyuni ochish elementning bevosita bolalariga bo'sh ( $.noop) ishlov beruvchilarni qo'shadi. 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 ishlov beruvchilar o'chiriladi. mouseover<body>mouseover

Ma'lumotlar atributlari orqali

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

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

JavaScript orqali

JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:

$('.dropdown-toggle').dropdown()

`data-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-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-kabi qoʻshing data-offset="".

Ism	Turi	Standart	Tavsif
ofset	raqam \| string \| funktsiyasi	0	Ochiladigan ro'yxatning maqsadiga nisbatan ofset. Ofsetni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida ofset ma'lumotlarini o'z ichiga olgan ob'ekt bilan chaqiriladi. Funktsiya bir xil tuzilishga ega ob'ektni qaytarishi kerak. DOM tugunining ishga tushiruvchi elementi ikkinchi argument sifatida uzatiladi. Qo'shimcha ma'lumot olish uchun Popperning ofset hujjatlariga qarang .
aylantirmoq	mantiqiy	rost	Agar mos yozuvlar elementi bir-biriga o‘xshab qolsa, ochiladigan menyuni aylantirishga ruxsat bering. Qo'shimcha ma'lumot olish uchun Popper's flip docs ga qarang .
chegara	string \| element	'scrollParent'	Ochiladigan menyuning to'lib ketish cheklovi chegarasi. `'viewport'`, `'window'`, `'scrollParent'`, yoki HTMLElement havolasi qiymatlarini qabul qiladi (faqat JavaScript). Qo'shimcha ma'lumot olish uchun Popperning preventOverflow hujjatlariga qarang .
ma'lumotnoma	string \| element	"o'tish"	Ochiladigan menyuning mos yozuvlar elementi. `'toggle'`, `'parent'`yoki HTMLElement havolasi qiymatlarini qabul qiladi . Qo'shimcha ma'lumot olish uchun Popper's referenceObject docs ga qarang .
ko'rsatish	ip	"dinamik"	Odatiy bo'lib, biz dinamik joylashishni aniqlash uchun Popperdan foydalanamiz. Buni bilan o'chirib qo'ying `static`.
popperConfig	null \| ob'ekt	null	Bootstrap-ning standart Popper konfiguratsiyasini o'zgartirish uchun Popper konfiguratsiyasiga qarang

E'tibor bering, qachon boundaryboshqa qiymatga o'rnatilgan bo'lsa 'scrollParent', uslub konteynerga position: staticqo'llaniladi ..dropdown

Usullari

Usul	Tavsif
`$().dropdown('toggle')`	Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.
`$().dropdown('show')`	Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini ko'rsatadi.
`$().dropdown('hide')`	Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini yashiradi.
`$().dropdown('update')`	Elementning ochiladigan ro'yxatining o'rnini yangilaydi.
`$().dropdown('dispose')`	Elementning ochiladigan ro'yxatini yo'q qiladi.

Voqealar

Barcha ochiladigan hodisalar .dropdown-menu'ning asosiy elementida ishga tushiriladi va relatedTargetqiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega. hide.bs.dropdownva hidden.bs.dropdownhodisalar bosish hodisasi uchun Hodisa ob'ektini o'z ichiga olgan clickEventxususiyatga ega (faqat asl hodisa turi bo'lsa ).click

Tadbir	Tavsif
`show.bs.dropdown`	Bu hodisa shou namunasi usuli chaqirilganda darhol ishga tushadi.
`shown.bs.dropdown`	Ushbu hodisa ochiladigan ro'yxat foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
`hide.bs.dropdown`	Hide misol usuli chaqirilganda, bu hodisa darhol ishga tushiriladi.
`hidden.bs.dropdown`	Ushbu hodisa ochiladigan menyu foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

Ochiladigan menyular

Umumiy koʻrinish

Foydalanish imkoniyati

Misollar

Yagona tugma

Ajratish tugmasi

Hajmi

Yo'nalishlar

Ochilish

Dropright

Chap tomonda

Menyu elementlari

Faol

O'chirilgan

Menyuni tekislash

Javobgar tekislash

Menyu tarkibi

Sarlavhalar

Ajratuvchilar

Matn

Shakllar

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript orqali

`data-toggle="dropdown"`hali ham talab qilinadi

Variantlar

Usullari

Voqealar

Ochiladigan menyular

Umumiy koʻrinish

Foydalanish imkoniyati

Misollar

Yagona tugma

Ajratish tugmasi

Hajmi

Yo'nalishlar

Ochilish

Dropright

Chap tomonda

Menyu elementlari

Faol

O'chirilgan

Menyuni tekislash

Javobgar tekislash

Menyu tarkibi

Sarlavhalar

Ochiladigan sarlavha

Ajratuvchilar

Matn

Shakllar

Ochiladigan variantlar

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript orqali

data-toggle="dropdown"hali ham talab qilinadi

Variantlar

Usullari

Voqealar

`data-toggle="dropdown"`hali ham talab qilinadi