JavaScript

Bootstrap құрамдастарын өмірге әкеліңіз — қазір 13 реттелетін jQuery плагиндерімен.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Қақтығыс жоқ

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

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

Оқиғалар

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

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

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

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

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

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

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

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

Мысалдар

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

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

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

  1. <div class = "модальды жасыру жоғалуы" >
  2. <div class = "modal-header" >
  3. <button type = "button" класс = "жабу" data-dississ = "modal" aria-hidden = "true" > × </button>
  4. <h3> Модаль тақырыбы </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Бір тамаша дене… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Жабу </a>
  11. <a href = "#" class = "btn btn-primary" > Өзгерістерді сақтау </a>
  12. </div>
  13. </div>

Тікелей демо

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

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

Қолданылуы

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

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

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

JavaScript арқылы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
фон логикалық рас Модаль-фон элементін қамтиды. Немесе, staticшерткенде модальды жаппайтын фон үшін көрсетіңіз.
пернетақта логикалық рас Escape пернесі басылғанда модальды жабады
көрсету логикалық рас Баптандыру кезінде модальды көрсетеді.
қашықтан жол жалған

loadҚашықтағы url берілсе, мазмұн jQuery әдісі арқылы жүктеледі және .modal-body. Деректер API қолданып жатсаңыз href, қашықтағы көзді көрсету үшін тегті баламалы түрде пайдалануға болады. Мұның мысалы төменде көрсетілген:

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

Әдістері

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

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

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

.modal('қосу')

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

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

.modal('шоу')

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

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

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

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

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

Оқиғалар

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

Оқиға Сипаттама
көрсету showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген Бұл оқиға модаль пайдаланушыға көрінетін болған кезде іске қосылады (css ауысуларының аяқталуын күтеді).
жасыру Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
жасырын Бұл оқиға модальді пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
  1. $ ( '#myModal' ). қосулы ( 'жасырын' , функция () {
  2. // бірдеңе жасау...
  3. })

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

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

@май

Жарнама леггинстер keytar, brunch id art party dolor labore. Пичфорк yr enim lo-fi олар qui сатылғанға дейін. Tumblr фермадан үстелге дейін велосипед құқығы. Anim keffiyeh carles кардиганы. Велит Сейтан Максвинидің фотостенд 3 қасқыр ай irure. Косби жемпір ломо джинсы шорттары, Вильямсбург капюшон минимум, сіз олар туралы естімеген боларсыз және кардиган сенімді қорын culpa biodiesel Уэс Андерсон эстетикалық. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Вениам марфа мұртты скейтборд, майлы фугиат велит айыр сақалы. Фриган сақалы Mcsweeney's Vero. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкасы бар косби жемпір азық-түлік жүк көлігі, mcsweeney's quis non freegan винил. Ло-фи Вес Андерсон +1 сарториалды. Карлестің эстетикалық емес жаттығулары нәзік емес. Бруклин майсыздандыратын қолөнер сырасы вице Кейтар Десерунт.

бір

Кез-келген басқа нұсқаны пайдаланыңыз. Fap крафт сырасы deserunt скейтборд ea. Lomo велосипед құқықтарын қорғау banh mi, Velit ea Sunt келесі деңгейлі локаварлық бір текті кофе магна вениам. High life идентификаторы винил, жаңғырық саябағы quis aliquip banh mi pitchfork. Vero VHS est adipisicing. DIY минимум мессенджерлік сөмке. Cred ex in, iphone фанни пакетін тұрақты таңдау.

екі

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.

three

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 блогы, culpa messenger bag marfa whatever delectus food truck. Synth идентификаторы болжалды. Locavore sed helvetica клише ирония, найзағайлар, бәлкім, сіз олар туралы естімеген боларсыз. Олар сатылып кеткенге дейін жұмыс істейтін таңдаулы орын, Терри Ричардсон керемет таңғы ас. Кардиган қолөнер сырасы сеитан дайын велит. VHS chambray laboris tempor veniam. Аним моллит миним commodo ullamco thundercats.


Қолданылуы

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

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

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

JavaScript арқылы

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

  1. $ ( '#navbar' ). scrollspy ()
Ескерту! Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>домдағы сияқты нәрсеге міндетті сәйкес келеді <div id="home"></div>.

Әдістері

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

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
офсет саны 10 Айналдыру орнын есептеу кезінде жоғарыдан ығысу үшін пикселдер.

Оқиғалар

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

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

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

Шикі джинсы Остин олар туралы естімеген боларсыз. Nesciunt tofu stumptown aliqua, ретро синтетикалық тазалау шебері. Мұртты клише, Вильямсбург Карлес Вегетариандық Хелветика. Reprehenderit қасапшы ретро keffiyeh dreamcatcher synth. Косби жемпірі eu banh mi, qui irure Терри Ричардсон бұрынғы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, қасапшы nisi qui voluptate.

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.


Қолданылуы

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

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

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

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

Белгілеу

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

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

Әдістері

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

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

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Негізгі </a></li>
  3. <li><a href = "#profile" > Профиль </a></li>
  4. <li><a href = "#messages" > Хабарлар </a></li>
  5. <li><a href = "#settings" > Параметрлер </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "хабарламалар" > ... </div>
  12. <div class = "tab-pane" id = "параметрлер" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a:last' ). қойынды ( «көрсету» );
  18. })
  19. </script>

