Bir nechta sinflar va JavaScript plaginlarimiz yordamida loyihangiz boʻylab kontentning koʻrinishini oʻzgartiring.
U qanday ishlaydi
Collapse JavaScript plagini kontentni ko'rsatish va yashirish uchun ishlatiladi. Tugmalar yoki langarlar siz almashtiradigan muayyan elementlarga moslashtirilgan trigger sifatida ishlatiladi. Elementni yig'ish heightjoriy qiymatidan jonlantiriladi 0. CSS animatsiyalarni qanday boshqarishini hisobga olsak, siz elementdan foydalana paddingolmaysiz .collapse. Buning o'rniga, sinfni mustaqil o'rash elementi sifatida foydalaning.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Bir nechta maqsadlar
A <button>yoki <a>bir nechta elementlarni JQuery selektori hrefyoki data-targetatributiga havola qilish orqali ko'rsatishi va yashirishi mumkin. Bir nechta <button>yoki <a>elementni ko'rsatishi va yashirishi mumkin, agar ularning har biri unga o'z atributi bilan hrefmurojaat data-targetqilsa
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Akkordeon misoli
Karta komponentidan foydalanib , siz akkordeon yaratish uchun sukut bo'yicha siqilish harakatini kengaytirishingiz mumkin. Akkordeon uslubiga to'g'ri erishish uchun, o'rash .accordionsifatida foydalanishni unutmang.
Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Foydalanish imkoniyati
aria-expandedBoshqaruv elementiga qo'shishni unutmang . Bu atribut boshqaruvga bogʻlangan yigʻiladigan elementning joriy holatini ekranni oʻqish moslamalariga va shunga oʻxshash yordamchi texnologiyalarga aniq etkazadi. Agar yig'iladigan element sukut bo'yicha yopilgan bo'lsa, boshqaruv elementidagi atribut qiymati ga ega bo'lishi kerak aria-expanded="false". Agar siz yig'iladigan elementni showsinfdan foydalanib, sukut bo'yicha ochiq qilib qo'ygan bo'lsangiz, aria-expanded="true"uning o'rniga boshqaruvni o'rnating. Plagin yig'iladigan element ochilgan yoki yopilmaganligiga (JavaScript orqali yoki foydalanuvchi o'sha yig'iladigan elementga bog'langan boshqa boshqaruv elementini ishga tushirgani uchun) avtomatik ravishda boshqaruv elementida ushbu atributni almashtiradi. Agar boshqaruv elementining HTML elementi tugma bo'lmasa (masalan, <a>yoki <div>), atributrole="button"elementga qo'shilishi kerak.
Agar sizning boshqaruv elementingiz bitta yig'iladigan elementga mo'ljallangan bo'lsa, ya'ni atribut selektorga data-targetishora qilsa - siz yig'iladigan elementni o'z ichiga olgan boshqaruv elementiga atributni qo'shishingiz kerak . Zamonaviy ekran o'quvchilari va shunga o'xshash yordamchi texnologiyalar foydalanuvchilarga to'g'ridan-to'g'ri yig'iladigan elementga o'tish uchun qo'shimcha yorliqlar bilan ta'minlash uchun ushbu atributdan foydalanadi.idaria-controlsid
E'tibor bering, Bootstrap-ning joriy ilovasi WAI-ARIA Authoring Practices 1.1 akkordeon naqshida tasvirlangan turli xil klaviatura o'zaro ta'sirlarini qamrab olmaydi - ularni o'zingiz uchun maxsus JavaScript-ga qo'shishingiz kerak bo'ladi.
Foydalanish
Yiqilish plagini og'ir yuklarni ko'tarish uchun bir nechta sinflardan foydalanadi:
.collapsemazmunini yashiradi
.collapse.showmazmunini ko‘rsatadi
.collapsingo'tish boshlanganda qo'shiladi va tugashi bilan o'chiriladi
Ushbu sinflarni quyidagi manzilda topish mumkin _transitions.scss.
Ma'lumotlar atributlari orqali
Bir yoki bir nechta yig'iladigan elementlarning boshqaruvini avtomatik belgilash uchun elementga data-toggle="collapse"va a qo'shing . data-targetAtribut data-targetsiqishni qo'llash uchun CSS selektorini qabul qiladi. collapseSinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing show.
Akkordeonga o'xshash guruh boshqaruvini yig'iladigan maydonga qo'shish uchun ma'lumotlar atributini qo'shing data-parent="#selector". Buni amalda ko'rish uchun demoga qarang.
JavaScript orqali
Qo'lda yoqish:
Variantlar
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-parent="".
Ism
Turi
Standart
Tavsif
ota-ona
selektor | jQuery obyekti | DOM elementi
yolg'on
Agar ota-ona ko'rsatilgan bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon xatti-harakatiga o'xshash - bu cardsinfga bog'liq). Atribut maqsadli yig'iladigan maydonga o'rnatilishi kerak.
almashtirish
mantiqiy
rost
Chaqiruvda yig'iladigan elementni almashtiradi
Usullari
Asinxron usullar va o'tishlar
Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .
Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.
.collapse('toggle')
Yigʻiladigan elementni koʻrsatish yoki berkitishga almashtiradi. Yig'iladigan element haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapsehidden.bs.collapse
.collapse('show')
Yig'iladigan elementni ko'rsatadi. Yig'ib olinadigan element haqiqatda ko'rsatilishidan oldin (ya'ni, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapse
.collapse('hide')
Yig'iladigan elementni yashiradi. Yig'ib olinadigan element haqiqatda yashirilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .hidden.bs.collapse
.collapse('dispose')
Elementning qulashini yo'q qiladi.
Voqealar
Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
Tadbir turi
Tavsif
show.bs.collapse
Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.qulash
Ushbu hodisa yig'ish elementi foydalanuvchiga ko'rinadigan bo'lsa, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
yashirish.bs.qulash
Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi.
yashirin.bs.qulash
Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi).