Жеке немесе құрастырылған

Плагиндерді жеке қосуға болады (бірақ кейбіреулерінде қажетті тәуелділіктер бар) немесе барлығы бірден. bootstrap.js және bootstrap.min.js екеуі бір файлдағы барлық плагиндерді қамтиды.

Деректер атрибуттары

Барлық Bootstrap плагиндерін JavaScript-тің бір жолын жазбай-ақ тек түзету API арқылы пайдалануға болады. Бұл Bootstrap бірінші сыныпты API және плагинді пайдалану кезінде бірінші кезекте ескеру қажет.

Айтпақшы, кейбір жағдайларда бұл функцияны өшіру қажет болуы мүмкін. Сондықтан, біз сонымен қатар ''data-api'' негізгі атау кеңістігіндегі барлық оқиғаларды байланыстыру арқылы API деректер төлсипатын өшіру мүмкіндігін береміз. Бұл келесідей көрінеді:

$ ( «дене» ). өшірулі ( '.data-api' )

Сонымен қатар, белгілі бір плагинге мақсат қою үшін, плагиннің атын келесідей деректер-api аттар кеңістігімен бірге аттар кеңістігі ретінде қосыңыз:

$ ( «дене» ). өшірулі ( '.alert.data-api' )

Бағдарламалық API

Сондай-ақ, барлық Bootstrap плагиндерін тек JavaScript API арқылы пайдалана алуыңыз керек деп есептейміз. Барлық жалпыға ортақ API интерфейстері жалғыз, тізбектелетін әдістер болып табылады және әрекет етілген жинақты қайтарады.

$ ( «.btn.қауіпті» ). түймесі ( «қосу» ). addClass ( «май» )

Барлық әдістер қосымша опциялар нысанын, белгілі бір әдіске бағытталған жолды немесе ештеңені (әдепкі әрекеті бар плагинді бастайтын) қабылдауы керек:

