JavaScript
O'ndan ortiq maxsus jQuery plaginlari bilan Bootstrap komponentlarini hayotga olib keling. Ularning barchasini yoki birma-bir kiriting.
O'ndan ortiq maxsus jQuery plaginlari bilan Bootstrap komponentlarini hayotga olib keling. Ularning barchasini yoki birma-bir kiriting.
Plaginlar alohida-alohida (Bootstrap-ning alohida *.js
fayllari yordamida) yoki barchasi bir vaqtning o'zida ( bootstrap.js
yoki kichiklashtirilgan bootstrap.min.js
) kiritilishi mumkin.
Ikkala bootstrap.js
va bootstrap.min.js
bitta faylda barcha plaginlarni o'z ichiga oladi. Faqat bittasini kiriting.
Ba'zi plaginlar va CSS komponentlari boshqa plaginlarga bog'liq. Agar siz plaginlarni alohida-alohida qo'shsangiz, hujjatlarda ushbu bog'liqliklarni tekshiring. Shuni ham yodda tutingki, barcha plaginlar jQuery-ga bog'liq (bu jQuery plagin fayllaridan oldin kiritilishi kerakligini anglatadi ). jQuery-ning qaysi versiyalari qo'llab-quvvatlanishini ko'rish uchun biz bilan maslahatlashing .bower.json
Siz barcha Bootstrap plaginlaridan JavaScript-ning bir qatorini yozmasdan faqat belgilash API orqali foydalanishingiz mumkin. Bu Bootstrap’ning birinchi darajali API’si bo‘lib, plagindan foydalanishda birinchi navbatda e’tiborga olish kerak.
Aytgancha, ba'zi hollarda ushbu funksiyani o'chirib qo'yish maqsadga muvofiq bo'lishi mumkin. Shu sababli, biz hujjat nomlari oraligʻidagi barcha hodisalarni bekor qilish orqali API maʼlumotlar atributini oʻchirish imkoniyatini ham taqdim etamiz data-api
. Bu shunday ko'rinadi:
Shu bilan bir qatorda, ma'lum bir plaginni maqsad qilish uchun plagin nomini quyidagi kabi data-api nom maydoni bilan birga nom maydoni sifatida kiriting:
Bitta elementda bir nechta plaginlarning ma'lumotlar atributlaridan foydalanmang. Misol uchun, tugma ham asboblar maslahatiga ega, ham modalni almashtira olmaydi. Buni amalga oshirish uchun o'rash elementidan foydalaning.
Shuningdek, biz barcha Bootstrap plaginlarini faqat JavaScript API orqali ishlatishingiz kerakligiga ishonamiz. Barcha ommaviy API’lar yagona, zanjirband bo‘ladigan usullar bo‘lib, ular bajarilgan to‘plamni qaytaradi.
Barcha usullar ixtiyoriy variantlar ob'ektini, ma'lum bir usulga mo'ljallangan qatorni yoki hech narsani (standart xatti-harakat bilan plaginni ishga tushiradigan) qabul qilishi kerak:
Har bir plagin shuningdek, o'zining xom konstruktorini Constructor
xususiyatga ko'rsatadi: $.fn.popover.Constructor
. Agar siz ma'lum bir plagin namunasini olishni istasangiz, uni to'g'ridan-to'g'ri elementdan oling: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
Plagin ob'ektini o'zgartirish orqali plagin uchun standart sozlamalarni o'zgartirishingiz mumkin :
Ba'zan boshqa UI ramkalari bilan Bootstrap plaginlaridan foydalanish kerak bo'ladi. Bunday sharoitda, vaqti-vaqti bilan nomlar maydoni to'qnashuvi sodir bo'lishi mumkin. Agar bu ro'y bersa, siz .noConflict
qiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.
Bootstrap ko'pchilik plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shakllarida keladi - bunda infinitiv (masalan show
, ) hodisa boshida, uning o‘tgan zamon shakli (masalan shown
, ) esa ish-harakat tugagandan so‘ng ishga tushadi.
3.0.0 dan boshlab barcha Bootstrap hodisalari nomlar maydoniga ega.
Barcha infinitiv hodisalar preventDefault
funksionallikni ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi.
VERSION
Bootstrap jQuery plaginlarining har bir versiyasiga plagin konstruktorining xususiyati orqali kirish mumkin . Masalan, maslahat plagini uchun:
Bootstrap plaginlari, ayniqsa JavaScript o'chirilgan bo'lsa, unchalik yaxshi ishlamaydi. Agar siz bu holatda foydalanuvchi tajribasi haqida qayg'ursangiz, foydalanuvchilarga <noscript>
vaziyatni tushuntirish uchun foydalaning (va JavaScript-ni qayta yoqish) va/yoki o'zingizning shaxsiy zaxiralaringizni qo'shing.
Bootstrap rasmiy ravishda Prototype yoki jQuery UI kabi uchinchi tomon JavaScript kutubxonalarini qo'llab-quvvatlamaydi . Voqealarga va nomlar oralig'iga qaramay .noConflict
, siz o'zingiz hal qilishingiz kerak bo'lgan muvofiqlik muammolari bo'lishi mumkin.
Oddiy o'tish effektlari transition.js
uchun boshqa JS fayllari qatoriga bir marta qo'shing. Agar siz kompilyatsiya qilingan (yoki kichiklashtirilgan) dan foydalanayotgan bo'lsangiz, buni bootstrap.js
qo'shishning hojati yo'q - u allaqachon mavjud.
Transition.js - voqealar uchun asosiy yordamchi transitionEnd
, shuningdek, CSS o'tish emulyatori. U boshqa plaginlar tomonidan CSS o'tish qo'llab-quvvatlashini tekshirish va osilgan o'tishlarni qo'lga olish uchun ishlatiladi.
Oʻtishlarni global miqyosda quyidagi JavaScript snippeti yordamida oʻchirib qoʻyish mumkin, u yuklangandan keyin transition.js
(yoki bootstrap.js
vaziyatga bootstrap.min.js
qarab yoki ) kelishi kerak:
Modallar soddalashtirilgan, ammo moslashuvchan, minimal talab qilinadigan funksionallik va aqlli standart sozlamalarga ega dialog oynasi takliflari.
Boshqasi ko'rinib turganda modalni ochmaslikka ishonch hosil qiling. Bir vaqtning o'zida bir nechta modalni ko'rsatish uchun maxsus kod kerak.
Modalning tashqi koʻrinishi va/yoki funksionalligiga taʼsir etuvchi boshqa komponentlarning oldini olish uchun har doim modalning HTML kodini hujjatingizda yuqori darajali joyga joylashtirishga harakat qiling.
Mobil qurilmalarda modallardan foydalanish bo'yicha ba'zi ogohlantirishlar mavjud. Tafsilotlar uchun brauzerimizni qoʻllab-quvvatlash boʻlimiga qarang .
HTML5 o'z semantikasini qanday aniqlaganligi sababli, autofocus
HTML atributi Bootstrap modallarida hech qanday ta'sir ko'rsatmaydi. Xuddi shu effektga erishish uchun ba'zi maxsus JavaScript-dan foydalaning:
Sarlavha, asosiy va pastki kolontiterdagi harakatlar to'plamiga ega ko'rsatilgan modal.
Quyidagi tugmani bosish orqali modalni JavaScript orqali almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.
Modal sarlavhaga havola qilib, va ni qo'shishni unutmang, to role="dialog"
ga va o'ziga .aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
Bundan tashqari, siz on bilan modal dialogingizning tavsifini berishingiz mumkin .modal
.
YouTube videolarini modallarga joylashtirish, ijroni avtomatik ravishda to‘xtatish va boshqalar uchun Bootstrap-da bo‘lmagan qo‘shimcha JavaScript-ni talab qiladi. Qo'shimcha ma'lumot olish uchun ushbu foydali Stack Overflow postiga qarang.
Modallar ikkita ixtiyoriy o'lchamga ega bo'lib, ularni o'zgartirish sinflari orqali joylashtirish mumkin .modal-dialog
.
Ko'rish uchun so'nish o'rniga oddiygina paydo bo'ladigan modallar uchun .fade
sinfni modal belgilashingizdan olib tashlang.
Modal ichida Bootstrap grid tizimidan .row
foydalanish .modal-body
uchun oddiy grid tizimi sinflaridan foydalaning.
Hammasi bir xil modalni ishga tushiradigan, mazmuni biroz boshqacha bo'lgan bir nechta tugmalar bormi? Qaysi tugma bosilganiga qarab modal tarkibini o'zgartirish uchun event.relatedTarget
HTML atributlaridan data-*
foydalaning ( ehtimol jQuery orqali ). Tafsilotlar uchun Modal hodisalar hujjatlariga qarang relatedTarget
,
Modal plagin ma'lumotlar atributlari yoki JavaScript orqali so'ralganda yashirin tarkibingizni almashtiradi. Shuningdek , u standart aylantirish harakatini bekor qilish uchun qo'shadi va modaldan tashqarida bosilganda ko'rsatilgan modallarni o'chirish uchun bosish maydonini ta'minlash uchun a hosil .modal-open
qiladi .<body>
.modal-backdrop
JavaScript yozmasdan modalni faollashtiring. Oʻzgartirish uchun muayyan modalni nishonga olish uchun yoki data-toggle="modal"
tugmasi kabi boshqaruvchi elementga oʻrnating .data-target="#foo"
href="#foo"
myModal
Bir qator JavaScript bilan identifikatorli modalni chaqiring :
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-backdrop=""
.
Ism | turi | standart | tavsifi |
---|---|---|---|
fon | mantiqiy yoki satr'static' |
rost | Modal fon elementini o'z ichiga oladi. Shu bilan bir qatorda, static bosilganda modalni yopmaydigan fon uchun belgilang. |
klaviatura | mantiqiy | rost | Escape tugmasi bosilganda modalni yopadi |
ko'rsatish | mantiqiy | rost | Initsializatsiya qilinganda modalni ko'rsatadi. |
masofaviy | yo'l | yolg'on | Bu parametr v3.3.0 dan beri eskirgan va v4 da olib tashlangan. Buning o'rniga mijoz tomoni shablonini yoki ma'lumotlarni bog'lash tizimidan foydalanishni yoki jQuery.load ga o'zingiz qo'ng'iroq qilishni tavsiya etamiz. Agar masofaviy URL taqdim etilsa, kontent jQuery usuli orqali bir marta yuklanadi |
.modal(options)
Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object
.
.modal('toggle')
Modalni qo'lda almashtiradi. Modal haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal
hidden.bs.modal
.modal('show')
Modalni qo'lda ochadi. Modal ko'rsatilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.modal
.modal('hide')
Modalni qo'lda yashiradi. Modal yashirin bo'lishidan oldin (ya'ni hidden.bs.modal
voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi.
.modal('handleUpdate')
Modalning joylashuvini aylantirish paneli paydo bo'lishi kerak bo'lsa, unga qarshi turish uchun qayta sozlaydi, bu modalni chapga sakrashga olib keladi.
Faqat modal balandligi ochiq bo'lganda o'zgarganda kerak bo'ladi.
Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi.
Barcha modal hodisalar modalning o'ziga qaratiladi (ya'ni <div class="modal">
).
Tadbir turi | Tavsif |
---|---|
show.bs.modal | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. Agar bosish sabab bo'lsa, bosilgan element relatedTarget hodisaning xususiyati sifatida mavjud. |
ko'rsatilgan.bs.modal | Ushbu hodisa modal foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). Agar bosish sabab bo'lsa, bosilgan element relatedTarget hodisaning xususiyati sifatida mavjud. |
hide.bs.modal | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
yashirin.bs.modal | Ushbu hodisa modal foydalanuvchidan yashirishni tugatgandan so'ng o'chiriladi (CSS o'tishlari tugashini kutadi). |
yuklangan.bs.modal | remote Modal opsiyadan foydalangan holda kontentni yuklagan bo'lsa, bu hodisa o'chiriladi . |
Ushbu oddiy plagin yordamida deyarli hamma narsaga ochiladigan menyularni qo'shing, jumladan, navigatsiya paneli, yorliqlar va tabletkalar.
.open
Ma'lumotlar atributlari yoki JavaScript orqali ochiladigan plagin asosiy ro'yxat elementidagi sinfni almashtirish orqali yashirin tarkibni (ochiladigan menyular) almashtiradi .
Mobil qurilmalarda ochiladigan menyuni ochish .dropdown-backdrop
menyudan tashqarida bosilganda ochiladigan menyularni yopish uchun teginish maydoni sifatida qo'shiladi, bu iOS-ni to'g'ri qo'llab-quvvatlash talabidir. Bu shuni anglatadiki, ochiladigan menyudan boshqa ochiladigan menyuga o'tish uchun mobil telefonga qo'shimcha tegish kerak bo'ladi.
Eslatma: data-toggle="dropdown"
Atribut ilova darajasida ochiladigan menyularni yopish uchun ishlatiladi, shuning uchun uni har doim ishlatish yaxshi fikr.
data-toggle="dropdown"
Ochiladigan menyuni almashtirish uchun havola yoki tugmaga qo'shing .
Havola tugmalari yordamida URL manzillarini saqlab qolish uchun data-target
o‘rniga atributdan foydalaning href="#"
.
JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:
data-toggle="dropdown"
hali ham talab qilinadiOchiladigan ro'yxatni JavaScript orqali chaqirasizmi yoki o'rniga data-api dan foydalanasizmi, data-toggle="dropdown"
har doim ochiladigan menyuning tetik elementida bo'lishi talab qilinadi.
Yo'q
$().dropdown('toggle')
Berilgan navigatsiya paneli yoki yorliqli navigatsiyaning ochiladigan menyusini almashtiradi.
Barcha ochiladigan hodisalar .dropdown-menu
'ning asosiy elementida ishga tushiriladi.
Barcha ochiladigan hodisalar relatedTarget
qiymati o'zgaruvchan langar elementi bo'lgan xususiyatga ega.
Tadbir turi | Tavsif |
---|---|
show.bs.ochiluvchi | Bu hodisa shou namunasi usuli chaqirilganda darhol ishga tushadi. |
ko'rsatilgan.bs.ochiladi | Ushbu hodisa ochiladigan ro'yxat foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.ochiluvchi | Hide misol usuli chaqirilganda, bu hodisa darhol ishga tushiriladi. |
yashirin.bs.ochiladigan | Ushbu hodisa ochiladigan ro'yxatni foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi (CSS o'tishlari tugashini kutadi). |
ScrollSpy plagini o'tish joyiga qarab navbat maqsadlarini avtomatik ravishda yangilash uchun mo'ljallangan. Navbar ostidagi maydonni aylantiring va faol sinf o'zgarishini kuzating. Ochiladigan pastki elementlar ham ta'kidlanadi.
Reklama leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ular qui sotilgan oldin. Tumblr fermadan stolga velosiped huquqlari. Anim keffiyeh carles kardigan. Velit seitan mcsweeney ning fotostendi 3 bo'ri oy irure. Cosby sviter lomo jinsi shortilar, Uilyamsburg hoodie minim qui siz ular haqida eshitmagan bo'lsangiz kerak va kardigan ishonch fondi culpa biodiesel Wes Anderson estetik. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mo'ylovli skeytbord, adipisicing fugiat velit pitchfork soqol. Freegan soqollari mcsweeney's ko'rinishida. Cupidatat to'rt loko nisi, ea helvetica nulla carles. Tatuirovka qilingan kosbi kozok oziq-ovqat yuk mashinasi, Mcsweeney's quis non freegan vinyl. Lo-fi Wes Anderson +1 sartorial. Karlesning estetik bo'lmagan mashqlari g'ayrioddiy. Bruklin adipisicing hunarmand pivo vitse keytar deserunt.
Occaecat commodo aliqua delectus. Fap craft pivo deserunt skeytbord ea. Lomo velosiped huquqlarini adipisicing banh mi, velit ea sunt the next level locavore in a magna Veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisizing. DIY minimal messenjer sumkasidan foydalanish. Cred ex in, iphone uchun barqaror delectus consectetur fanny pack.
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sintetik identifikatorni aniqlang. Locavore sed helvetica cliche irony, momaqaldiroqlar, ehtimol siz ular haqida eshitmagan bo'lsangiz ham, hoodie glyutensiz lo-fi fap aliquip. Ular sotilishidan oldin mehnatkashlar, Terri Richardson, hunarmandning kosbi kozoklarini yaxshi ko'rardi. Cardigan craft pivo seitan tayyor velit. VHS chambray laboris tempor veniam. Anim mollit minimal commodo ullamco thundercats.
Navbar havolalarida hal qilinadigan id maqsadlari boʻlishi kerak. Masalan, <a href="#home">home</a>
DOMdagi biror narsaga mos kelishi kerak <div id="home"></div>
.
:visible
elementlar e'tiborga olinmadi:visible
JQuery'ga mos kelmaydigan maqsadli elementlar e'tiborga olinmaydi va ularning mos navbatlari hech qachon ta'kidlanmaydi.
Amalga oshirish usulidan qat'i nazar, scrollspy position: relative;
siz josuslik qilayotgan elementda foydalanishni talab qiladi. Aksariyat hollarda bu <body>
. dan boshqa elementlarda aylanayotganda , to'plam va qo'llanilishiga <body>
ishonch hosil qiling.height
overflow-y: scroll;
Yuqori paneldagi navigatsiyaga osongina scrollspy harakatini qo'shish data-spy="scroll"
uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu <body>
). Keyin har qanday Bootstrap komponentining data-target
asosiy elementining identifikatori yoki sinfi bilan atributni qo'shing..nav
CSS-ni qo'shgandan so'ng position: relative;
, JavaScript orqali scrollspy-ga qo'ng'iroq qiling:
.scrollspy('refresh')
Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:
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 | tavsifi |
---|---|---|---|
ofset | raqam | 10 | O'tkazish joyini hisoblashda yuqoridan siljish uchun piksellar. |
Tadbir turi | Tavsif |
---|---|
activate.bs.scrollspy | Bu voqea har safar yangi element scrollspy tomonidan faollashtirilganda boshlanadi. |
Mahalliy kontent panellari orqali, hatto ochiladigan menyular orqali ham o‘tish uchun tezkor, dinamik yorliq funksiyasini qo‘shing. Ichki varaqlar qoʻllab-quvvatlanmaydi.
Raw denim, ehtimol siz ular haqida eshitmagansiz jinsi shortilar Ostin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mo'ylovli klişe tempor, Williamsburg Carles vegan helvetica. Reprehenderit qassob retro keffiyeh dreamcatcher synth. Cosby sviter eu banh mi, qui irure Terri Richardson sobiq kalamar. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, qassob voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Ushbu plagin yorliqli navigatsiya komponentini yorliqli maydonlarni qo'shish uchun kengaytiradi.
JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):
Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:
Siz biron bir JavaScript yozmasdan yorliq yoki tabletka navigatsiyasini oddiygina belgilab data-toggle="tab"
yoki data-toggle="pill"
elementda faollashtirishingiz mumkin. nav
Yorliqlarga va nav-tabs
sinflarini qo'shish ul
Bootstrap yorlig'i uslubininav
qo'llaydi, va sinflarini qo'shish esa hap uslubininav-pills
qo'llaydi .
Yorliqlarni .fade
oʻchirish uchun har biriga qoʻshing .tab-pane
. Birinchi yorliq paneli ham .in
boshlang'ich tarkibni ko'rinadigan qilish kerak.
$().tab
Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-target
yoki a bo'lishi kerak . href
Yuqoridagi misollarda yorliqlar atributlarga <a>
ega s .data-toggle="tab"
.tab('show')
Berilgan yorliqni tanlaydi va unga aloqador tarkibni ko'rsatadi. Oldindan tanlangan boshqa yorliqlar bekor qilinadi va unga bog'liq kontent berkitiladi. Qo'ng'iroq qiluvchiga yorliqlar paneli ko'rsatilishidan oldin (ya'ni shown.bs.tab
voqea sodir bo'lishidan oldin) qaytadi.
Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:
hide.bs.tab
(joriy faol yorliqda)show.bs.tab
(ko'rsatiladigan yorliqda)hidden.bs.tab
(oldingi faol yorliqda, voqea uchun bir xil hide.bs.tab
)shown.bs.tab
(yangi faol ko'rsatilgan yorliqda, xuddi show.bs.tab
voqea uchun)Hech qanday yorliq allaqachon faol bo'lmagan bo'lsa, hide.bs.tab
va hidden.bs.tab
voqealari o'chirilmaydi.
Tadbir turi | Tavsif |
---|---|
show.bs.tab | Bu voqea tab ko'rsatishda ishga tushadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.target foydalaning .event.relatedTarget |
ko'rsatilgan.bs.tab | Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.target foydalaning .event.relatedTarget |
hide.bs.tab | Ushbu hodisa yangi yorliq ko'rsatilishi kerak bo'lganda boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Joriy faol yorliq va yaqinda faol boʻladigan yangi yorliq uchun mos ravishda va event.target foydalaning .event.relatedTarget |
yashirin.bs.tab | Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Oldingi faol yorliq va yangi faol yorliq uchun mos ravishda event.target va dan foydalaning .event.relatedTarget |
Jeyson Frame tomonidan yozilgan mukammal jQuery.tipsy plaginidan ilhomlangan; Maslahatlar yangilangan versiya boʻlib, u tasvirlarga tayanmaydi, animatsiyalar uchun CSS3 va mahalliy sarlavhalarni saqlash uchun maʼlumotlar atributlaridan foydalanadi.
Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.
Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:
Qattiq shimlar keyingi darajadagi keffiyeh , ehtimol siz ular haqida eshitmagansiz. Foto stend soqol xom denim letterpress vegan messenger sumkasi Stumptown. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-bit amerikan kiyimida terri Richardson vinil chambray bor . Beard stumptown, kardiganlar banh mi lomo thundercats. Tofu biodizel Uilyamsburg marfa, to'rt loko mcsweeney ning tozalovchi vegan chambray. A, albatta, istehzoli hunarmand nima bo'lishidan qat'iy nazar, keytar , scenester farm-to-stol banksy Austin twitter handle freegan cred raw denim single-origin coffee virus.
To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.
Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi, ya'ni ularni o'zingiz ishga tushirishingiz kerak .
Sahifadagi barcha maslahatlarni ishga tushirishning bir usuli ularni data-toggle
atributiga ko'ra tanlashdir:
Ko'rsatma plagini so'rov bo'yicha tarkib va belgilarni yaratadi va sukut bo'yicha maslahatlarni ishga tushirish elementidan keyin joylashtiradi.
JavaScript orqali asboblar maslahatini ishga tushiring:
Maslahat uchun kerakli belgi faqat data
atribut title
bo'lib, HTML elementida siz maslahatchi bo'lishni xohlaysiz. Ko'rsatmaning yaratilgan belgilari juda oddiy, lekin u joyni talab qilsa (odatda, top
plagin tomonidan o'rnatiladi).
Ba'zan bir nechta satrlarni o'rab turgan giperhavolaga maslahat qo'shishni xohlaysiz. Ko'rsatma plaginining standart xatti-harakati uni gorizontal va vertikal ravishda markazlashtirishdir. white-space: nowrap;
Bunga yo'l qo'ymaslik uchun langarlaringizga qo'shing .
.btn-group
Maslahatlardan a yoki a ichidagi elementlarda .input-group
yoki jadvalga oid elementlarda ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) foydalanilganda, kiruvchi yon taʼsirlardan (masalan, element kengayishi va/) oldini olish uchun (quyida hujjatlashtirilgan) <tfoot>
variantni belgilashingiz kerak boʻladi. container: 'body'
yoki asboblar maslahati ishga tushirilganda uning yumaloq burchaklarini yo'qotish).
Klaviatura bilan navigatsiya qiluvchi foydalanuvchilar, xususan, yordamchi texnologiyalar foydalanuvchilari uchun havolalar, shakl boshqaruvlari yoki atributga ega har qanday ixtiyoriy element kabi klaviaturaga qaratilgan elementlarga faqat maslahatlar qo'shishingiz kerak tabindex="0"
.
Bir disabled
yoki .disabled
elementga maslahat qo'shish uchun elementni a ichiga qo'ying va uning o'rniga <div>
maslahatchini qo'llang .<div>
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-animation=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
animatsiya | mantiqiy | rost | Asboblar maslahatiga CSS o'tishini qo'llang |
idish | string | yolg'on | yolg'on | Maslahatni ma'lum bir elementga qo'shadi. Misol: |
kechikish | raqam | ob'ekt | 0 | Maslahatni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda ishga tushirish turiga taalluqli emas Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi Ob'ekt tuzilishi: |
html | mantiqiy | yolg'on | Asboblar paneliga HTMLni kiriting. Agar noto'g'ri bo'lsa, jQuery text usuli DOMga tarkibni kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning. |
joylashtirish | string | funktsiyasi | "yuqori" | Maslahatni qanday joylashtirish mumkin - tepa | pastki | chap | to'g'ri | avto. Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida asboblar maslahati DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish elementi bilan chaqiriladi. |
selektor | ip | yolg'on | Agar selektor taqdim etilsa, asboblar paneli ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik HTML tarkibiga maslahatlar qo'shilishi uchun ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring . |
shablon | ip | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Maslahat yaratishda foydalanish uchun asosiy HTML. Maslahatlar ga
Eng tashqi o'rash elementi |
sarlavha | string | funktsiyasi | '' | Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati Agar funktsiya berilgan bo'lsa, u |
tetik | ip | 'fokusni ko'tarish' | Maslahatchi qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manual boshqa trigger bilan birlashtirib bo'lmaydi. |
ko'rish oynasi | string | ob'ekt | funktsiyasi | { selektor: 'tana', to'ldirish: 0 } | Maslahatni ushbu element chegarasida saqlaydi. Misol: Agar funktsiya berilgan bo'lsa, u yagona argument sifatida DOM tugunining tetiklash elementi bilan chaqiriladi. |
Yuqorida aytib o'tilganidek, individual maslahatlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.
$().tooltip(options)
Elementlar to'plamiga asboblar paneli ishlov beruvchisini biriktiradi.
.tooltip('show')
Elementning asboblar maslahatini ko'rsatadi. Maslahat ko'rsatilishidan oldin (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . shown.bs.tooltip
Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi. Nol uzunlikdagi sarlavhali maslahatlar hech qachon ko'rsatilmaydi.
.tooltip('hide')
Elementning asboblar maslahatini yashiradi. Maslahat haqiqatda yashirilgunga qadar (ya'ni hidden.bs.tooltip
voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi. Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.
.tooltip('toggle')
Elementning asboblar maslahatini almashtiradi. Maslahat ko'rsatilishidan yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi . Bu asboblar maslahatining "qo'lda" ishga tushirilishi hisoblanadi.shown.bs.tooltip
hidden.bs.tooltip
.tooltip('destroy')
Elementning asboblar maslahatini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan maslahatlarni ( opsiya yordamida yaratilgan )selector
nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.
Tadbir turi | Tavsif |
---|---|
show.bs.maslahat | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. |
ko'rsatilgan.bs.maslahat | Ushbu hodisa asboblar maslahati foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.tooltip | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
yashirin.bs.yozuv maslahati | Ushbu voqea asboblar maslahati foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
kiritilgan.bs.maslahat | Ushbu hodisa voqeadan so'ng show.bs.tooltip DOMga asboblar maslahati shablonini qo'shgandan so'ng o'chiriladi. |
Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing.
Sarlavhasi va mazmuni nolga teng bo'lgan popoverlar hech qachon ko'rsatilmaydi.
Popoverlar Bootstrap versiyangizga qo'shilishi uchun maslahat plaginini talab qiladi .
Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi, ya'ni ularni o'zingiz ishga tushirishingiz kerak .
Sahifadagi barcha popoverlarni ishga tushirishning bir usuli ularni data-toggle
atributiga ko'ra tanlashdir:
.btn-group
a yoki a ichidagi elementlarda .input-group
yoki jadval bilan bog'liq elementlarda ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) popoverlardan foydalanilganda, kiruvchi yon ta'sirlardan (masalan, element kengayishi va/) oldini olish uchun (quyida hujjatlashtirilgan) <tfoot>
variantni belgilashingiz kerak bo'ladi. container: 'body'
yoki popover ishga tushirilganda uning yumaloq burchaklarini yo'qotish).
disabled
A yoki .disabled
elementga popover qo'shish uchun elementni a ichiga qo'ying va uning o'rniga <div>
popoverni qo'llang .<div>
Ba'zan siz bir nechta satrlarni o'rab turgan giperhavolaga popover qo'shmoqchisiz. Popover plaginining standart xatti-harakati uni gorizontal va vertikal ravishda markazlashtirishdir. white-space: nowrap;
Bunga yo'l qo'ymaslik uchun langarlaringizga qo'shing .
To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pelentesque ornare sem lacinia quam venenatis vestibulum.
Foydalanuvchi qilgan focus
keyingi bosishda popoverlarni o'chirish uchun triggerdan foydalaning.
Brauzer va platformalararo to'g'ri harakat qilish uchun siz tegdan emas, tegdan foydalanishingiz kerak <a>
, shuningdek , va atributlarini <button>
ham o'z ichiga olishingiz kerak .role="button"
tabindex
JavaScript orqali popoverlarni yoqish:
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-animation=""
.
Ism | Turi | Standart | Tavsif |
---|---|---|---|
animatsiya | mantiqiy | rost | Popoverga CSS o'tishini qo'llang |
idish | string | yolg'on | yolg'on | Popoverni ma'lum bir elementga qo'shadi. Misol: |
mazmuni | string | funktsiyasi | '' |
Agar funktsiya berilsa, u |
kechikish | raqam | ob'ekt | 0 | Popoverni ko'rsatish va yashirishni kechiktirish (ms) - qo'lda tetiklash turiga taalluqli emas Agar raqam berilgan bo'lsa, kechikish ikkala yashirish/ko'rsatish uchun ham qo'llaniladi Ob'ekt tuzilishi: |
html | mantiqiy | yolg'on | Popover-ga HTML-ni joylashtiring. Agar noto'g'ri bo'lsa, jQuery text usuli DOMga tarkibni kiritish uchun ishlatiladi. XSS hujumlaridan xavotirda bo'lsangiz, matndan foydalaning. |
joylashtirish | string | funktsiyasi | "to'g'ri" | Popoverni qanday joylashtirish mumkin - tepa | pastki | chap | to'g'ri | avto. Joylashuvni aniqlash uchun funktsiyadan foydalanilganda, u birinchi argument sifatida popover DOM tuguni va ikkinchi argument sifatida DOM tugunini ishga tushirish bilan chaqiriladi. |
selektor | ip | yolg'on | Agar selektor taqdim etilsa, popover ob'ektlari belgilangan maqsadlarga topshiriladi. Amalda, bu dinamik HTML tarkibiga popoverlar qo'shilishi uchun ishlatiladi. Buni va ma'lumot beruvchi misolni ko'ring . |
shablon | ip | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Popover yaratishda foydalanish uchun asosiy HTML. Popover ning Popover ning
Eng tashqi o'rash elementi |
sarlavha | string | funktsiyasi | '' | Atribut mavjud bo'lmasa, birlamchi sarlavha qiymati Agar funktsiya berilsa, u |
tetik | ip | "bosish" | Popover qanday ishga tushiriladi - | tugmasini bosing hover | diqqat | qo'llanma. Siz bir nechta triggerlardan o'tishingiz mumkin; ularni bo'sh joy bilan ajrating. manual boshqa trigger bilan birlashtirib bo'lmaydi. |
ko'rish oynasi | string | ob'ekt | funktsiyasi | { selektor: 'tana', to'ldirish: 0 } | Popoverni ushbu element chegaralarida saqlaydi. Misol: Agar funktsiya berilgan bo'lsa, u yagona argument sifatida DOM tugunining tetiklash elementi bilan chaqiriladi. |
Yuqorida aytib o'tilganidek, individual popoverlar uchun variantlar ma'lumotlar atributlaridan foydalanish orqali belgilanishi mumkin.
$().popover(options)
Elementlar to'plami uchun popoverlarni ishga tushiradi.
.popover('show')
Elementning popoverini ko'rsatadi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishidan oldin (ya'ni shown.bs.popover
voqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi. Sarlavhasi va mazmuni nolga teng bo'lgan popoverlar hech qachon ko'rsatilmaydi.
.popover('hide')
Elementning qalqib chiquvchi oynasini yashiradi. Qo'ng'iroq qiluvchiga popover yashirin bo'lishidan oldin (ya'ni hidden.bs.popover
voqea sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.
.popover('toggle')
Elementning qalqib chiquvchi oynasini almashtiradi. Qo'ng'iroq qiluvchiga popover haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni shown.bs.popover
yoki hidden.bs.popover
hodisa sodir bo'lishidan oldin) qaytadi. Bu popoverning "qo'lda" ishga tushirilishi hisoblanadi.
.popover('destroy')
Elementning popoverini yashiradi va yo'q qiladi. Delegatsiyadan foydalanadigan popoverlarni ( opsiya yordamida yaratilgan )selector
nasl trigger elementlarida alohida yo‘q qilib bo‘lmaydi.
Tadbir turi | Tavsif |
---|---|
show.bs.popover | Ushbu hodisa show misol usuli chaqirilganda darhol ishga tushadi. |
ko'rsatilgan.bs.popover | Ushbu hodisa popover foydalanuvchiga ko'rinadigan qilib qo'yilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
hide.bs.popover | Ushbu hodisa hide misol usuli chaqirilganda darhol o'chiriladi. |
hidden.bs.popover | Ushbu hodisa popover foydalanuvchidan yashirishni tugatgandan so'ng ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
kiritilgan.bs.popover | Ushbu hodisa show.bs.popover DOMga popover shablonini qo'shgandan so'ng o'chiriladi. |
Ushbu plagin yordamida barcha ogohlantirish xabarlariga oʻchirish funksiyasini qoʻshing.
Tugmani ishlatganda .close
, u birinchi bola bo'lishi kerak .alert-dismissible
va belgilashda undan oldin matn tarkibi kelmasligi kerak.
Buni va buni o'zgartiring va qayta urinib ko'ring. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
Avtomatik ravishda ogohlantirish funksiyasini berish uchun yopish tugmachangizga qo'shing . Ogohlantirishni yopish uni DOMdan olib tashlaydi.
Ogohlantirishlaringiz yopilganda animatsiyadan foydalanishi uchun ularda .fade
va .in
sinflar allaqachon qo'llanilganligiga ishonch hosil qiling.
$().alert()
Atributga ega boʻlgan avlod elementlaridagi bosish hodisalari haqida ogohlantirishni tinglaydi data-dismiss="alert"
. (Data-api-ning avtomatik ishga tushirilishidan foydalanilganda kerak emas.)
$().alert('close')
Ogohlantirishni DOMdan olib tashlash orqali yopadi. Agar elementda .fade
va .in
sinflari mavjud bo'lsa, ogohlantirish o'chirilishidan oldin o'chadi.
Bootstrap-ning ogohlantirish plagini ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
Tadbir turi | Tavsif |
---|---|
yaqin.bs.alert | Ushbu hodisa close misol usuli chaqirilganda darhol ishga tushadi. |
yopiq.bs.alert | Ogohlantirish yopilgandan so'ng, bu hodisa ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
Tugmalar yordamida ko'proq harakat qiling. Boshqaruv tugmasi asboblar paneli kabi ko'proq komponentlar uchun tugmalar guruhlarini belgilaydi yoki yaratadi.
Firefox sahifa yuklanishida shakl nazorati holatini (nogironlik va tekshirilganlik) davom ettiradi . Buning uchun vaqtinchalik yechim foydalanish hisoblanadi autocomplete="off"
. Mozilla xatosi #654072 ga qarang .
data-loading-text="Loading..."
Tugmadagi yuklanish holatidan foydalanish uchun qo'shing .
Bu xususiyat 3.3.5 versiyasidan boshlab eskirgan va v4 da olib tashlangan.
Ushbu namoyish uchun biz data-loading-text
va dan foydalanmoqdamiz $().button('loading')
, ammo bu siz foydalanishingiz mumkin bo'lgan yagona holat emas. Bu haqda quyida $().button(string)
hujjatlarda ko'proq bilib oling .
data-toggle="button"
Bitta tugma orqali almashtirishni faollashtirish uchun qo'shing .
.active
vaaria-pressed="true"
Oldindan almashtirilgan tugmalar uchun .active
sinf va aria-pressed="true"
atributni o'zingizga qo'shishingiz kerak button
.
Tegishli uslublarda almashtirishni yoqish uchun o'z ichiga olgan belgilash katakchasiga yoki radio yozuvlarini data-toggle="buttons"
qo'shing ..btn-group
.active
Oldindan tanlangan variantlar uchun .active
sinfni kirishga label
o'zingiz qo'shishingiz kerak.
Agar belgilash katakchasi tugmachasining belgilangan holati tugmadagi click
hodisani ishga tushirmasdan yangilansa (masalan , kirish xususiyatini <input type="reset">
o'rnatish orqali yoki checked
), siz .active
kirishdagi sinfni label
o'zingiz almashtirishingiz kerak bo'ladi.
$().button('toggle')
Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.
$().button('reset')
Tugma holatini tiklaydi - matnni asl matnga almashtiradi. Bu usul asinxrondir va asl holatini tiklash tugaguniga qadar qaytadi.
$().button(string)
Matnni har qanday ma'lumot bilan belgilangan matn holatiga almashtiradi.
Oson almashtirish harakati uchun bir nechta sinflardan foydalanadigan moslashuvchan plagin.
Yigʻish uchun oʻtish plagini Bootstrap versiyangizga kiritilishi kerak.
Sinf o'zgarishlari orqali boshqa elementni ko'rsatish va yashirish uchun quyidagi tugmalarni bosing:
.collapse
mazmunini yashiradi.collapsing
o'tish paytida qo'llaniladi.collapse.in
mazmunini ko‘rsatadiSiz atributli havoladan href
yoki atributli tugmachadan foydalanishingiz mumkin data-target
. Ikkala holatda data-toggle="collapse"
ham talab qilinadi.
Panel komponenti bilan akkordeon yaratish uchun birlamchi siqilish harakatini kengaytiring.
.panel-body
s ni s bilan almashtirish ham mumkin .list-group
.
aria-expanded
Boshqaruv elementiga qo'shishni unutmang . Ushbu atribut ekranni o'qish moslamalari va shunga o'xshash yordamchi texnologiyalarga yig'iladigan elementning joriy holatini aniq belgilaydi. Agar yig'iladigan element sukut bo'yicha yopilgan bo'lsa, u qiymatga ega bo'lishi kerak aria-expanded="false"
. Agar siz yig'iladigan elementni in
sinfdan 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 qarab avtomatik ravishda ushbu atributni almashtiradi.
Bundan tashqari, agar sizning boshqaruv elementingiz bitta yig'iladigan elementga mo'ljallangan bo'lsa, ya'ni data-target
atribut selektorga ishora qilsa, siz boshqaruv elementiga yig'iladigan elementni o'z ichiga olgan id
qo'shimcha atributni qo'shishingiz mumkin . 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.aria-controls
id
Yiqilish plagini og'ir yuklarni ko'tarish uchun bir nechta sinflardan foydalanadi:
.collapse
mazmunini yashiradi.collapse.in
mazmunini ko‘rsatadi.collapsing
o'tish boshlanganda qo'shiladi va tugashi bilan o'chiriladiUshbu sinflarni quyidagi manzilda topish mumkin component-animations.less
.
Yigʻiladigan element boshqaruvini avtomatik belgilash uchun elementga data-toggle="collapse"
va a qoʻshing . data-target
Atribut data-target
siqishni qo'llash uchun CSS selektorini qabul qiladi. collapse
Sinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing in
.
Akkordeonga o'xshash guruh boshqaruvini yig'iladigan boshqaruvga qo'shish uchun ma'lumotlar atributini qo'shing data-parent="#selector"
. Buni amalda ko'rish uchun demoga qarang.
Qo'lda yoqish:
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 | tavsifi |
---|---|---|---|
ota-ona | selektor | yolg'on | Agar selektor taqdim etilgan bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon xatti-harakatlariga o'xshash - bu panel sinfga bog'liq) |
almashtirish | mantiqiy | rost | Chaqiruvda yig'iladigan elementni almashtiradi |
.collapse(options)
Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object
.
.collapse('toggle')
Yigʻiladigan elementni koʻrsatish yoki yashirishga oʻzgartiradi. Yigʻiladigan element haqiqatda koʻrsatilishi yoki yashirilishidan oldin (yaʼni yoki hodisa sodir boʻlishidan oldin) qoʻngʻiroq qiluvchiga qaytadi .shown.bs.collapse
hidden.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
Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
Tadbir turi | Tavsif |
---|---|
show.bs.collapse | Ushbu hodisa show misol 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 hide usul chaqirilgandan so'ng darhol o'chiriladi. |
yashirin.bs.qulash | Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi). |
Karusel kabi elementlarni aylanib o'tish uchun slayd-shou komponenti. Ichki karusellar qo'llab-quvvatlanmaydi.
Karusel komponenti odatda mavjudlik standartlariga mos kelmaydi. Agar mos bo'lishingiz kerak bo'lsa, kontentingizni taqdim etishning boshqa variantlarini ko'rib chiqing.
Bootstrap o'zining animatsiyalari uchun faqat CSS3 dan foydalanadi, ammo Internet Explorer 8 va 9 kerakli CSS xususiyatlarini qo'llab-quvvatlamaydi. Shunday qilib, ushbu brauzerlardan foydalanganda slaydga o'tish animatsiyalari mavjud emas. Biz ataylab o'tish uchun jQuery-ga asoslangan zaxiralarni qo'shmaslikka qaror qildik.
Sinf .active
slaydlardan biriga qo'shilishi kerak. Aks holda, karusel ko'rinmaydi.
Boshqarish uchun .glyphicon .glyphicon-chevron-left
va .glyphicon .glyphicon-chevron-right
sinflari shart emas. Bootstrap oddiy unicode muqobillari sifatida taqdim .icon-prev
etadi ..icon-next
.carousel-caption
Har qanday element ichidagi element bilan slaydlaringizga osongina sarlavha qo'shing .item
. U yerga deyarli har qanday ixtiyoriy HTMLni joylashtiring va u avtomatik ravishda tekislanadi va formatlanadi.
Karusel boshqaruvlari to'g'ri ishlashi uchun id
eng chetidagi idishdan ( ) foydalanish kerak. .carousel
Bir nechta karusel qo'shganda yoki karuselni o'zgartirganda id
, tegishli boshqaruv elementlarini yangilashni unutmang.
Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. yoki data-slide
kalit so'zlarini qabul qiladi , bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, slayd o'rnini bilan boshlangan ma'lum bir indeksga o'tkazadigan karuselga xom slayd indeksini o'tkazish uchun foydalaning .prev
next
data-slide-to
data-slide-to="2"
0
data-ride="carousel"
Atribut karuselni sahifa yuklanishidan boshlab animatsiya sifatida belgilash uchun ishlatiladi . Uni bir xil karuselning aniq JavaScript ishga tushirishi (ortiqcha va keraksiz) bilan birgalikda ishlatib bo'lmaydi.
Karuselga qo'lda qo'ng'iroq qiling:
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-interval=""
.
Ism | turi | standart | tavsifi |
---|---|---|---|
interval | raqam | 5000 | Ob'ektni avtomatik aylantirish o'rtasidagi kechikish vaqti. Agar noto'g'ri bo'lsa, karusel avtomatik ravishda aylanmaydi. |
pauza | string | null | "ko'chirish" | ga o'rnatilgan bo'lsa "hover" , karuselning aylanishini to'xtatib turadi va karuselning mouseenter aylanishini davom ettiradi mouseleave . Agar ga oʻrnatilgan boʻlsa null , kursorni karusel ustiga olib borish uni toʻxtatib qoʻymaydi. |
o'rash | mantiqiy | rost | Karusel doimiy ravishda aylanishi kerakmi yoki qattiq to'xtashlari kerakmi. |
klaviatura | mantiqiy | rost | Karusel klaviatura hodisalariga munosabat bildirishi kerakmi. |
.carousel(options)
Karuselni ixtiyoriy variantlar object
bilan ishga tushiradi va ob'ektlar bo'ylab aylana boshlaydi.
.carousel('cycle')
Karusel elementlarini chapdan o'ngga aylantiring.
.carousel('pause')
Karuselning ob'ektlar orasidan aylanishini to'xtatadi.
.carousel(number)
Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash).
.carousel('prev')
Oldingi elementga aylanish.
.carousel('next')
Keyingi elementga o'tish.
Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi.
Ikkala hodisa ham quyidagi qo'shimcha xususiyatlarga ega:
direction
: Karusel siljish yo'nalishi (yoki "left"
yoki "right"
).relatedTarget
: Faol element sifatida joyiga surilayotgan DOM elementi.Barcha karusel hodisalari karuselning o'ziga (ya'ni <div class="carousel">
) qaratiladi.
Tadbir turi | Tavsif |
---|---|
slayd.bs.karusel | Bu hodisa slide misol usuli chaqirilganda darhol ishga tushadi. |
slid.bs.carusel | Ushbu hodisa karusel slaydga o'tishni tugatgandan so'ng o'chiriladi. |
Affiks plagini position: fixed;
bilan topilgan effektga taqlid qilib, yoqiladi va o'chiriladi position: sticky;
. O'ngdagi subnavigatsiya - bu affiks plaginining jonli demosi.
Affiks plaginini ma'lumotlar atributlari orqali yoki o'zingizning JavaScript-ni qo'lda ishlating. Ikkala holatda ham siz biriktirilgan tarkibingizning joylashuvi va kengligi uchun CSS-ni taqdim etishingiz kerak.
Eslatma: Safari renderlash xatosi tufayli tortilgan yoki surilgan ustun kabi nisbatan joylashtirilgan element tarkibidagi elementda affiks plaginidan foydalanmang .
Affiks plaginlari uchta sinf o'rtasida almashinadi, ularning har biri ma'lum bir holatni ifodalaydi: .affix
, .affix-top
, va .affix-bottom
. Haqiqiy pozitsiyalarni boshqarish uchun siz o'zingiz (ushbu plagindan mustaqil) ushbu sinflar uchun uslublarni taqdim etishingiz kerak, position: fixed;
on dan tashqari..affix
Affiks plagini qanday ishlaydi:
.affix-top
element eng yuqori holatda ekanligini ko'rsatish uchun qo'shiladi. Bu nuqtada CSS joylashuvi talab qilinmaydi..affix
almashtiradi .affix-top
va o'rnatadi position: fixed;
(Bootstrap's CSS tomonidan taqdim etilgan)..affix
bilan almashtirilishi kerak .affix-bottom
. Ofsetlar ixtiyoriy bo'lgani uchun, birini o'rnatish tegishli CSS-ni o'rnatishingizni talab qiladi. Bunday holda, position: absolute;
kerak bo'lganda qo'shing. Plagin elementni u yerdan qaerga joylashtirishni aniqlash uchun ma'lumotlar atributidan yoki JavaScript variantidan foydalanadi.Quyidagi foydalanish opsiyalaridan biriga CSS-ni sozlash uchun yuqoridagi amallarni bajaring.
Har qanday elementga affiks xatti-harakatlarini osongina qo'shish data-spy="affix"
uchun josuslik qilmoqchi bo'lgan elementga qo'shing. Elementni qadashni qachon almashtirish kerakligini aniqlash uchun ofsetlardan foydalaning.
JavaScript orqali affiks plaginiga qo'ng'iroq qiling:
Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-
kabi qoʻshing data-offset-top="200"
.
Ism | turi | standart | tavsifi |
---|---|---|---|
ofset | raqam | funktsiyasi | ob'ekt | 10 | O'tkazish joyini hisoblashda ekrandan siljish uchun piksellar. Agar bitta raqam taqdim etilsa, ofset yuqori va pastki yo'nalishlarda qo'llaniladi. Noyob, pastki va yuqori ofsetni ta'minlash uchun faqat ob'ektni offset: { top: 10 } yoki offset: { top: 10, bottom: 5 } . Ofsetni dinamik ravishda hisoblash kerak bo'lganda funktsiyadan foydalaning. |
maqsad | selektor | tugun | jQuery elementi | window ob'ekt _ |
Affiksning maqsadli elementini belgilaydi. |
.affix(options)
Kontentingizni biriktirilgan tarkib sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object
.
.affix('checkPosition')
Tegishli elementlarning o‘lchamlari, joylashuvi va aylanma o‘rnidan kelib chiqib, affiks holatini qayta hisoblab chiqadi. , .affix
, .affix-top
va .affix-bottom
sinflar yangi holatga ko'ra affikslangan tarkibga qo'shiladi yoki o'chiriladi. Affikslangan tarkibning to'g'ri joylashishini ta'minlash uchun ushbu usulni har safar qo'yilgan tarkib yoki maqsad elementning o'lchamlari o'zgartirilganda chaqirish kerak.
Bootstrap-ning affiks plagini affiks funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.
Tadbir turi | Tavsif |
---|---|
affiks.bs.affiks | Ushbu hodisa element biriktirilishidan oldin darhol boshlanadi. |
affiksli.bs.affiks | Ushbu hodisa element qo'yilgandan keyin o'chiriladi. |
affiks-top.bs.affiks | Ushbu hodisa element tepaga yopishtirilishidan oldin darhol boshlanadi. |
affiks-top.bs.affiks | Bu hodisa element yuqoriga qo'yilgandan so'ng ishga tushiriladi. |
affiks-pastki.bs.affiks | Ushbu hodisa element pastki qismga yopishtirilishidan oldin darhol boshlanadi. |
affiksli-pastki.bs.affiks | Ushbu hodisa element pastki qismga qo'yilgandan keyin ishga tushiriladi. |