Оқиғалар

Оқиға Сипаттама
көрсету Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
көрсетілген Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
  1. $ ( 'a[data-toggle="қойынды"]' ). қосулы ( 'көрсетілген' , функция ( e ) {
  2. e . мақсатты // белсендірілген қойынды
  3. e . қатыстыTarget // алдыңғы қойынды
  4. })

Мысалдар

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

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

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

Тар шалбар келесі деңгейдегі keffiyeh сіз олар туралы естімеген шығарсыз. Фотостенд сақал шикі джинсы баспа вегетариандық хабаршы сөмкесі Stumptown. Фермадан үстелге арналған сейтан, Mcsweeney's fixie sustainable quinoa 8-бит американдық киімінде терри Ричардсон винил камерасы бар . Beard Stumptown, кардигандар banh mi lomo thundercats. Тофу биодизель Вильямсбург Марфа, төрт локо Максвинидің вегетариандық камерасын тазартады. Шынында да ирониялық қолөнерші кез келген keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бір тегі кофе вирусы.

Төрт бағыт

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

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


Қолданылуы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
анимация логикалық рас құралдар кеңесіне css өшіру көшуін қолданыңыз
html логикалық жалған Құрал кеңесіне html енгізіңіз. Егер жалған болса, jQuery textәдісі домға мазмұнды енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'жоғарғы' құралдар кеңесін қалай орналастыру керек - жоғарғы | төменгі | сол жақ | дұрыс
селектор жол жалған Егер селектор қамтамасыз етілсе, құралдар кеңесі нысандары көрсетілген мақсаттарға беріледі.
тақырып жол | функциясы '' «тақырып» тегі болмаса, әдепкі тақырып мәні
триггер жол «Меңзерді жылжыту» құралдар кеңесі қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Есіңізде болсын, өту триггерінің бірнеше еселі, бос орын бөлінген, триггер түрлері.
кешіктіру саны | объект 0

құралдар кеңесін көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { show: 500, hide: 100 }

контейнер жол | жалған жалған

Құрал кеңесін белгілі бір элементке қосадыcontainer: 'body'

Ескерту! Деректер атрибуттарын пайдалану арқылы жеке құралдар кеңестеріне арналған опцияларды балама түрде көрсетуге болады.

Белгілеу

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

Әдістері

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

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

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

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

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

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

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

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

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

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

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

.tooltip('жою')

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

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

Мысалдар

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

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

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

Попвер үсті

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.

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

Тікелей демо

Төрт бағыт


Қолданылуы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
анимация логикалық рас құралдар кеңесіне css өшіру көшуін қолданыңыз
html логикалық жалған Қалқымалы терезеге html енгізіңіз. Егер жалған болса, jQuery textәдісі домға мазмұнды енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз.
орналастыру жол | функциясы 'дұрыс' қалқымалы терезені қалай орналастыру керек - жоғарғы | төменгі | сол жақ | дұрыс
селектор жол жалған егер селектор қамтамасыз етілсе, құралдар кеңесі нысандары көрсетілген мақсаттарға беріледі
триггер жол 'басу' popover қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық
тақырып жол | функциясы '' «тақырып» төлсипаты болмаса, әдепкі тақырып мәні
мазмұны жол | функциясы '' әдепкі мазмұн мәні, егер `data-content` төлсипаты болмаса
кешіктіру саны | объект 0

қалқымалы файлды көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { show: 500, hide: 100 }

контейнер жол | жалған жалған

Қалқымалы элементті белгілі бір элементке қосадыcontainer: 'body'

Ескерту! Деректер атрибуттарын пайдалану арқылы жеке қалқандарға арналған опцияларды балама түрде көрсетуге болады.

Белгілеу

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

Әдістері

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

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

.popover('шоу')

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

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

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

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

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

.popover('қосу')

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

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

.popover('жою')

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

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

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

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

Қасиетті гуакамоле! Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз.

О, шап! Сізде қате бар!

Осыны және оны өзгертіп, әрекетті қайталаңыз. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.

Бұл әрекетті орындаңыз Немесе мұны істе


Қолданылуы

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

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

Белгілеу

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

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

Әдістері

$().alert()

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

.alert('жабу')

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

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

Оқиғалар

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

Оқиға Сипаттама
жабық closeБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
жабық Бұл оқиға ескерту жабылған кезде іске қосылады (css ауысуларының аяқталуын күтеді).
  1. $ ( '#менің ескертуім' ). байланыстыру ( 'жабық' , функция () {
  2. // бірдеңе жасау...
  3. })

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

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

Мемлекеттік

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

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

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

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

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

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

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

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

Радио

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

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

Қолданылуы

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

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

Белгілеу

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

Опциялар

Жоқ

Әдістері

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

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

Ескерту! data-toggleТөлсипатты пайдалану арқылы түймені автоматты ауыстыруды қосуға болады .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

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

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

  1. <button type = "button" class = "btn" data-loading-text = "материалдарды жүктеу..." > ... </button>