$ ( «#myModal» ). модаль () // әдепкі мәндермен инициализацияланған                       
$ ( «#myModal» ). модальды ({ пернетақта : false }) // пернетақтасыз инициализацияланған     
$ ( «#myModal» ). modal ( 'show' ) // инициализациялайды және шоуды дереу шақырады                

Әрбір плагин сонымен қатар өзінің өңделмеген конструкторын «Конструктор» сипатында көрсетеді: $.fn.popover.Constructor. Белгілі бір плагин данасын алғыңыз келсе, оны тікелей элементтен шығарып алыңыз: $('[rel=popover]').data('popover').

Қақтығыс жоқ

Кейде басқа UI құрылымдарымен Bootstrap плагиндерін пайдалану қажет. Мұндай жағдайларда аттар кеңістігінің соқтығысуы кейде орын алуы мүмкін. Бұл орын алса, .noConflictмәнін қайтарғыңыз келетін плагинге қоңырау шалуыңызға болады.

var bootstrapButton = $ . fn . түймесі . noConflict () // $.fn. түймешігін бұрын тағайындалған мәнге қайтарыңыз 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn жүктеу функциясын беріңіз

Оқиғалар

Bootstrap көптеген плагиндердің бірегей әрекеттері үшін реттелетін оқиғаларды қамтамасыз етеді. Әдетте, олар инфинитив және өткен шақ түрінде келеді - мұнда инфинитив (мыс. show) оқиғаның басында іске қосылады және оның өткен шақ формасы (мыс. shown) іс-әрекеттің аяқталуы кезінде триггер болады.

Барлық инфинитив оқиғалары preventDefault функциясын қамтамасыз етеді. Бұл әрекет басталмай тұрып оның орындалуын тоқтату мүмкіндігін береді.

$ ( '#myModal' ). қосулы ( 'көрсету' , функция ( e ) {   
    егер (! деректер ) қайтару e . preventDefault () // модальды көрсетуді тоқтатады   
})

Ауысулар туралы

Қарапайым өту әсерлері үшін басқа JS файлдарымен қатар bootstrap-transition.js файлын қосыңыз. Егер құрастырылған (немесе кішірейтілген) bootstrap.js файлын пайдалансаңыз, оны қосудың қажеті жоқ — ол әлдеқашан бар.

Қолдану жағдайлары

Өтпелі плагиннің бірнеше мысалдары:

• Модальдерде сырғу немесе жоғалу
• Өшірулі қойындылар
• Ескертулер өшірілді
• Жылжымалы карусель панельдері

Мысалдар

Модальдер жеңілдетілген, бірақ икемді, ең аз қажетті функционалдығы және ақылды әдепкі параметрлері бар диалогтық шақырулар.

Статикалық мысал

Төменгі деректемедегі үстіңгі деректеме, негізгі және әрекеттер жиынтығы бар көрсетілетін модаль.

<div class = "модальды жасыру жоғалуы" > 
  <div class = "modal-header" > 
    <button type = "button" класс = "жабу" data-dississ = "modal" aria-hidden = "true" > × </button>    
    <h3> Модаль тақырыбы </h3>
  </div>
  <div class = "modal-body" > 
    <p> Бір тамаша дене… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Жабу </a>  
    <a href = "#" class = "btn btn-primary" > Өзгерістерді сақтау </a>  
  </div>
</div>

Тікелей демо

Төмендегі түймені басу арқылы модальды JavaScript арқылы ауыстырыңыз. Ол төмен қарай сырғып, беттің жоғарғы жағынан өшеді.

<!-- Модальді іске қосу түймесі -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Демо модальды іске қосу </a>    
 
<!-- Модаль -->
<div id = "myModal" класс = "модальды жасыру өшуі" tabindex = "-1" рөл = "диалог" aria-labelledby = "myModalLabel" aria-hidden = "шын" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dississ = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Модальдық тақырып </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Бір тамаша дене… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dississ = "modal" aria-hidden = "true" > Жабу </button>   
    <button class = "btn btn-primary" > Өзгерістерді сақтау </button> 
  </div>
</div>

Қолданылуы

Деректер атрибуттары арқылы

Модальді JavaScript жазбай белсендіріңіз. data-toggle="modal"Түймешік сияқты контроллер элементіне data-target="#foo"немесе href="#foo"ауыстырып-қосу үшін белгілі бір модальға мақсат қою үшін орнатыңыз .

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Модальді іске қосу </button>   

JavaScript арқылы

myModalJavaScript бір жолымен идентификаторы бар модальды шақырыңыз :

$ ( '#myModal' ). модальды ( опциялар )

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-backdrop="".

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

Әдістері

.modal(опциялар)

Мазмұныңызды модаль ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$ ( '#myModal' ). модальды ({
  пернетақта : жалған 
})

.modal('қосу')

Модальді қолмен ауыстырады.

$ ( '#myModal' ). модаль ( «қосу» )

.modal('шоу')

Модальді қолмен ашады.

$ ( '#myModal' ). модаль ( «шоу» )

.modal('жасыру')

Модальді қолмен жасырады.

$ ( '#myModal' ). модаль ( «жасыру» )

Оқиғалар

Bootstrap модальды класы модальды функционалдылыққа қосылу үшін бірнеше оқиғаларды көрсетеді.

$ ( '#myModal' ). қосулы ( 'жасырын' , функция () {   
  // бірдеңе жасау...
})

Мысалдар

Осы қарапайым плагиннің көмегімен кез келген дерлік, соның ішінде шарлау тақтасы, қойындылар және таблеткалар ашылмалы мәзірлерді қосыңыз.

Шарлау тақтасында

Қойындылар ішінде

Қолданылуы

Деректер атрибуттары арқылы

Ашылмалы тізімді ауыстырып қосу data-toggle="dropdown"үшін сілтемеге немесе түймеге қосыңыз.

<div класс = "ашылмалы" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Ашылмалы триггер </a>   
  <ul class = "ашылатын мәзір" рөлі = "мәзір" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL мекенжайларын сақтау үшін data-targetорнына төлсипатты пайдаланыңыз href="#".

<div класс = "ашылмалы" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Түсіп қалу
    <b class = "caret" ></b> 
  </a>
  <ul class = "ашылатын мәзір" рөлі = "мәзір" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript арқылы

JavaScript арқылы ашылмалы тізімдерге қоңырау шалыңыз:

$ ( '.dropdown-toggle' ). ашылмалы тізім ()

Опциялар

Жоқ

Әдістері

$().ашылмалы тізім('қосқыш')

Берілген шарлау тақтасы немесе қойындылы шарлау үшін мәзірлерді ауыстырып қосуға арналған бағдарламалық API.

Шарлау тақтасындағы мысал

ScrollSpy плагині айналдыру орнына негізделген шарлау мақсаттарын автоматты түрде жаңартуға арналған. Шарлау тақтасының астындағы аумақты айналдырыңыз және белсенді сыныптың өзгеруін қараңыз. Ашылмалы ішкі элементтер де бөлектеледі.

Қолданылуы

Деректер атрибуттары арқылы

Үстіңгі тақтадағы навигацияға айналдыру әрекетін оңай қосу data-spy="scroll"үшін, шпиондық жасағыңыз келетін элементке қосыңыз (көбінесе бұл негізгі корпус болады) және data-target=".navbar"қай шарлауды пайдалану керектігін таңдаңыз. Компонентпен scrollspy қолданбасын пайдаланғыңыз келеді .nav.

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

JavaScript арқылы

JavaScript арқылы scrollspy шақырыңыз:

$ ( '#navbar' ). scrollspy ()

Әдістері

.scrollspy('жаңарту')

Scrollspy қолданбасын DOM ішінен элементтерді қосу немесе жоюмен бірге пайдаланған кезде, жаңарту әдісін келесідей шақыру керек:

$ ( '[data-spy="жылжу"]' ). әрбір ( функция () {  
  var $spy = $ ( бұл ). scrollspy ( «жаңарту» )
});

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-offset="".

Оқиғалар

Мысал қойындылары

Тіпті ашылмалы мәзірлер арқылы жергілікті мазмұнның тақталары арқылы өту үшін жылдам, динамикалық қойынды функциясын қосыңыз.

Қолданылуы

JavaScript арқылы қойынды қойындыларын қосыңыз (әр қойындыны жеке белсендіру қажет):

$ ( '#myTab a' ). басыңыз ( функция ( e ) {  
  e . preventDefault ();
  $ ( бұл ). қойынды ( «көрсету» );
})

Жеке қойындыларды бірнеше жолмен белсендіруге болады:

$ ( '#myTab a[href="#profile"]' ). қойынды ( «көрсету» ); // Қойындыны аты бойынша таңдаңыз 
$ ( '#myTab a:first' ). қойынды ( «көрсету» ); // Бірінші қойындыны таңдаңыз 
$ ( '#myTab a:last' ). қойынды ( «көрсету» ); // Соңғы қойындыны таңдаңыз 
$ ( '#myTab li:eq(2) a' ). қойынды ( «көрсету» ); // Үшінші қойындыны таңдау (0-индекстелген) 

Белгілеу

data-toggle="tab"Сіз жай ғана көрсету немесе элементте JavaScript жазбай-ақ қойындыны немесе таблетка шарлауын белсендіре аласыз data-toggle="pill". navҚойындыға және nav-tabsсыныптарын қосу ulBootstrap қойындысының сәндеуін қолданады.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Негізгі </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Профиль </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Хабарлар </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Параметрлер </a></li>  
</ul>

Әдістері

$().қойындысы

Қойынды элементін және мазмұн контейнерін белсендіреді. Қойындыда DOM ішіндегі контейнер түйініне бағытталған не а data-targetнемесе болуы керек.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Негізгі </a></li>  
  <li><a href = "#profile" > Профиль </a></li> 
  <li><a href = "#messages" > Хабарлар </a></li> 
  <li><a href = "#settings" > Параметрлер </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 = "хабарламалар" > ... </div>  
  <div class = "tab-pane" id = "параметрлер" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:last' ). қойынды ( «көрсету» );
  })
</script>

Оқиғалар

$ ( 'a[data-toggle="қойынды"]' ). қосулы ( 'көрсетілген' , функция ( e ) {   
  e . мақсатты // белсендірілген қойынды
  e . қатыстыTarget // алдыңғы қойынды
})

Мысалдар

Джейсон Фрейм жазған тамаша jQuery.tipsy плагинінен шабыттандырылған; Кеңестер кескіндерге сүйенбейтін жаңартылған нұсқа, анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер атрибуттары пайдаланылады.

Өнімділік себептері бойынша құралдар кеңесі және қалқымалы деректер-аписі қосылған, яғни оларды өзіңіз инициализациялауыңыз керек .

Көрсеткіштерді көру үшін төмендегі сілтемелердің үстіне апарыңыз:

Төрт бағыт

Енгізу топтарындағы кеңестер

Bootstrap енгізу топтарымен құралдар кеңестері мен қалқымалы терезелерді пайдаланған кезде containerқажетсіз жанама әсерлерді болдырмау үшін (төменде құжатталған) опциясын орнату керек.

Қолданылуы

JavaScript арқылы құралдар кеңесін іске қосыңыз:

$ ( '#мысал' ). кеңес ( опциялар )

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-animation="".

Белгілеу

<a href = "#" data-toggle = "tooltip" title = "бірінші кеңес" > меңзерді менің үстіне апарыңыз </a>   

Әдістері

$().кеңес(опциялар)

Құрал кеңесінің өңдеушісін элементтер жиынына тіркейді.

.tooltip('көрсету')

Элементтің құралдар кеңесін көрсетеді.

$ ( '#элемент' ). құралдар кеңесі ( «көрсету» )

.tooltip('жасыру')

Элементтің құралдар кеңесін жасырады.

$ ( '#элемент' ). құралдар кеңесі ( «жасыру» )

.құралдар кеңесі('қосқыш')

Элементтің құралдар кеңесін ауыстырады.

$ ( '#элемент' ). құралдар кеңесі ( «ауыстыру» )

.tooltip('жою')

Элементтің құралдар кеңесін жасырады және жояды.

$ ( '#элемент' ). құралдар кеңесі ( «жою» )

Мысалдар

Қосымша ақпаратты орналастыру үшін кез келген элементке iPad-дағы сияқты шағын мазмұн қабаттарын қосыңыз. Қалқымалы әрекетті іске қосу үшін меңзерді түйменің үстіне апарыңыз. Құрал кеңесін қосуды талап етеді .

Статикалық қалқымалы

Төрт опция қолжетімді: жоғарғы, оң жақ, төменгі және солға тураланған.

dataJavaScript және төлсипат ішіндегі мазмұннан қалқымалы белгілер ретінде көрсетілмеген ешқандай түзетулер жасалмайды .

Тікелей демо

Төрт бағыт

Қолданылуы

JavaScript арқылы popovers қосыңыз:

$ ( '#мысал' ). popover ( опциялар )

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-animation="".

Белгілеу

Өнімділік себептері бойынша, Tooltip және Popover деректер аписы қосылған. Оларды пайдаланғыңыз келсе, жай ғана селектор опциясын көрсетіңіз.

Әдістері

$().popover(опциялар)

Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.

.popover('шоу')

Қалқымалы элементтерді көрсетеді.

$ ( '#элемент' ). popover ( «шоу» )

.popover('жасыру')

Қалқымалы элементтерді жасырады.

$ ( '#элемент' ). popover ( «жасыру» )

.popover('қосу')

Қалқымалы элементтерді ауыстырады.

$ ( '#элемент' ). popover ( «қосу» )

.popover('жою')

Элементтің қалқымалы қалпын жасырады және жояды.

$ ( '#элемент' ). popover ( «жою» )

Мысал ескертулер

Осы плагинмен барлық ескерту хабарларына өшіру функциясын қосыңыз.

Қолданылуы

JavaScript арқылы ескертуді өшіруді қосыңыз:

$ ( «.alert» ). ескерту ()

Белгілеу

data-dismiss="alert"Ескертуді жабу функциясын автоматты түрде беру үшін жай ғана жабу түймесін қосыңыз .

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

Әдістері

$().alert()

Барлық ескертулерді жақын функционалдылықпен қосады. Ескертулер жабылған кезде жандануы үшін оларда бұрыннан қолданылған .fadeжәне сынып бар екеніне көз жеткізіңіз..in

.alert('жабу')

Ескертуді жабады.

$ ( «.alert» ). ескерту ( «жабу» )

Оқиғалар

Bootstrap ескерту сыныбы ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

$ ( '#менің ескертуім' ). байланыстыру ( 'жабық' , функция () {   
  // бірдеңе жасау...
})

Қолдану мысалдары

Түймелердің көмегімен көбірек әрекет етіңіз. Басқару түймесі құралдар тақталары сияқты қосымша құрамдастарға арналған түймелер тобын көрсетеді немесе жасайды.

Мемлекеттік

data-loading-text="Loading..."Түймедегі жүктеу күйін пайдалану үшін қосыңыз .

<button type = "button" class = "btn btn-primary" data-loading-text = "Жүктелуде..." > Жүктелу күйі </button>   

Жалғыз ауыстырып қосқыш

Бір түймені ауыстырып қосуды қосу data-toggle="button"үшін қосу.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Жалғыз ауыстырып қосқыш </button>   

Құсбелгі ұяшығы

data-toggle="buttons-checkbox"btn-тобындағы мәнерді ауыстырып қосу үшін құсбелгі қойыңыз.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Сол жақ </button>  
  <button type = "button" class = "btn btn-primary" > Орташа </button>  
  <button type = "button" class = "btn btn-primary" > Оң жақ </button>  
</div>

Радио

data-toggle="buttons-radio"btn-тобындағы радио мәнерін ауыстырып қосу үшін қосыңыз.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Сол жақ </button>  
  <button type = "button" class = "btn btn-primary" > Орташа </button>  
  <button type = "button" class = "btn btn-primary" > Оң жақ </button>  
</div>

Қолданылуы

JavaScript арқылы түймелерді қосу:

$ ( '.nav-tabs' ). түймесі ()

Белгілеу

Деректер атрибуттары түйме плагинінің ажырамас бөлігі болып табылады. Әр түрлі белгілеу түрлері үшін төмендегі мысал кодын қараңыз.

Опциялар

Жоқ

Әдістері

$() түймесі('қосқыш')

Басу күйін ауыстырады. Түйме белсендірілгендей көрініс береді.

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

$() түймесі('жүктеу')

Түйменің күйін жүктеуге орнатады - түймені өшіреді және мәтінді жүктеу мәтініне ауыстырады. Мәтінді жүктеу деректер атрибуты арқылы түйме элементінде анықталуы керек data-loading-text.

<button type = "button" class = "btn" data-loading-text = "материалдарды жүктеу..." > ... </button>    

$() түймесі('қалпына келтіру')

Түйме күйін қалпына келтіреді - мәтінді бастапқы мәтінге ауыстырады.

$().түйме(жол)

Түйме күйін қалпына келтіреді - мәтінді кез келген деректермен анықталған мәтін күйіне ауыстырады.

<button type = "button" class = "btn" data-complete-text = "аяқталды!" > ... </ түйме>    
<скрипт>
  $ ( '.btn' ). түймесі ( «аяқталды» )
</script>

туралы

Аккордеондар мен навигация сияқты жиналмалы құрамдастарға арналған негізгі стильдер мен икемді қолдау алыңыз.

* Transitions плагинін қосуды талап етеді.

Мысал аккордеон

Collapse плагинін пайдаланып, біз қарапайым аккордеон стиліндегі виджетті жасадық:

<div класс = "аккордеон" id = "аккордеон2" >  
  <div class = "аккордеон тобы" > 
    <div class = "аккордеон тақырыбы" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Жиналатын топтық №1 элемент
      </a>
    </div>
    <div id = "collapseOne" class = "аккордеон денесінің құлауы" >  
      <div class = "аккордеон-ішкі" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
  <div class = "аккордеон тобы" > 
    <div class = "аккордеон тақырыбы" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Жиналатын топтық №2 элемент
      </a>
    </div>
    <div id = "collapseTwo" class = "аккордеон-дененің құлауы" >  
      <div class = "аккордеон-ішкі" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
</div>
...

Сондай-ақ плагинді аккордеон белгісінсіз пайдалануға болады. Басқа элементтің кеңеюі мен жиырылуын ауыстыратын түймені жасаңыз.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  қарапайым жиналмалы
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Қолданылуы

Деректер атрибуттары арқылы

Жиналатын элементті басқаруды автоматты түрде тағайындау үшін элементке қосу data-toggle="collapse"және a түймешігін басыңыз. data-targetТөлсипат data-targetқысқартуды қолдану үшін CSS селекторын қабылдайды. collapseСыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз in.

Жиналмалы басқару элементіне аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз data-parent="#selector". Бұл әрекетті көру үшін демонстрацияны қараңыз.

JavaScript арқылы

Қолмен қосу:

$ ( «.collapse» ). құлау ()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-parent="".

Әдістері

.collapse(опциялар)

Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$ ( '#myCallpsible' ). құлау ({
  ауыстырып қосқыш : жалған 
})

.collapse('қосу')

Жиналатын элементті көрсетілген немесе жасырын етіп ауыстырады.

.collapse('шоу')

Жиналатын элементті көрсетеді.

.collapse('жасыру')

Жиналатын элементті жасырады.

Оқиғалар

Bootstrap құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

$ ( '#myCallpsible' ). қосулы ( 'жасырын' , функция () {   
  // бірдеңе жасау...
})

Мысал карусель

Төмендегі слайд-шоуда карусель сияқты элементтерді айналдыруға арналған жалпы плагин мен құрамдас көрсетілген.

Бірінші нобай белгісі

Cras justo odio, dpibus ac facilisis in, egestas eget quam. Doec id elit non mi porta gravida және eget metus. Идентификатордың идентификаторы жоқ.

Second Thumbnail label

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

Third Thumbnail label

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

‹ ›

<div id = "myCarousel" класс = "карусель слайды" >  
  <ol class = "карусель-индикаторлар" > 
    <li data-target = "#myCarousel" data-slide-to = "0" класс = "белсенді" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" >></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Карусель элементтері -->
  <div class = "карусель-ішкі" > 
    <div class = "белсенді элемент" > … </div> 
    <div class = "element" > … </div> 
    <div class = "element" > … </div> 
  </div>
  <!-- Карусельді шарлау -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "келесі" > › </a>   
</div>

Қолданылуы

Деректер атрибуттары арқылы

Карусель орнын оңай басқару үшін деректер атрибуттарын пайдаланыңыз. немесе data-slideкілт сөздерін қабылдайды , ол слайд орнын ағымдағы орнына қатысты өзгертеді. Балама ретінде, слайд позициясын - деп басталатын белгілі бір индекске көшіретін карусельге өңделмеген слайд индексін беру үшін пайдаланыңыз .prevnextdata-slide-todata-slide-to="2"0

JavaScript арқылы

Карусельге қолмен қоңырау шалыңыз:

$ ( '.карусель' ). карусель ()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScriptz арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-interval="".

Әдістері

.карусель(опциялар)

Қосымша опциялармен карусельді инициализациялайды objectжәне элементтерді айналдыра бастайды.

$ ( '.карусель' ). карусель ({
  аралық : 2000 
})

.карусель('цикл')

Карусель элементтерін солдан оңға қарай айналдырады.

.карусель('кідірту')

Карусель элементтерді айналып өтуді тоқтатады.

.карусель(сан)

Карусельді белгілі бір кадрға айналдырады (0 негізінде, массивке ұқсас).

.карусель('алдыңғы')

Алдыңғы элементке ауысады.

.карусель('келесі')

Келесі элементке ауысады.

Оқиғалар

Bootstrap карусель сыныбы карусель функциясына қосылу үшін екі оқиғаны көрсетеді.

Мысал

Кез келген пішін мәтінін енгізу арқылы талғампаз басқыштарды жылдам жасауға арналған қарапайым, оңай кеңейтілген плагин.

<енгізу түрі = «мәтін» деректер- провиде = «теру» >  

autocomplete="off"Әдепкі шолғыш мәзірлерінің Bootstrap typeahead ашылмалы тізімінде пайда болуына жол бермеу үшін орнатқыңыз келеді .

Қолданылуы

Деректер атрибуттары арқылы

Жоғарыдағы мысалда көрсетілгендей теру функциясы бар элементті тіркеу үшін деректер атрибуттарын қосыңыз.

JavaScript арқылы

Теру машинасына қолмен қоңырау шалыңыз:

$ ( '.алдыда' ). басқыш ()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-source="".

Әдістері

.typeahead(опциялар)

Теру басы бар енгізуді инициализациялайды.

Мысал

Сол жақтағы қосалқы навигация аффикс плагинінің тікелей көрсетілімі болып табылады.

Қолданылуы

Деректер атрибуттары арқылы

Кез келген элементке аффикс әрекетін оңай қосу data-spy="affix"үшін, барлау қажет элементке жай ғана қосыңыз. Одан кейін элементті бекітуді қосу және өшіру уақытын анықтау үшін ығысуларды пайдаланыңыз.

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

JavaScript арқылы

JavaScript арқылы аффикс плагиніне қоңырау шалыңыз:

$ ( '#navbar' ). аффикс ()

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-offset-top="200".