Mavzu: bootstrap dropdownsning asosiy vazifalari

MAVZU: BOOTSTRAP DROPDOWNSNING ASOSIY VAZIFALARI

REJA:
1. Bootstrap dropdowns haqida umumiy ma’lumot
2 Bootstrap dropdowns asosiy vazifalari
3. Bootstrap dropdowns imkoniyatlari

Bootstrap (talaffuzi: Butstrap) — bu mobil qurilmalar uchun moslashuvchan hamda front-end dasturlash uchun moʻljallangan bepul va ochiq kodli CSS freymvorki. Bu freymvork tipografiya, formalar, tugmalar, navigatsiya va boshqa interfeys komponentlari uchun CSS (ixtiyoriy ravishda) va JavaScript dasturlash tillariga asoslangan dizayn andozalarini oʻz ichiga oladi.

Bootstrap GitHubning eng mashhur loyihalaridan biri hisoblanib, 142 000 dan oshiq yulduzchalarga egadir hamda bu koʻrsatkich bilan u freeCodeCamp (312 000 ga yaqin yulduz) va Vue.js freymvorklaridan keyingi oʻrinlarda turadi.
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 uchinchi tomon kutubxonasi, Popper.js asosida qurilgan bo'lib, u dinamik joylashishni aniqlash va ko'rish maydonini aniqlash imkonini beradi. Bootstrap JavaScript-dan oldin popper.min.js-ni qo'shganingizga ishonch hosil qiling yoki Popper.js-ni o'z ichiga olgan bootstrap.bundle.min.js / bootstrap.bundle.js dan foydalaning. Popper.js navigatsiya panellarida ochiladigan menyularni joylashtirish uchun ishlatilmaydi, ammo dinamik joylashishni aniqlash shart emas.
Agar siz JavaScript-ni manbadan yaratayotgan bo'lsangiz, util.js faylini talab qiladi.
Foydalanish imkoniyati
WAI ARIA standarti haqiqiy rol="menyu" vidjetini belgilaydi, ammo bu amallar yoki funktsiyalarni 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'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 rol va ariya atributlaridan hech birini kutmaydi (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, kursor tugmalari yordamida alohida ochiladigan .element elementlari bo'ylab harakatlanish va ESC tugmasi bilan menyuni yopish qobiliyati.
Misollar
Ochiladigan menyuni almashtirish tugmachasini (tugmangiz yoki havolangiz) va ochiladigan menyuni .ochiladigan menyu yoki joylashuvni e'lon qiladigan boshqa elementni o'rang: nisbatan;. Potensial ehtiyojlaringizni yaxshiroq qondirish uchun yoki elementlaridan ochiladigan menyular ishga tushirilishi mumkin.
Yagona tugmachalar ochiladi
Har qanday bitta .btn ba'zi belgilash o'zgarishlari bilan ochiladigan menyuga aylantirilishi mumkin. Ularni qanday qilib elementlar bilan ishlashga qo'yishingiz mumkin:

Dropdown button

Action
Another action
Something else here

And with  elements:
Dropdown link 
Copy

Dropdown link

Action
Another action
Something else here

The best part is you can do this with any button variant, too:
Primary
Secondary
Success
Info
Warning
Danger
Copy

Action

Action
Another action
Something else here

Separated link

Ochiladigan tugmachalarni ajratish
Xuddi shunday, ochiladigan ochiladigan tugmachalarni deyarli bitta tugmachalar bilan bir xil belgilash bilan, lekin ochiladigan karet atrofida to'g'ri oraliq bo'lish uchun .dropdown-toggle-split qo'shilgan holda yarating.

Biz ushbu qo'shimcha sinfdan karetaning har ikki tomonidagi gorizontal to'ldirishni 25% ga qisqartirish va oddiy ochiladigan tugmalar uchun qo'shilgan chap chegarani olib tashlash uchun foydalanamiz. Ushbu qo'shimcha o'zgarishlar karetani ajratish tugmachasining markazida ushlab turadi va asosiy tugma yonida yanada mosroq o'lchamdagi urish maydonini ta'minlaydi.

Action

Toggle Dropdown

Action
Another action
Something else here

Separated link

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

Large button

...

Large split button


Toggle Dropdown

...

Small button

...

Small split button


Toggle Dropdown

...

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

Dropup

Split dropup


Toggle Dropdown

Dropright variation
Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.
Dropright 
Split droprightToggle Dropdright
Copy

Dropright

Split dropright


Toggle Dropright

Dropleft variation
Trigger dropdown menus at the left of the elements by adding .dropleft to the parent element.
Dropleft
Ma'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin asosiy ro'yxat elementidagi .show sinfini almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi. Data-toggle="dropdown" atributi ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.
Sensorli qurilmalarda ochiladigan ro'yxatni ochish elementining bevosita bolalariga bo'sh ($.noop) sichqonchani boshqarish vositalarini 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 yopadigan kodni ishga tushirishiga to'sqinlik qiladi. Ochiladigan ro'yxat yopilgandan so'ng, ushbu qo'shimcha bo'sh sichqonchani qayta ishlovchilar o'chiriladi.