Individual yoki tuzilgan

Plaginlar alohida-alohida (ba'zilarida zarur bo'lgan bog'liqliklarga ega bo'lsa ham) yoki bir vaqtning o'zida kiritilishi mumkin. Bootstrap.js ham , bootstrap.min.js ham bitta fayldagi barcha plaginlarni o'z ichiga oladi.

Ma'lumotlar atributlari

Siz barcha Bootstrap plaginlaridan JavaScript-ning bir qatorini yozmasdan faqat belgilash API orqali foydalanishingiz mumkin. Bu Bootstrap’ning birinchi sinf API’si bo‘lib, plaginni ishlatishda birinchi navbatda e’tiborga olish kerak.

Aytgancha, ba'zi hollarda ushbu funksiyani o'chirib qo'yish maqsadga muvofiq bo'lishi mumkin. Shuning uchun biz `'data-api'` bilan tana nomlari oralig'idagi barcha hodisalarni bekor qilish orqali API ma'lumotlar atributini o'chirish imkoniyatini ham taqdim etamiz. Bu shunday ko'rinadi:

$ ( 'tana' ). o'chirilgan ( '.data-api' )

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:

$ ( 'tana' ). o'chirilgan ( '.alert.data-api' )

Dasturli API

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.

$ ( ".btn.danger" ). tugmasi ( "o'tish" ). addClass ( "yog '" )

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:

$ ( "#myModal" ). modal () // sukut bo'yicha ishga tushirildi                       
$ ( "#myModal" ). modal ({ klaviatura : false }) // klaviaturasiz ishga tushirildi     
$ ( "#myModal" ). modal ( 'show' ) // ko'rsatishni darhol ishga tushiradi va chaqiradi                

Har bir plagin o'zining xom konstruktorini "Konstruktor" xususiyatida ham 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').

Mojaro yo'q

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 .noConflictqiymatini qaytarishni xohlagan plaginga qo'ng'iroq qilishingiz mumkin.

var bootstrapButton = $ . fn . tugmasi . noConflict () // $.fn.tugmasini oldindan tayinlangan qiymatga qaytaring 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn yuklash funksiyasini bering.

Voqealar

Bootstrap ko'pgina plaginlarning noyob harakatlari uchun maxsus tadbirlarni taqdim etadi. Odatda, bular infinitiv va o‘tgan zamon shaklida bo‘ladi - bunda infinitiv (masalan show, ) hodisa boshida ishga tushadi va uning o‘tgan zamon shakli (masalan shown, ) ish-harakat tugagach tetiklanadi.

Barcha infinitive hodisalar preventDefault funksiyasini ta'minlaydi. Bu harakat boshlanishidan oldin uning bajarilishini to'xtatish imkoniyatini beradi.

$ ( '#myModal' ). on ( 'ko'rsatish' , funktsiya ( e ) {   
    bo'lsa (! ma'lumotlar ) qaytib e . preventDefault () // modal ko'rsatilishini to'xtatadi   
})

O'tishlar haqida

Oddiy o'tish effektlari uchun boshqa JS fayllari qatoriga bootstrap-transition.js ni bir marta qo'shing. Agar siz kompilyatsiya qilingan (yoki kichiklashtirilgan) bootstrap.js dan foydalanayotgan bo'lsangiz, buni kiritishning hojati yo'q - u allaqachon mavjud.

Foydalanish holatlari

O'tish plaginiga bir nechta misollar:

• Modallarda siljish yoki pasayish
• Yo'qolgan yorliqlar
• Yo'qolgan ogohlantirishlar
• Sürgülü karusel panellari

Misollar

Modallar soddalashtirilgan, ammo moslashuvchan, minimal talab qilinadigan funksionallik va aqlli standart sozlamalar bilan muloqot oynasi takliflari.

Statik misol

Sarlavhasi, tanasi va pastki kolontitradagi amallar to'plami bilan ko'rsatilgan modal.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "tugma" klassi = "yopish" data-dississ = "modal" aria-hidden = "to'g'ri" > × </button>    
    <h3> Modal sarlavha </h3>
  </div>
  <div class = "modal-tana" > 
    <p> Bitta nozik tana... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Yopish </a>  
    <a href = "#" class = "btn btn-primary" > O‘zgarishlarni saqlash </a>  
  </div>
</div>

Jonli demo

Quyidagi tugmani bosish orqali modalni JavaScript orqali almashtiring. U pastga siljiydi va sahifaning yuqori qismidan o'chib ketadi.

<!-- Modalni ishga tushirish tugmasi -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo modalni ishga tushirish </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "yopish" data-dississ = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modal sarlavha </h3> 
  </div>
  <div class = "modal-tana" > 
    <p> Bitta nozik tana... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dississ = "modal" aria-hidden = "true" > Yopish </button>   
    <button class = "btn btn-primary" > O‘zgarishlarni saqlash </button> 
  </div>
</div>

Foydalanish

Ma'lumotlar atributlari orqali

JavaScript yozmasdan modalni faollashtiring. data-toggle="modal"Tugma kabi boshqaruv elementiga data-target="#foo"yoki href="#foo"oʻzgartirish uchun maʼlum modalni nishonga olish uchun oʻrnating .

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modalni ishga tushirish </button>   

JavaScript orqali

myModalBir qator JavaScript bilan identifikatorli modalni chaqiring :

$ ( '#myModal' ). modal ( variantlar )

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Usullari

.modal(variantlar)

Kontentingizni modal sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

$ ( '#myModal' ). modal ({
  klaviatura : noto'g'ri 
})

.modal('toggle')

Modalni qo'lda almashtiradi.

$ ( '#myModal' ). modal ( "o'tish" )

.modal('shou')

Modalni qo'lda ochadi.

$ ( '#myModal' ). modal ( 'shou' )

.modal('yashirish')

Modalni qo'lda yashiradi.

$ ( '#myModal' ). modal ( "yashirish" )

Voqealar

Bootstrap-ning modal klassi modal funksionallikka ulanish uchun bir nechta hodisalarni ochib beradi.

$ ( '#myModal' ). on ( 'yashirin' , funktsiya () {   
  // biror narsa qilmoq…
})

Misollar

Ushbu oddiy plagin yordamida deyarli hamma narsaga ochiladigan menyularni qo'shing, jumladan, navigatsiya paneli, yorliqlar va tabletkalar.

Navbar ichida

Yorliqlar ichida

Foydalanish

Ma'lumotlar atributlari orqali

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

<div class = "ochiladigan" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown trigger </a>   
  <ul class = "ochiladigan menyu" roli = "menyu" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL manzillari saqlanib qolishi uchun data-targetoʻrniga atributdan foydalaning href="#".

<div class = "ochiladigan" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "tugma" data-toggle = "ochiladigan" data-target = "#" href = "/page.html" >      
    Ochiladigan ro'yxat
    <b class = "karet" >> 
  </a>
  <ul class = "ochiladigan menyu" roli = "menyu" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript orqali

JavaScript orqali ochiladigan menyularga qo'ng'iroq qiling:

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

Variantlar

Yo'q

Usullari

$().ochiladigan menyu ('o'tish)

Berilgan navigatsiya paneli yoki yorliqli navigatsiya uchun menyularni almashtirish uchun dasturiy api.

Navbardagi misol

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.

Foydalanish

Ma'lumotlar atributlari orqali

Yuqori paneldagi navigatsiyaga osongina scrollspy xatti-harakatini qo'shish data-spy="scroll"uchun josuslik qilmoqchi bo'lgan elementga qo'shing (ko'pincha bu korpus bo'ladi) va data-target=".navbar"qaysi navbatni ishlatishni tanlang. Siz komponent bilan scrollspy dan foydalanmoqchisiz .nav.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

JavaScript orqali

JavaScript orqali scrollspy-ga qo'ng'iroq qiling:

$ ( '#navbar' ). scrollspy ()

Usullari

.scrollspy('yangilash')