Ескерту! Firefox өшірілген күйді бет жүктемелерінде сақтайды . Бұл үшін уақытша шешім пайдалану болып табылады autocomplete="off".

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

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

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

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

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

туралы

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

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

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

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

Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптау Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптау Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптау Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, Cupidatat емес скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сыра зертханасы Вес Андерсон Cred Nesciunt Saiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
  1. <div класс = "аккордеон" id = "аккордеон2" >
  2. <div class = "аккордеон тобы" >
  3. <div class = "аккордеон тақырыбы" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Жиналатын топтық №1 элемент
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "аккордеон денесінің құлауы" >
  9. <div class = "аккордеон-ішкі" >
  10. Аним париатур клише...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "аккордеон тобы" >
  15. <div class = "аккордеон тақырыбы" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Жиналатын топтық №2 элемент
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "аккордеон-дененің құлауы" >
  21. <div class = "аккордеон-ішкі" >
  22. Аним париатур клише...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

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

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

Қолданылуы

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

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

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

JavaScript арқылы

Қолмен қосу:

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
ата-ана селектор жалған Егер селектор болса, осы жиналмалы элемент көрсетілген кезде көрсетілген тектік астындағы барлық жиналмалы элементтер жабылады. (дәстүрлі аккордеон әрекетіне ұқсас)
ауыстырып қосқыш логикалық рас Шақыру кезінде жиналатын элементті ауыстырады

Әдістері

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

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

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

.collapse('қосу')

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

.collapse('шоу')

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

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

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

Оқиғалар

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

Оқиға Сипаттама
көрсету showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген Бұл оқиға құлату элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
жасыру Бұл оқиға hideәдіс шақырылған кезде бірден іске қосылады.
жасырын Бұл оқиға құлату элементі пайдаланушыдан жасырылған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
  1. $ ( '#myCallpsible' ). қосулы ( 'жасырын' , функция () {
  2. // бірдеңе жасау...
  3. })

Мысал

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

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

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


Қолданылуы

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

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

JavaScript арқылы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
көзі массив, функция [ ] Сұрау қажет деректер көзі. Жолдар массиві немесе функция болуы мүмкін. Функцияға екі аргумент беріледі, queryенгізу өрісіндегі мән және processкері шақыру. Функция деректер көзін тікелей немесе processкері шақырудың жалғыз аргументі арқылы асинхронды түрде қайтару арқылы синхронды түрде пайдаланылуы мүмкін.
заттар саны 8 Ашылмалы тізімде көрсетілетін элементтердің максималды саны.
минҰзындығы саны 1 Автотолтыру ұсыныстарын іске қоспас бұрын қажет ең аз таңба ұзындығы
сәйкестендіргіш функциясы регистрді сезбейтін Сұрау элементке сәйкес келетінін анықтау үшін қолданылатын әдіс. itemСұрау сыналатын жалғыз дәлелді қабылдайды . Ағымдағы сұрауға арқылы қол жеткізіңіз this.query. trueЕгер сұрау сәйкес келсе , логикалық мәнді қайтарыңыз .
сұрыптаушы функциясы дәл сәйкестік,
регистрге сезімтал,
регистрге сезімтал емес
Автотолтыру нәтижелерін сұрыптау үшін қолданылатын әдіс. Жалғыз аргументті қабылдайды itemsжәне теру данасы ауқымына ие. Ағымдағы сұрауға сілтеме арқылы this.query.
жаңартушы функциясы таңдалған элементті қайтарады Таңдалған элементті қайтару үшін қолданылатын әдіс. Жалғыз аргументті қабылдайды, itemжәне мәтіні теру данасы ауқымына ие.
бөлектеуіш функциясы барлық әдепкі сәйкестіктерді бөлектейді Автотолтыру нәтижелерін бөлектеу үшін қолданылатын әдіс. Жалғыз аргументті қабылдайды itemжәне теру данасы ауқымына ие. html қайтару керек.

Әдістері

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

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

Мысал

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


Қолданылуы

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

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

  1. <div data-spy = "affiks" data-offset-top = "200" > ... </div>
Ескерту! Бекітілген элементтің орнын және оның тікелей негізгі элементінің әрекетін басқаруыңыз керек. affixПозиция , affix-topжәне арқылы басқарылады affix-bottom. Беттің қалыпты ағынынан мазмұнды жою кезінде аффикс іске қосылғанда ықтимал жиырылған ата-ананы тексеруді ұмытпаңыз.

JavaScript арқылы

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

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

Опциялар

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

Аты түрі әдепкі сипаттамасы
офсет саны | функциясы | объект 10 Айналдыру орнын есептеу кезінде экраннан ауытқуға болатын пикселдер. Жалғыз сан берілсе, ығысу жоғарғы және сол жаққа да қолданылады. Бір бағытты немесе бірнеше бірегей ығысуларды тыңдау үшін жай ғана нысанды көрсетіңіз offset: { x: 10 }. Офсетті динамикалық түрде қамтамасыз ету қажет болғанда функцияны пайдаланыңыз (кейбір жауап беретін дизайн үшін пайдалы).