Scrollspy-dan DOM-ga elementlarni qo'shish yoki olib tashlash bilan birgalikda foydalanilganda, siz yangilash usulini shunday chaqirishingiz kerak bo'ladi:

$ ( '[data-spy="scroll"]' ). har bir ( funktsiya () {  
  var $spy = $ ( bu ). scrollspy ( "yangilash" )
});

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset="".

Voqealar

Misol yorliqlari

Mahalliy kontent panellari orqali, hatto ochiladigan menyular orqali ham o‘tish uchun tezkor, dinamik yorliq funksiyasini qo‘shing.

Foydalanish

JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):

$ ( '#mening Tab a' ). bosing ( funksiya ( e ) {  
  e . preventDefault ();
  $ ( bu ). tab ( "ko'rsatish" );
})

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

$ ( '#myTab a[href="#profile"]' ). tab ( "ko'rsatish" ); // Yorliqni nomi bo'yicha tanlang 
$ ( '#myTab a:first' ). tab ( "ko'rsatish" ); // Birinchi yorliqni tanlang 
$ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" ); // Oxirgi yorliqni tanlang 
$ ( '#myTab li:eq(2) a' ). tab ( "ko'rsatish" ); // Uchinchi yorliqni tanlang (0-indekslangan) 

Belgilash

Siz biron bir JavaScript-ni yozmasdan, oddiygina elementni ko'rsatish data-toggle="tab"yoki ustiga kiritish orqali yorliq yoki tabletka navigatsiyasini faollashtirishingiz mumkin. data-toggle="pill"Yorliqga navva nav-tabssinflarini qo'shish ulBootstrap yorlig'i uslubini qo'llaydi.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Bosh sahifa </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Xabarlar </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Sozlamalar </a></li>  
</ul>

Usullari

$().tab

Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-targetyoki a bo'lishi kerak .href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Bosh sahifa </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Xabarlar </a></li> 
  <li><a href = "#settings" > Sozlamalar </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "xabarlar" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skript>
  $ ( funktsiya () {  
    $ ( '#myTab a:oxirgi' ). tab ( "ko'rsatish" );
  })
</script>

Voqealar

$ ( 'a[data-toggle="tab"]' ). on ( 'ko'rsatilgan' , funktsiya ( e ) {   
  e . maqsad // faollashtirilgan yorliq
  e . bog'liqTarget // oldingi yorliq
})

Misollar

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.

Ishlash sabablariga ko'ra, asboblar maslahati va popover data-apis qo'shilgan, ya'ni ularni o'zingiz ishga tushirishingiz kerak .

Maslahatlarni ko'rish uchun kursorni quyidagi havolalar ustiga olib boring:

To'rt yo'nalish

Kirish guruhlari uchun maslahatlar

Bootstrap kiritish guruhlari bilan maslahatlar va popoverlardan foydalanganda, containerkiruvchi nojo'ya ta'sirlarni oldini olish uchun (quyida hujjatlashtirilgan) opsiyasini o'rnatishingiz kerak bo'ladi.

Foydalanish

JavaScript orqali asboblar maslahatini ishga tushiring:

$ ( '#misol' ). maslahat ( variantlar )

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Belgilash

<a href = "#" data-toggle = "tooltip" title = "birinchi maslahat" > kursorni mening ustimga olib keling </a>   

Usullari

$().maslahat (variantlar)

Elementlar to'plamiga asboblar paneli ishlov beruvchisini biriktiradi.

.tooltip('shou')

Elementning asboblar maslahatini ko'rsatadi.

$ ( '#element' ). maslahat ( 'ko'rsatish' )

.tooltip('yashirish')

Elementning asboblar maslahatini yashiradi.

$ ( '#element' ). maslahatchi ( 'yashirish' )

.tooltip('almashtirish')

Elementning asboblar maslahatini almashtiradi.

$ ( '#element' ). asboblar maslahati ( "o'tish" )

.tooltip('yo'q qilish')

Elementning asboblar maslahatini yashiradi va yo'q qiladi.

$ ( '#element' ). maslahatchi ( 'yo'q qilish' )

Misollar

Ikkilamchi ma'lumotni saqlash uchun har qanday elementga, iPad'dagi kabi kontentning kichik qatlamlarini qo'shing. Qalqib chiquvchi tugmani ishga tushirish uchun kursorni ustiga bosing. Asboblar maslahatini qo'shishni talab qiladi .

Statik popover

To'rtta variant mavjud: yuqori, o'ng, pastki va chapga tekislangan.

dataJavaScript va atribut tarkibidagi kontentdan popover sifatida ko'rsatilmagan hech qanday belgilash .

Jonli demo

To'rt yo'nalish

Foydalanish

JavaScript orqali popoverlarni yoqish:

$ ( '#misol' ). popover ( variantlar )

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-animation="".

Belgilash

Ishlash sabablariga ko'ra, Tooltip va Popover data-apis qo'shiladi. Agar ulardan foydalanmoqchi bo'lsangiz, shunchaki selektor opsiyasini belgilang.

Usullari

$().popover(variantlar)

Elementlar to'plami uchun popoverlarni ishga tushiradi.

.popover('shou')

Popover elementlarini ochib beradi.

$ ( '#element' ). popover ( "shou" )

.popover('yashirish')

Qalqib chiquvchi elementlarni yashiradi.

$ ( '#element' ). popover ( "yashirish" )

.popover('toggle')

Qalqib chiquvchi elementlarni almashtiradi.

$ ( '#element' ). popover ( "o'tish" )

.popover('yo'q qilish')

Elementning popoverini yashiradi va yo'q qiladi.

$ ( '#element' ). popover ( "yo'q qilish" )

Ogohlantirishlarga misollar

Ushbu plagin yordamida barcha ogohlantirish xabarlariga oʻchirish funksiyasini qoʻshing.

Foydalanish

JavaScript orqali ogohlantirishni o'chirishni yoqing:

$ ( ".alert" ). ogohlantirish ()

Belgilash

data-dismiss="alert"Avtomatik ravishda ogohlantirish funksiyasini berish uchun yopish tugmachangizga qo'shing .

<a class = "yopish" data-dississ = "alert" href = "#" > × </a>   

Usullari

$().alert()

Barcha ogohlantirishlarni yaqin funksionallik bilan o'rab oladi. Ogohlantirishlaringiz yopilganda jonlantirilishi uchun ularda .fadeva .insinfi allaqachon qo'llanilganligiga ishonch hosil qiling.

.alert('yopish')

Ogohlantirishni yopadi.

$ ( ".alert" ). ogohlantirish ( "yopish" )

Voqealar

Bootstrap ning ogohlantirish klassi ogohlantirish funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

$ ( '#mening ogohlantirishim' ). bog'lash ( 'yopiq' , funktsiya () {   
  // biror narsa qilmoq…
})

Foydalanish misollari

Tugmalar yordamida ko'proq harakat qiling. Boshqaruv tugmasi asboblar paneli kabi ko'proq komponentlar uchun tugmalar guruhlarini belgilaydi yoki yaratadi.

Davlatga tegishli

data-loading-text="Loading..."Tugmadagi yuklanish holatidan foydalanish uchun qo'shing .

<button type = "button" class = "btn btn-primary" data-loading-text = "Yuklanmoqda..." > Yuklanmoqda holati </button>   

Yagona almashtirish

data-toggle="button"Bitta tugma orqali almashtirishni faollashtirish uchun qo'shing .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Yagona o‘tish tugmasi </button>   

Belgilash katagi

data-toggle="buttons-checkbox"btn-group-da belgilash qutisi uslubini almashtirish uchun qo'shing .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Chap </button>  
  <button type = "button" class = "btn btn-primary" > O'rta </button>  
  <button type = "button" class = "btn btn-primary" > O‘ng </button>  
</div>

Radio

data-toggle="buttons-radio"btn-group-da radio uslubini almashtirish uchun qo'shing .

<div class = "btn-group" data-toggle = "tugmalar-radio" >  
  <button type = "button" class = "btn btn-primary" > Chap </button>  
  <button type = "button" class = "btn btn-primary" > O'rta </button>  
  <button type = "button" class = "btn btn-primary" > O‘ng </button>  
</div>

Foydalanish

JavaScript orqali tugmalarni yoqish:

$ ( '.nav-tabs' ). tugmasi ()

Belgilash

Ma'lumotlar atributlari tugma plaginining ajralmas qismidir. Turli xil belgilash turlari uchun quyidagi misol kodini tekshiring.

Variantlar

Yo'q

Usullari

$().tugmasi("oʻtish")

Bosish holatini almashtiradi. Tugma faollashtirilgan ko'rinishni beradi.

<button type = "button" class = "btn" data-toggle = "tugma" > … </button>    

$().tugma ('yuklanmoqda')

Tugma holatini yuklash uchun o'rnatadi - tugmani o'chiradi va matnni yuklash matniga almashtiradi. Matnni yuklash ma'lumotlar atributidan foydalangan holda tugma elementida aniqlanishi kerak data-loading-text.

<button type = "button" class = "btn" data-loading-text = "matn yuklanmoqda..." > ... </button>    

$().tugmasi("qayta o'rnatish")

Tugma holatini tiklaydi - matnni asl matnga almashtiradi.

$().tugma (string)

Tugma holatini tiklash - matnni har qanday ma'lumot bilan belgilangan matn holatiga almashtiradi.

<button type = "button" class = "btn" data-complete-text = "tugallandi!" > ... </tugmasi>    
<skript>
  $ ( '.btn' ). tugmasi ( "to'liq" )
</script>

Haqida

Akkordeon va navigatsiya kabi yig‘iladigan komponentlar uchun asosiy uslublar va moslashuvchan yordam oling.

* Transitions plaginini qo'shishni talab qiladi.

Misol uchun akkordeon

Yiqilish plaginidan foydalanib, biz oddiy akkordeon uslubi vidjetini yaratdik:

<div class = "akkordeon" id = "akkordeon2" >  
  <div class = "akkordeon guruhi" > 
    <div class = "akkordeon sarlavhasi" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Yigʻiladigan guruh elementi №1
      </a>
    </div>
    <div id = "collapseOne" class = "akkordeon tanasi qulashi" >  
      <div class = "akkordeon-ichki" > 
        Anim pariatur klişe...
      </div>
    </div>
  </div>
  <div class = "akkordeon guruhi" > 
    <div class = "akkordeon sarlavhasi" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Yig'iladigan guruh elementi №2
      </a>
    </div>
    <div id = "collapseTwo" class = "akkordeon-tananing qulashi" >  
      <div class = "akkordeon-ichki" > 
        Anim pariatur klişe...
      </div>
    </div>
  </div>
</div>
...

Siz plaginni akkordeon belgisisiz ham ishlatishingiz mumkin. Boshqa elementning kengayishi va siqilishini almashtirish tugmachasini yarating.

<tugma turi = "tugma" klassi = "btn btn-danger" data-toggle = "qulash" data-target = "#demo" >    
  oddiy yig'iladigan
</button>
 
<div id = "demo" class = "yiqilish" > … </div>  

Foydalanish

Ma'lumotlar atributlari orqali

Yigʻiladigan element 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 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.

JavaScript orqali

Qo'lda yoqish:

$ ( “.qulash” ). qulash ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-parent="".

Usullari

.collapse(variantlar)

Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

$ ( '#myClapsible' ). qulash ({
  o'zgartirish : noto'g'ri 
})

.collapse('toggle')

Yigʻiladigan elementni koʻrsatish yoki yashirishga oʻzgartiradi.

.collapse('shou')

Yigʻiladigan elementni koʻrsatadi.

.collapse('yashirish')

Yig'iladigan elementni yashiradi.

Voqealar

Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

$ ( '#myClapsible' ). on ( 'yashirin' , funktsiya () {   
  // biror narsa qilmoq…
})

Misol karusel

Quyidagi slayd-shouda karusel kabi elementlarni aylanib o'tish uchun umumiy plagin va komponent ko'rsatilgan.

Birinchi eskiz yorlig'i

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nollam id dolor id nibh ultricies vehicula ut id elit.

Ikkinchi eskiz yorlig‘i

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nollam id dolor id nibh ultricies vehicula ut id elit.

Uchinchi eskiz yorlig'i

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida va eget metus. Nollam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "karusel slayd" >  
  <ol class = "karusel-indikatorlar" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "faol" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" >></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karusel elementlari -->
  <div class = "karusel-ichki" > 
    <div class = "faol element" > … </div> 
    <div class = "element" > … </div> 
    <div class = "element" > … </div> 
  </div>
  <!-- Karusel navbati -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "oldingi" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "keyingi" > › </a>   
</div>

Foydalanish

Ma'lumotlar atributlari orqali

Karusel o'rnini osongina boshqarish uchun ma'lumotlar atributlaridan foydalaning. yoki data-slidekalit so'zlarini qabul qiladi , bu esa slaydni joriy holatiga nisbatan o'zgartiradi. Shu bilan bir qatorda, bilan boshlangan ma'lum bir indeksga slayd o'rnini o'tadigan karuselga xom slayd indeksini o'tkazish uchun foydalaning .prevnextdata-slide-todata-slide-to="2"0

JavaScript orqali

Karuselga qo'lda qo'ng'iroq qiling:

$ ( '.karusel' ). karusel ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScriptz orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-interval="".

Usullari

.karusel(variantlar)

Karuselni ixtiyoriy variantlar objectbilan ishga tushiradi va ob'ektlar bo'ylab aylanishni boshlaydi.

$ ( '.karusel' ). karusel ({
  interval : 2000 
})

.karusel('tsikl')

Karusel elementlarini chapdan o'ngga aylantiring.

.karusel('pauza')

Karuselning ob'ektlar bo'ylab aylanishini to'xtatadi.

.karusel(raqam)

Karuselni ma'lum bir freymga aylantiradi (0-ga asoslangan, massivga o'xshash).

.karusel('oldingi')

Oldingi elementga aylanish.

.karusel('keyingi')

Keyingi elementga o'tish.

Voqealar

Bootstrap-ning karusel klassi karusel funksiyasiga ulanish uchun ikkita hodisani ochib beradi.

Misol

Har qanday shakldagi matn kiritish bilan oqlangan shriftlarni tezda yaratish uchun asosiy, oson kengaytirilgan plagin.

<kiritish turi = "matn" data-provide = "typeahead" >  

Siz autocomplete="off"standart brauzer menyularini Bootstrap typeahead ochiladigan roʻyxatida paydo boʻlishini oldini olishni xohlaysiz.

Foydalanish

Ma'lumotlar atributlari orqali

Yuqoridagi misolda ko'rsatilganidek, matn terish funksiyasiga ega elementni ro'yxatdan o'tkazish uchun ma'lumotlar atributlarini qo'shing.

JavaScript orqali

Matn boshiga qo'lda qo'ng'iroq qiling:

$ ( '.yozuv oldinda' ). yozuv oldi ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-source="".

Usullari

.typeahead(variantlar)

Yozuv boshi bilan kiritishni ishga tushiradi.

Misol

Chapdagi subnavigatsiya affiks plaginining jonli demosidir.

Foydalanish

Ma'lumotlar atributlari orqali

Har qanday elementga affiks xatti-harakatlarini osongina qo'shish data-spy="affix"uchun josuslik qilmoqchi bo'lgan elementga qo'shing. So'ngra, elementni pinlashni qachon yoqish va o'chirish kerakligini aniqlash uchun ofsetlardan foydalaning.

<div data-spy = "affiks" data-offset-top = "200" > ... </div>  

JavaScript orqali

JavaScript orqali affiks plaginiga qo'ng'iroq qiling:

$ ( '#navbar' ). affiks ()

Variantlar

Variantlar maʼlumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-offset-top="200".