JavaScript
Bootstrap компонентларын дистәдән артык махсус jQuery плагиннары белән тормышка китерегез. Аларның барысын да, бер-бер артлы кертегез.
Bootstrap компонентларын дистәдән артык махсус jQuery плагиннары белән тормышка китерегез. Аларның барысын да, бер-бер артлы кертегез.
Плагиннар индивидуаль кертелергә мөмкин (Bootstrap'ның аерым *.js
файлларын кулланып), яки берьюлы (кулланып bootstrap.js
яки минимальләштерелгән bootstrap.min.js
).
Икесендә дә bootstrap.js
һәм bootstrap.min.js
бер файлдагы барлык плагиннар бар. Берсен генә кертегез.
Кайбер плагиннар һәм CSS компонентлары бүтән плагиннарга бәйле. Әгәр дә сез плагиннарны аерым кертсәгез, бу бәйләнешләрне документларда тикшерегез. Шулай ук барлык плагиннар jQuery белән бәйле (бу jQuery плагин файллары алдыннан кертелергә тиеш дигәнне аңлата ). JQuery'ның нинди версияләре булышканын белү өчен безнең белән киңәшләшегез.bower.json
Сез барлык Bootstrap плагиннарын JavaScriptның бер сызыгын язмыйча гына маркировкалау API аша куллана аласыз. Бу Bootstrap-ның беренче класслы API һәм плагин кулланганда беренче карашыгыз булырга тиеш.
Димәк, кайбер очракларда бу функцияне сүндерергә кирәк булыр. Шуңа күрә, без шулай ук документ атрибутикасы API-ны сүндерү мөмкинлеген бирәбез, документ исемендәге барлык вакыйгаларны бәйләп data-api
. Бу шулай:
Альтернатив рәвештә, билгеле бер плагинны максат итү өчен, плагинның исемен исем киңлеге итеп кертегез, шулай ук мәгълүмат-api исем киңлеге:
Бер үк элементтагы берничә плагиннан мәгълүмат атрибутларын кулланмагыз. Мәсәлән, төймә икесенең дә корал киңәше була алмый һәм модальне алыштыра алмый. Моны тормышка ашыру өчен, төрү элементын кулланыгыз.
Без шулай ук барлык Bootstrap плагиннарын JavaScript API аша гына куллана белергә тиеш дип саныйбыз. Барлык иҗтимагый API-лар бер, чылбырлы ысуллар, һәм эшләнгән коллекцияне кире кайтаралар.
Барлык ысуллар да өстәмә вариантлар объектын, билгеле бер методка юнәлтелгән сызыкны яки бернәрсә дә кабул итмәскә тиеш (бу плагинны килешү тәртибе белән башлый):
Eachәр плагин шулай ук чимал конструкторын Constructor
милектә фаш итә : $.fn.popover.Constructor
. Әгәр дә сез билгеле бер плагин мисалын алырга телисез икән, аны турыдан-туры элементтан алыгыз : $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
Плагин объектын үзгәртеп, плагин өчен килешенгән көйләүләрне үзгәртә аласыз :
Кайвакыт Bootstrap плагиннарын башка UI рамкалары белән кулланырга кирәк. Бу шартларда вакыт-вакыт исем киңлеге бәрелешләре булырга мөмкин. .noConflict
Бу очрак булса, сез кыйммәтен кире кайтарырга теләгән плагинга шалтырата аласыз.
Bootstrap күпчелек плагиннарның уникаль эшләре өчен махсус вакыйгалар тәкъдим итә. Гадәттә, алар инфинитив һәм үткән катнашу формасында килә - монда инфинитив (мәс. show
) Вакыйга башланганда, һәм аның үткән катнашу формасы (мәс. shown
) Акция тәмамлангач башлана.
3.0.0 мәгълүматларына караганда, Bootstrap вакыйгаларының барысы да исемнәр белән урнаштырылган.
Барлык инфинитив вакыйгалар да preventDefault
функциональлек бирә. Бу эш башланганчы туктатуны мөмкинлек бирә.
Bootstrap-ның jQuery плагиннарының һәрберсенең версиясенә VERSION
плагин конструкторы милеге аша кереп була. Мәсәлән, корал плагины өчен:
JavaScript сүндерелгәндә Bootstrap плагиннары аеруча матур итеп кире кайтмыйлар. Әгәр дә сез бу очракта кулланучының тәҗрибәсе турында кайгыртасыз икән, кулланучыларга <noscript>
ситуацияне (һәм JavaScriptны ничек яңадан эшләтеп җибәрергә) аңлату өчен кулланыгыз, һәм / яки үзегезнең гадәттән тыш кимчелекләрегезне өстәгез.
Bootstrap рәсми рәвештә Прототип яки jQuery UI кебек өченче як JavaScript китапханәләрен хупламый . Вакыйгаларга һәм исемнәргә карамастан .noConflict
, яраклашу проблемалары булырга мөмкин, аларны үзегез төзәтергә кирәк.
Гади күчү эффектлары transition.js
өчен бүтән JS файллары белән бергә кертегез. Әгәр дә сез тупланган (яки минималь) кулланасыз икән, моны bootstrap.js
кертергә кирәк түгел - ул инде бар.
Transition.js - вакыйгалар өчен төп ярдәмче, transitionEnd
шулай ук CSS күчү эмуляторы. Бу бүтән плагиннар тарафыннан CSS күчү ярдәмен тикшерү һәм асылынган күчү өчен кулланыла.
Күчерелешләр түбәндәге JavaScript сниппеты ярдәмендә глобаль рәвештә инвалид булырга мөмкин, алар йөкләнгәннән соң булырга тиеш transition.js
(яки bootstrap.js
, очрак буенча):bootstrap.min.js
Модальләр тәртипкә китерелгән, ләкин сыгылмалы, минималь кирәкле функциональлек һәм акыллы дефолт белән диалог тәкъдим итә.
Икенчесе күренеп торганда, модальне ачмаска онытмагыз. Берьюлы берничә модаль күрсәтү махсус код таләп итә.
Modәрвакыт модальнең HTML кодын документыгызда иң югары дәрәҗәдәге урынга урнаштырырга тырышыгыз, модальнең тышкы кыяфәтенә һәм / яки функциясенә тәэсир итүче бүтән компонентлардан сакланыгыз.
Кәрәзле җайланмаларда модаль куллану турында кайбер саклыклар бар. Детальләр өчен безнең браузер ярдәм документларын карагыз .
HTML5 аның семантикасын ничек билгеләгәнгә, autofocus
HTML атрибутының Bootstrap модалларында бернинди тәэсире юк. Шул ук эффектка ирешү өчен, JavaScript кулланыгыз:
Башлам, тән, аста хәрәкәтләр җыелмасы белән күрсәтелгән модаль.
JavaScript аша модальне астагы төймәгә басыгыз. Ул битнең башыннан аска төшеп бетәчәк.
Модаль исемне, үзенә һәм role="dialog"
үзенә өстәп , онытмагыз .aria-labelledby="..."
.modal
role="document"
.modal-dialog
Өстәвенә, сез модаль диалогның тасвирламасын бирә aria-describedby
аласыз .modal
.
YouTube видеоларын модальләргә урнаштыру Bootstrap'та түгел, өстәмә JavaScript таләп итә, уйнауны автоматик рәвештә туктату һәм башкалар. Күбрәк мәгълүмат алу өчен бу файдалы Stack Overflow постын карагыз .
Модальләрнең ике өстәмә зурлыгы бар, модификатор класслары аша a .modal-dialog
.
Күрү өчен сүнми торган булып күренгән модальләр өчен .fade
классны модаль билгеләрегездән алып ташлагыз.
Ботстрап челтәр системасыннан файдалану өчен, модаль эчендә оя корыгыз, .row
аннары .modal-body
гадәти челтәр системасы классларын кулланыгыз.
Бераз төрле эчтәлек белән бер үк модальне эшләтеп җибәрүче төймәләр бармы? Кайсы төймәгә басылганына карап модаль эчтәлеген үзгәртү өчен HTML атрибутларын кулланыгыз event.relatedTarget
( мөгаен jQuery аша ). Төгәлрәк мәгълүмат өчен Модаль Вакыйгалар документларын карагыз ,data-*
relatedTarget
Модаль плагин сезнең яшерен эчтәлекне сорау буенча, мәгълүмат атрибутлары яки JavaScript аша алыштыра. Бу шулай ук демократик әйләндерү тәртибен кире .modal-open
кагарга өсти һәм модаль читенә чыккач күрсәтелгән модальләрне кире кагу өчен чирттерү өлкәсен тәэмин итә.<body>
.modal-backdrop
JavaScript язмыйча модальне активлаштырыгыз. data-toggle="modal"
Контроллер элементына, төймә кебек, data-target="#foo"
яисә href="#foo"
күберәк модальне максат итеп куегыз .
myModal
JavaScriptның бер сызыгы булган id белән модальгә шалтыратыгыз :
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-backdrop=""
.
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
фон | буле яки кыл'static' |
дөрес | Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, static басу вакытында модальне япмаган фонны күрсәтегез. |
клавиатура | буле | дөрес | Качу ачкычы басылганда модальне япа |
шоу | буле | дөрес | Башланганда модальне күрсәтә. |
дистанцион | юл | ялган | Бу вариант v3.3.0 елдан искергән һәм v4 бетерелгән. Моның урынына без клиент ягыннан шаблонны яки мәгълүматны бәйләүче рамканы кулланырга, яки jQuery.load шалтыратырга киңәш итәбез . Әгәр ерак URL бирелсә, эчтәлек бер тапкыр jQuery ысулы белән йөкләнәчәк һәм div-ка кертеләчәк. Әгәр дә сез мәгълүмат-апи кулланасыз икән, сез альтернатив чыганакны күрсәтү өчен атрибутны куллана аласыз. Моның мисалы түбәндә күрсәтелгән: |
.modal(options)
Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object
.
.modal('toggle')
Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modal
hidden.bs.modal
.modal('show')
Кул белән модаль ачыла. Модаль күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.modal
вакыйга булганчы).
.modal('hide')
Модальне кул белән яшерә. Модаль яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.modal
вакыйга булганчы).
.modal('handleUpdate')
Модальнең сул якка сикерүенә китерә торган очракта, әйләндерү тактасына каршы тору өчен модальнең позициясен көйләгез.
Модаль биеклеге ачык булганда үзгәргәндә генә кирәк.
Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә.
Барлык модаль вакыйгалар да модальнең үзендә (ягъни <div class="modal">
).
Вакыйга төре | Тасвирлау |
---|---|
show.bs.modal | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . Әгәр басу аркасында килеп чыкса, басылган элемент relatedTarget вакыйганың милеге булып тора. |
күрсәтелгән.bs.modal | Бу вакыйга модаль кулланучыга күренгәндә эшләнә (CSS күчү тәмамлануын көтәр). Әгәр басу аркасында килеп чыкса, басылган элемент relatedTarget вакыйганың милеге булып тора. |
hide.bs.modal | Бу вакыйга hide инстанция ысулы чакырылганнан соң җибәрелә. |
hidden.bs.modal | Бу вакыйга модаль кулланучыдан яшерелгәннән соң эшләнә (CSS күчү тәмамлануын көтәр). |
load.bs.modal | Бу вакыйга модаль remote вариантны кулланып эчтәлекне йөкләгәндә җибәрелә. |
Бу гади плагин белән тамчы менюларны өстәгез, шул исәптән диңгез тактасы, таблицалар, таблеткалар.
Мәгълүмат атрибутлары яки JavaScript аша, тамчы плагин яшерен эчтәлекне (тамчы менюларны) .open
ата-аналар исемлегендә классны алыштырып алыштыра.
Кәрәзле җайланмаларда, тамчы .dropdown-backdrop
ачылу менюдан читтә кагылганда тамчы менюларны ябу өчен кран өлкәсе булып тора, дөрес iOS ярдәме таләбе. Димәк, ачык тамчы менюдан бүтән тамчы менюга күчү мобильдә өстәмә таптауны таләп итә.
Искәрмә: data-toggle="dropdown"
атрибут кушымта дәрәҗәсендә тамчы менюларны ябу өчен таяна, шуңа күрә аны һәрвакыт куллану яхшы идея.
Ачылуны data-toggle="dropdown"
алыштыру өчен сылтамага яки төймәгә өстәгез.
URL-ны сылтама төймәләре белән саклап калу өчен, data-target
атрибутны кулланыгыз href="#"
.
JavaScript аша тамчыларга шалтыратыгыз:
data-toggle="dropdown"
һаман кирәкТамчыгызны JavaScript аша шалтыратасызмы, яисә мәгълүмат-api кулланасызмы, data-toggle="dropdown"
тамчы триггер элементында һәрвакыт булырга тиеш.
Беркем дә юк
$().dropdown('toggle')
Бирелгән диңгез тактасының тамчы менюсын яисә салынган навигацияне алыштыра.
Барлык төшү вакыйгалары ата- .dropdown-menu
аналар элементына төшерелә.
Барлык төшү вакыйгалары да бар relatedTarget
, аларның кыйммәте якорь элементы.
Вакыйга төре | Тасвирлау |
---|---|
show.bs.dropdown | Бу вакыйга шоу инстанция ысулы чакырылганда шунда ук янып тора. |
күрсәтелгән.bs.dropdown | Бу вакыйга тамчы кулланучыга күренгәч (CSS күчүен көтәр, тәмамланыр). |
hide.bs.dropdown | Бу вакыйга яшерен инстанция ысулы чакырылганнан соң җибәрелә. |
hidden.bs.dropdown | Бу вакыйга тамчы кулланучыдан яшерелгәннән соң эшләнә (CSS күчүен көтәр, тәмамланыр). |
ScrollSpy плагины әйләндерү позициясенә нигезләнеп диңгез максатларын автоматик рәвештә яңарту өчен. Диңгез тактасы астындагы мәйданны әйләндерегез һәм актив класс үзгәрүен карагыз. Ачылучы суб-әйберләр дә яктыртылачак.
Реклама легингс клавиатурасы, иртәнге аш сәнгате кичәсе долор хезмәт. Pitchfork yr enim lo-fi алар сатылганчы. Тамбль фермасы-өстәл велосипед хокуклары. Аним кефия карлес кардиган. Велит сейитан mcsweeney фото кабинасы 3 бүре ай ируры. Косби свитер ломо джин шорты, вильямсбург hoodie minim qui сез алар турында ишетмәгәнсездер, һәм кардиган ышаныч фонды culpa biodiesel wes anderson эстетик. Нихил татуировкаланган аккусамус, кредит ирония биодисель кефиех остасы улламко нәтиҗәсе.
Вениам марфа мыеклы тимераякта, фугат велит питчорк сакалын үзләштерә. Фриган сакал алико купидат мксвейни веро. Купидатат дүрт локо ниси, хельветика нулла карлес. Татуировкаланган косби свитер азык-төлек машинасы, mcsweeney викторинасы булмаган винил. Lo-fi wes anderson +1 сарториаль. Карлес эстетик булмаган күнегүләр. Бруклинда һөнәрчелек сырасы вице-кейтар дезерунты.
Occaecat commodo aliqua delectus. Сыра сырасы дезерунт тимераякта. Ломо велосипед хокуклары банх ми, велит һәм киләсе дәрәҗәдәге локавор бер чыганаклы кофе магна веньямда. Lifeгары тормыш идентификаторы винил, эхо парк нәтиҗәсендә аликип банх ми питчорк. Vero VHS бәяләү. DIY миним хәбәрче сумкасы. Iphone, тотрыклы delectus consectetur fanny pack 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.
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.
Кейтар тви блог, кулпа хәбәрче сумкасы марфа нинди генә делектус азык машинасы. Sapiente synth id assumenda. Locavore sed helvetica cliche ирония, күк күкрәү, сез алар турында ишетмәгәнсездер. Алар сатылганчы эшләгез, терри Ричардсон проидентлы иртәнге аш. Кардиган һөнәрчелек сырасы сейитан әзер велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco күк күкрәү.
Navbar сылтамаларында чишелә торган id максатлары булырга тиеш. Мәсәлән <a href="#home">home</a>
, DOM кебек нәрсәгә туры килергә тиеш <div id="home"></div>
.
:visible
элементлар санга сукмыйлар:visible
JQuery буенча булмаган максатчан элементлар санга сукмыйлар һәм аларның тиешле диңгез әйберләре беркайчан да яктыртылмаячак.
Эшләү ысулына карамастан, scrollspy position: relative;
сез шпион булган элементны куллануны таләп итә. Күпчелек очракта бу <body>
. Аннан башка элементларны әйләндереп алганда , комплектка <body>
ия булуыгызга инаныгыз .height
overflow-y: scroll;
Сезнең өстәмә навигациягә scrollspy тәртибен җиңел өстәр data-spy="scroll"
өчен, шпион булырга теләгән элементны өстәгез (гадәттә бу шулай булыр иде <body>
). Аннары ID яки теләсә нинди Bootstrap компонентының data-target
төп элементының классы белән атрибутны өстәгез..nav
CSS-ны өстәгәннән соң position: relative;
, JavaScript аша scrollspy шалтыратыгыз:
.scrollspy('refresh')
Scrollspy кулланганда DOM элементларын өстәү яки бетерү белән берлектә, яңарту ысулын шулай атарга кирәк:
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-offset=""
.
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
офсет | саны | 10 | Пиксель әйләндерү позициясен исәпләгәндә өстән офсет. |
Вакыйга төре | Тасвирлау |
---|---|
активлаштыру.bs.scrollspy | Scrollspy белән яңа әйбер активлашканда бу вакыйга янып тора. |
Localирле эчтәлек панельләре аша, хәтта тамчы менюлар аша күчү өчен тиз, динамик кыстыргыч функциясен өстәгез. Ояланган кыстыргычлар ярдәм итми.
Чим джинсы, мөгаен, алар турында джин шорты Остин турында ишетмәгәнсездер. Nesciunt tofu stumptown aliqua, ретро синт мастер чистарту. Мыек кысу температурасы, вильямсбург карлес вегетан гелветика. Репрендерит касапчы ретро кефиех хыялый синт. Косби свитер һәм бан ми, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan америка киеме, касапчы волуптат ниси кви.
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.
Бу плагин таблицалар өлкәләрен өстәү өчен өстәлгән навигация компонентын киңәйтә.
JavaScript аша таблицалар өстәлмәләрен эшләгез (һәрбер кыстыргычны аерым активлаштырырга кирәк):
Сез аерым таблицаларны берничә ысул белән активлаштыра аласыз:
Сез берәр элементны күрсәтеп data-toggle="tab"
яки JavaScript язмыйча, таблицаны яки таблетка навигациясен активлаштыра аласыз . Таблицага класслар һәм класслар data-toggle="pill"
өстәү Bootstrap салынмасын кулланачак, ә классларны өстәү таблетка стилизациясен кулланачак .nav
nav-tabs
ul
nav
nav-pills
Таблицалар бетсен өчен, .fade
һәрберсенә өстәгез .tab-pane
. Беренче кыстыргыч тактасы шулай ук .in
башлангыч эчтәлекне күренергә тиеш.
$().tab
Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада DOM контейнер төене data-target
булырга тиеш. href
Aboveгарыдагы мисалларда таблицалар - атрибутлар <a>
белән .data-toggle="tab"
.tab('show')
Бирелгән кыстыргычны сайлый һәм аның белән бәйле эчтәлекне күрсәтә. Элек сайланган бүтән кыстыргыч сайланмый һәм аның белән бәйле эчтәлек яшерелә. Таблицалар тактасы күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.tab
вакыйга булганчы).
Яңа кыстыргычны күрсәткәндә вакыйгалар түбәндәге тәртиптә янып тора:
hide.bs.tab
(хәзерге актив кыстыргычта)show.bs.tab
(күрсәтеләчәк кыстыргычта)hidden.bs.tab
hide.bs.tab
(алдагы актив кыстыргычта, вакыйга белән бер үк )shown.bs.tab
show.bs.tab
(яңа-актив гына күрсәтелгән кыстыргычта, вакыйга белән бер үк )Әгәр дә бернинди кыстыргыч актив булмаган булса, вакыйгалар hide.bs.tab
һәм hidden.bs.tab
вакыйгалар атылмаячак.
Вакыйга төре | Тасвирлау |
---|---|
show.bs.tab | Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. event.target Актив кыстыргычны һәм event.relatedTarget алдагы актив кыстыргычны кулланыгыз . |
күрсәтелгән.bs.tab | Бу вакыйга таблицаны күрсәткәннән соң таблицада күрсәтелә. event.target Актив кыстыргычны һәм event.relatedTarget алдагы актив кыстыргычны кулланыгыз . |
hide.bs.tab | Бу вакыйга яңа кыстыргыч күрсәтелергә тиеш (һәм шулай итеп алдагы актив кыстыргыч яшерелергә тиеш). event.target Хәзерге актив кыстыргычны һәм event.relatedTarget яңа тиздән актив булачак кыстыргычны кулланыгыз . |
hidden.bs.tab | Бу вакыйга яңа кыстыргыч күрсәтелгәннән соң янып тора (һәм шулай итеп алдагы актив кыстыргыч яшерелгән). Элеккеге актив кыстыргычны һәм яңа актив кыстыргычны event.target кулланыгыз .event.relatedTarget |
Джейсон Фрэм язган искиткеч jQuery.tipsy плагины белән илһамланып; Кораллар - яңартылган версия, алар рәсемнәргә таянмыйлар, анимацияләр өчен CSS3 кулланалар, һәм җирле исем саклау өчен мәгълүмат-атрибутлар.
Нуль озынлыгы булган кораллар беркайчан да күрсәтелми.
Корал киңәшләрен карау өчен түбәндәге сылтамалар өстендә йөрегез:
Киләсе дәрәҗәдәге каты чалбар , сез алар турында ишетмәгәнсездер. Фотогалерея сакал чимал деним хәрефләре вегетариан хәбәрче сумкасы. Ферма-өстәл сейитаны, mcsweeney's fixie тотрыклы квиноа 8 битлы америка киемендә терри ричардсон винил чембрей бар . Сакал боткасы, кардиганнар банх ми ломо күк күкрәү. Тофу биодизель вильямсбург марфа, дүрт локо мксвейни вегетариан камерасын чистарту. Чыннан да, ирония остасы нинди генә ачкыч, сәхнә фермасы-өстәл банкы Остин твиттеры фриган кредит чималы деним бер чыганак кофе вируслы.
Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән.
Эшчәнлек сәбәпләре аркасында, Tooltip һәм Popover data-apis оптималь, димәк сез аларны үзегез башларга тиеш .
Биттәге барлык инструментларны башлап җибәрүнең бер ысулы - аларны data-toggle
атрибутлары буенча сайлау:
Кораллар плагины таләп буенча эчтәлек һәм билгеләр чыгара, һәм триггер элементыннан соң корал күрсәтмәләрен урнаштыра.
JavaScript аша корал киңәшен эшләгез:
Корал киңәше өчен кирәкле билгеләр - бары тик data
атрибут һәм title
HTML элементында сез кораллар булырга телисез. Корал киңәшенең ясалган билгесе бик гади, ләкин ул позиция таләп итә (килешү буенча, top
плагин белән куелган).
Кайвакыт сез берничә сызыкны ураган гиперштамага корал киңәшен өстәргә телисез. Корал плагинының килешү тәртибе аны горизонталь һәм вертикаль рәвештә үзәкләштерү. white-space: nowrap;
Моны булдырмас өчен якорларыгызга өстәгез .
.btn-group
A яки ан эчендәге элементларга, яисә өстәл белән бәйле элементларга (,,,,) кораллар кулланганда , кирәкмәгән .input-group
начар <td>
эффектлардан саклану <th>
өчен вариантны күрсәтергә кирәк (мәсәлән, элемент киңәя бара һәм / яисә кораллар очрагы түгәрәк почмакларын югалту).<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
Клавиатура белән йөргән кулланучылар, һәм аеруча ярдәмче технологияләрне кулланучылар өчен, сез клавиатура фокуслы элементларга сылтамалар, форма контроле яки tabindex="0"
атрибутлы теләсә нинди элемент кебек корал киңәшләрен өстәргә тиеш.
disabled
Корал киңәшен яки элементка өстәр өчен .disabled
, элементны a эченә <div>
куегыз һәм аның урынына инструментыгызны кулланыгыз <div>
.
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-animation=""
.
Исем | Тип | Килешү | Тасвирлау |
---|---|---|---|
анимация | буле | дөрес | Кораллар киңәшенә CSS сүнгән күчүне кулланыгыз |
контейнер | кыл | ялган | ялган | Корал киңәшен билгеле бер элементка өсти. Мисал : |
тоткарлау | саны | объект | 0 | Корал күрсәтмәсен (мс) күрсәтү һәм яшерү - кул белән эшләнгән триггер төренә кагылмый Әгәр сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла Объект структурасы: |
html | буле | ялган | HTML корал инструментына кертегез. Ялган булса, jQuery text ысулы DOMга эчтәлек кертү өчен кулланылачак. XSS һөҗүмнәре турында борчылсагыз, текст кулланыгыз. |
урнаштыру | кыл | функциясе | 'top' | Корал киңәшен ничек урнаштырырга - өстә | аста | сул | уң | автомобиль. Урнаштыруны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак DOM төен кораллары, икенчесе буларак DOM төенен җибәрү элементы дип атала. |
селектор | кыл | ялган | Әгәр дә селектор тәкъдим ителсә, кораллы объектлар күрсәтелгән максатларга биреләчәк. Практикада, бу динамик HTML эчтәлеген инструментлар өстәү өчен кулланыла. Моны һәм информацион мисалны карагыз . |
шаблон | кыл | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Кораллар ясаганда куллану өчен HTML нигезе. Кораллар
Тышкы төрү элементы |
исем | кыл | функциясе | '' |
Әгәр дә функция бирелсә, ул |
триггер | кыл | 'фокусны әйләндерү' | Кораллар ничек эшләнә - басыгыз | | фокус | кулланма. Сез берничә триггер узарга мөмкин; аларны бушлык белән аерыгыз. manual бүтән триггер белән берләштереп булмый. |
күренеш | кыл | объект | функциясе | {селектор: 'тән', ябыштыру: 0} | Корал киңәшен бу элемент чикләрендә саклый. Мисал: Әгәр дә функция бирелсә, ул бердәнбер аргумент буларак DOM төененең этәргеч элементы белән атала. |
Индивидуаль кораллар өчен вариантлар, югарыда аңлатылганча, мәгълүмат атрибутлары ярдәмендә альтернатив рәвештә күрсәтелергә мөмкин.
$().tooltip(options)
Элемент коллекциясенә инструменты эшкәртүчене бәйли.
.tooltip('show')
Элемент коралын күрсәтә. Корал киңәше күрсәтелгәнче (ягъни shown.bs.tooltip
вакыйга булганчы) шалтыратучыга кире кайта. Бу инструменты "кул белән" этәргеч булып санала. Нуль озынлыгы булган кораллар беркайчан да күрсәтелми.
.tooltip('hide')
Элемент коралын яшерә. Корал киңәше яшерелгәнче (ягъни hidden.bs.tooltip
вакыйга булганчы) шалтыратучыга кире кайта. Бу инструменты "кул белән" этәргеч булып санала.
.tooltip('toggle')
Элементның инструменты. Корал киңәше күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта. Бу инструменты "кул белән" этәргеч булып санала.shown.bs.tooltip
hidden.bs.tooltip
.tooltip('destroy')
Элемент коралын яшерә һәм юк итә. Делегацияне кулланган кораллар ( вариант ярдәмендә ясалганselector
) нәсел триггер элементларында аерым юк ителми.
Вакыйга төре | Тасвирлау |
---|---|
show.bs.tooltip | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
күрсәтелгән.bs.tooltip | Бу вакыйга инструмент киңәше кулланучыга күренгәндә эшләнә (CSS күчү тәмамлануын көтә). |
hide.bs.tooltip | Бу вакыйга hide инстанция ысулы чакырылганнан соң җибәрелә. |
hidden.bs.tooltip | Бу вакыйга корал инструменты кулланучыдан яшерелгәннән соң (CSS күчү тәмамлануын көтеп торачак). |
insert.bs.tooltip | Бу вакыйга show.bs.tooltip DOMга кораллар шаблоны өстәлгәннән соң җибәрелә. |
Икенчел информация өчен теләсә нинди элементка, iPadдагы кебек, кечкенә эчтәлекне өстәгез.
Поповерларның исеме дә, эчтәлеге дә нуль озынлыгында күрсәтелми.
Поповерлар кораллар плагинын сезнең Bootstrap версиясенә кертүне таләп итәләр.
Эшчәнлек сәбәпләре аркасында, Tooltip һәм Popover data-apis оптималь, димәк сез аларны үзегез башларга тиеш .
Биттәге барлык поповерларны башлап җибәрүнең бер ысулы - аларны data-toggle
атрибутлары буенча сайлау:
.btn-group
А яки ан эчендәге элементларга, яисә өстәл белән бәйле элементларга (,,,,) кулланганда , .input-group
кирәкмәгән <td>
начар эффектлардан <th>
саклану өчен (түбәндә документлаштырылган) вариантны күрсәтергә туры киләчәк (мәсәлән, элемент киңәя бара һәм / яисә поповер башлангач түгәрәк почмакларын югалту).<tr>
<thead>
<tbody>
<tfoot>
container: 'body'
disabled
А яки элементка поповер өстәү өчен .disabled
, элементны а эченә <div>
куегыз һәм аның урынына поповерны кулланыгыз <div>
.
Кайвакыт сез берничә сызыкны ураган гиперштамага поповер өстәргә телисез. Поп-плагинның килешү тәртибе аны горизонталь һәм вертикаль рәвештә үзәкләштерү. white-space: nowrap;
Моны булдырмас өчен якорларыгызга өстәгез .
Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән.
Лобортиста посуер консексетуры. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Лобортиста посуер консексетуры. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Лобортиста посуер консексетуры. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Лобортиста посуер консексетуры. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
focus
Кулланучының ясаган чираттагы басуында поповерларны җибәрү өчен триггер кулланыгыз .
Дөрес кросс-браузер һәм платформа тәртибе өчен сез тегны түгел , ә <a>
тегны кулланырга тиеш, һәм сез шулай ук атрибутларны кертергә тиеш.<button>
role="button"
tabindex
JavaScript аша поповерларны рөхсәт итегез:
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-animation=""
.
Исем | Тип | Килешү | Тасвирлау |
---|---|---|---|
анимация | буле | дөрес | Поповерга CSS сүнгән күчүне кулланыгыз |
контейнер | кыл | ялган | ялган | Поповерны билгеле бер элементка өсти. Мисал : |
эчтәлеге | кыл | функциясе | '' |
Әгәр дә функция бирелсә, ул |
тоткарлау | саны | объект | 0 | Поповерны күрсәтү һәм яшерү (мс) - кул белән эшләнгән триггер төренә кагылмый Әгәр сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла Объект структурасы: |
html | буле | ялган | Поповерга HTML кертү. Ялган булса, jQuery text ысулы DOMга эчтәлек кертү өчен кулланылачак. XSS һөҗүмнәре турында борчылсагыз, текст кулланыгыз. |
урнаштыру | кыл | функциясе | 'дөрес' | Поповерны ничек урнаштырырга - өстә | аста | сул | уң | автомобиль. Урнаштыруны билгеләү өчен функция кулланылганда, ул беренче аргумент буларак поповер DOM төене белән, икенчесе буларак DOM төен элементы дип атала. |
селектор | кыл | ялган | Әгәр селектор тәкъдим ителсә, поповер объектлары күрсәтелгән максатларга биреләчәк. Практикада, бу динамик HTML эчтәлеген поповерлар өстәү өчен кулланыла. Моны һәм информацион мисалны карагыз . |
шаблон | кыл | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Поповер ясаганда куллану өчен HTML нигезе. Поповерның Поповерның
Тышкы төрү элементы |
исем | кыл | функциясе | '' |
Әгәр дә функция бирелсә, ул |
триггер | кыл | 'басыгыз' | Поповер ничек башлана - басыгыз | | фокус | кулланма. Сез берничә триггер узарга мөмкин; аларны бушлык белән аерыгыз. manual бүтән триггер белән берләштереп булмый. |
күренеш | кыл | объект | функциясе | {селектор: 'тән', ябыштыру: 0} | Поповерны бу элемент чикләрендә саклый. Мисал: Әгәр дә функция бирелсә, ул бердәнбер аргумент буларак DOM төененең этәргеч элементы белән атала. |
Индивидуаль поповерлар өчен вариантлар, өстә аңлатылганча, мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.
$().popover(options)
Элемент җыю өчен поповерларны башлый.
.popover('show')
Элементның поповерын күрсәтә. Чакыручыга поповер күрсәтелгәнче кире кайта (ягъни shown.bs.popover
вакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала. Поповерларның исеме дә, эчтәлеге дә нуль озынлыгында күрсәтелми.
.popover('hide')
Элементның поповерын яшерә. Чакыручыга поповер яшерелгәнче кире кайта (ягъни hidden.bs.popover
вакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала.
.popover('toggle')
Элементның поповерын алыштыра. Чакыручыга поповер күрсәтелгәнче яки яшерелгәнче кире кайтаshown.bs.popover
( ягъни hidden.bs.popover
вакыйга булганчы). Бу поповерның "кул белән" этәргеч булып санала.
.popover('destroy')
Элементның поповерын яшерә һәм юк итә. Делегацияне кулланган поповерлар ( вариант ярдәмендә ясалган )selector
нәсел триггер элементларында аерым юк ителми.
Вакыйга төре | Тасвирлау |
---|---|
show.bs.popover | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
күрсәтелгән.bs.popover | Бу вакыйга кулланучыга күренгәннән соң (CSS күчү тәмамлануын көтеп торачак). |
hide.bs.popover | Бу вакыйга hide инстанция ысулы чакырылганнан соң җибәрелә. |
hidden.bs.popover | Бу вакыйга поповер кулланучыдан яшерелгәннән соң җибәрелә (CSS күчү тәмамлануын көтәр). |
insert.bs.popover | Бу вакыйга show.bs.popover DOMга поповер шаблоны өстәлгәннән соң җибәрелә. |
Бу плагин белән барлык уяу хәбәрләргә эштән җибәрү функциясен өстәгез.
Кнопка кулланганда .close
, ул беренче баласы булырга тиеш, .alert-dismissible
һәм билгеле бер текст эчтәлеге аның алдына чыга алмый.
Бу һәм теге үзгәртегез һәм кабатлап карагыз. Дуис моллис, коммерция булмаган луктус, портитор лигула, lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum утыра.
Якын data-dismiss="alert"
функцияне автоматик рәвештә бирү өчен, ябык төймәгә өстәгез. Сигнализацияне ябу аны DOMдан бетерә.
Ябылганда сезнең хәбәрләр анимация куллану өчен, аларда класслар .fade
һәм .in
класслар барлыгына инаныгыз.
$().alert()
data-dismiss="alert"
Атрибутка ия булган нәсел элементларындагы вакыйгаларны басу өчен уяу тыңлый . (Data-api-ның авто-инициализациясен кулланганда кирәк түгел.)
$().alert('close')
DOM-тан алып, кисәтүне япа. Әгәр дә .fade
элементта .in
класслар булса, кисәтү бетерелгәнче юкка чыгачак.
Bootstrap-ның уяу плагины уяу функциягә керү өчен берничә вакыйганы фаш итә.
Вакыйга төре | Тасвирлау |
---|---|
close.bs.alert | close Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
ябык | Бу вакыйга сигнализация ябылганда эшләнә (CSS күчү тәмамлануын көтәр). |
Кнопкалар белән күбрәк эшләгез. Контроль төймә кораллар плитәсе кебек компонентлар өчен төймәләр төркемнәрен күрсәтә.
Firefox бит йөкләре аша контроль халәтләрне (инвалидлык һәм тикшерү) дәвам итә . Моның өчен эш autocomplete="off"
. Мозилла хата # 654072 карагыз .
data-loading-text="Loading..."
Кнопкага йөкләү халәтен куллану өчен өстәгез .
Бу үзенчәлек v3.3.5 елдан искергән һәм v4 бетерелгән.
Бу демонстрация өчен без кулланабыз data-loading-text
һәм кулланабыз $().button('loading')
, ләкин бу сез куллана алган бердәнбер дәүләт түгел. Түбәндә $().button(string)
документларны карагыз .
data-toggle="button"
Бер төймәгә күчүне активлаштыру өчен өстәгез .
.active
һәмaria-pressed="true"
Алдан алыштырылган төймәләр өчен сез .active
классны һәм aria-pressed="true"
атрибутны button
үзегезгә өстәргә тиеш.
Тиешле стильдә күчү мөмкинлеген кертү өчен, тартмага яки радио керемнәренә өстәгез data-toggle="buttons"
..btn-group
.active
Сайланган вариантлар өчен сез .active
классны кертүгә label
үзегез өстәргә тиеш.
Әгәр дә төймә төймәсенең тикшерелгән торышы төймәгә берәр вакыйганы атмыйча яңартылса click
(мәсәлән , кертү мөлкәтен <input type="reset">
көйләү аша checked
), сезгә .active
классны кертүдә label
үзегез алыштырырга кирәк.
$().button('toggle')
Күчереп тору. Кнопкага активлашкан кыяфәт бирә.
$().button('reset')
Кнопка халәтен үзгәртә - текстны оригиналь текстка алыштыра. Бу ысул асинхрон һәм яңадан урнаштыру тәмамланганчы кайта.
$().button(string)
Текстны билгеләнгән теләсә нинди мәгълүматка алыштыра.
Easyиңел тәртип өчен берничә класс куллана торган сыгылмалы плагин.
Apseимерелү плагинның Bootstrap версиясенә кертелүен таләп итә.
Класс үзгәртүләре аша бүтән элементны күрсәтү һәм яшерү өчен астагы төймәләргә басыгыз:
.collapse
эчтәлекне яшерә.collapsing
күчү вакытында кулланыла.collapse.in
эчтәлек күрсәтәСез атрибут белән сылтама href
, яки атрибутлы төймә куллана аласыз data-target
. Ике очракта data-toggle="collapse"
да таләп ителә.
Панель компоненты белән аккордеон булдыру өчен, килешү җимерелү тәртибен киңәйтегез.
.panel-body
S белән s -ны алыштырырга да мөмкин .list-group
.
aria-expanded
Контроль элементка өстәргә онытмагыз . Бу атрибут укучыларны һәм охшаш ярдәмче технологияләрне экранга чыгару өчен җимерелә торган элементның хәзерге торышын ачык итеп билгели. Әгәр җимерелә торган элемент килешү буенча ябылса, аның кыйммәте булырга тиеш aria-expanded="false"
. Әгәр дә син җимерелә торган элементны in
класс ярдәмендә килешү буенча ачык итеп куйсаң, aria-expanded="true"
аның урынына контрольгә куй. Плагин бу атрибутны автоматик рәвештә алыштырачак, җимерелә торган элемент ачылган яки ябылган.
Өстәвенә, сезнең контроль элемент бер җимерелә торган элементны максат итә икән - ягъни data-target
атрибут id
селекторга күрсәтә - сез aria-controls
контроль элементына өстәмә атрибут өсти аласыз id
, җимерелә торган элементны үз эченә ала. Заманча экран укучылары һәм охшаш ярдәмче технологияләр бу атрибутны кулланучыларга җимерелә торган элементның үзенә юнәлтү өчен өстәмә кыска юллар белән тәэмин итү өчен кулланалар.
Apseимерелү плагины авыр күтәрү өчен берничә класс куллана:
.collapse
эчтәлекне яшерә.collapse.in
эчтәлеген күрсәтә.collapsing
күчү башлангач өстәлә, беткәч бетереләБу классларны табып була component-animations.less
.
Aимерелә торган элемент белән идарә итүне автоматик рәвештә билгеләү өчен элементка data-toggle="collapse"
һәм а өстәгез. Атрибут җимерелүне куллану өчен CSS селекторын кабул итә data-target
. data-target
Классны collapse
җимерелә торган элементка өстәргә онытмагыз. Килешү буенча ачыласыгыз килсә, өстәмә класс өстәгез in
.
Accимерелә торган контрольгә аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез data-parent="#selector"
. Моны эштә күрү өчен демога мөрәҗәгать итегез.
Кул белән эшләгез:
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-parent=""
.
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
ата-ана | селектор | ялган | Әгәр дә селектор тәэмин ителсә, бу җимерелә торган әйбер күрсәтелгәндә күрсәтелгән ата-аналар астында барлык җимерелә торган элементлар ябылачак. (традицион аккордеон тәртибенә охшаган - бу panel класска бәйле) |
күчү | буле | дөрес | Чакырыла торган элементны алыштыра |
.collapse(options)
Эчтәлекне җимерелә торган элемент буларак активлаштыра. Өстәмә вариантларны кабул итә object
.
.collapse('toggle')
Collимерелә торган элементны күрсәтә яки яшерә. Apsимерелә торган элемент чынбарлыкта күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.collapse
hidden.bs.collapse
.collapse('show')
Apsимерелә торган элементны күрсәтә. Apsимерелә торган элемент чынбарлыкта күрсәтелгәнче (ягъни shown.bs.collapse
вакыйга булганчы) шалтыратучыга кире кайта.
.collapse('hide')
Apsимерелә торган элементны яшерә. Apsимерелә торган элемент яшерелгәнче шалтыратучыга кире кайта (ягъни алданhidden.bs.collapse
вакыйга булганчы) шалтыратучыга кире кайта.
Bootstrap-ның җимерелү классы җимерелү функциясенә кушылу өчен берничә вакыйганы фаш итә.
Вакыйга төре | Тасвирлау |
---|---|
show.bs.collapse | show Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора . |
күрсәтелгән.bs.collapse | Бу вакыйга кулланучыга җимерелгән элемент күренгәндә эшләнә (CSS күчү тәмамлануын көтәр). |
hide.bs.collapse | Бу вакыйга hide метод чакырылганнан соң ук җибәрелә. |
hidden.bs.collapse | Бу вакыйга кулланучының таркалу элементы яшерелгәндә эшләнә (CSS күчү тәмамлануын көтәр). |
Карусель кебек элементлар аша велосипед өчен слайдшоу компоненты. Ояланган карусельләр булышмый.
Карусель компоненты, гадәттә, мөмкинлек стандартларына туры килми. Әгәр дә сез туры килергә тиеш булсагыз, зинһар, эчтәлекне тәкъдим итүнең башка вариантларын карагыз.
Bootstrap анимацияләре өчен CSS3 куллана, ләкин Internet Explorer 8 & 9 кирәкле CSS үзлекләрен хупламый. Шулай итеп, бу браузерларны кулланганда слайдка күчү анимацияләре юк. Без белә торып күчү өчен jQuery нигезендәге кимчелекләрне кертмәскә булдык.
.active
Классны слайдларның берсенә өстәргә кирәк . Otherwiseгыйсә, карусель күренмәячәк.
Контроль .glyphicon .glyphicon-chevron-left
өчен .glyphicon .glyphicon-chevron-right
класслар кирәк түгел. Bootstrap гади уникод альтернативасы булып тора .icon-prev
..icon-next
Слайдларга .carousel-caption
теләсә нинди элемент белән җиңел языгыз .item
. Анда теләсә нинди өстәмә HTML урнаштырыгыз, ул автоматик рәвештә тигезләнәчәк һәм форматланачак.
Карусельләр дөрес эшләсен өчен id
, тышкы контейнерда ( ) куллануны таләп итәләр . .carousel
Берничә карусель өстәгәндә, яки карусельне алыштырганда id
, тиешле контрольне яңартырга онытмагыз.
Карусель торышын җиңел контрольдә тоту өчен мәгълүмат атрибутларын кулланыгыз. data-slide
ачкыч сүзләрне кабул итә prev
яки next
слайд позициясен хәзерге торышына үзгәртә. Альтернатив рәвештә, слайд позициясен data-slide-to
карусельгә күчерү өчен кулланыгыз data-slide-to="2"
, ул слайд позициясен билгеле индекска күчерә0
.
data-ride="carousel"
Атрибут карусельне бит йөгеннән башлап җанландыручы итеп билгеләр өчен кулланыла . Аны шул ук карусельнең JavaScript инициализациясе белән (артык һәм кирәксез) ачык кулланып булмый.
Карусель белән кул белән шалтыратыгыз:
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-interval=""
.
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
интервал | саны | 5000 | Автоматик велосипедта велосипедта тоткарлану вакыты. Ялган булса, карусель автоматик рәвештә әйләнмәячәк. |
пауза | кыл | нуль | "каер" | "hover" Карусель велосипедын туктатып, карусель mouseenter велосипедын дәвам итә mouseleave . null Карусель өстендә йөрү аны туктатмас . |
төрү | буле | дөрес | Карусель өзлексез әйләнергә тиешме яки каты тукталышларга ияме. |
клавиатура | буле | дөрес | Карусель клавиатура вакыйгаларына реакция бирергә тиешме. |
.carousel(options)
Карусельне өстәмә вариантлар object
белән башлый һәм әйберләр аша велосипедта йөри башлый.
.carousel('cycle')
Сулдан уңга карусель әйберләре аша цикллар.
.carousel('pause')
Карусельне велосипедта әйберләр аша туктата.
.carousel(number)
Карусельне билгеле бер рамкага әйләндерә (0 нигезендә, массивга охшаган).
.carousel('prev')
Алдагы пунктка цикллар.
.carousel('next')
Киләсе пунктка цикллар.
Bootstrap карусель классы карусель функциясенә керү өчен ике вакыйганы фаш итә.
Ике вакыйганың да түбәндәге өстәмә үзенчәлекләре бар:
direction
: Карусель сикергән юнәлеш (я "left"
) "right"
.relatedTarget
: Актив әйбер буларак урынга сузылган DOM элементы.Барлык карусель вакыйгалары карусельнең үзенә (ягъни <div class="carousel">
).
Вакыйга төре | Тасвирлау |
---|---|
слайд.bs.carousel | slide Бу вакыйга инстанция ысулы кулланылгач шунда ук янып тора . |
slid.bs.carousel | Бу вакыйга карусель слайдка күчүне тәмамлагач атыла. |
Аффикс плагин кабызыла position: fixed;
һәм ябыла, табылган эффектны охшатып position: sticky;
. Уң яктагы субнавигация - аффикс плагинының тере демо.
Аффикс плагинын мәгълүмат атрибутлары аша яки үзегезнең JavaScript ярдәмендә кулланыгыз.Ике очракта да сез урнаштырылган эчтәлекнең урнашуы һәм киңлеге өчен CSS бирергә тиеш.
Искәрмә: аффикс плагинын чагыштырмача урнашкан элементтагы элементта кулланмагыз, мәсәлән, Safari рендеринг хата аркасында тартылган яки этәрелгән багана кебек .
Аффикс плагин өч класс арасында күчә, һәрберсе билгеле бер халәтне күрсәтә: .affix
,, .affix-top
һәм .affix-bottom
. Сез стильләрне бирергә тиеш, моннан кала, position: fixed;
бу .affix
класслар өчен үзегез (бу плагиннан бәйсез) фактик позицияләрне эшкәртү өчен.
Менә аффикс плагины ничек эшли:
.affix-top
элементның иң югары позициядә булуын күрсәтә. Бу вакытта CSS позициясе кирәк түгел..affix
алыштыралар .affix-top
һәм урнаштыралар position: fixed;
(Bootstrap's CSS белән тәэмин ителгән)..affix
кирәк .affix-bottom
. Офсет факультатив булганлыктан, берсен көйләү сезгә тиешле CSS куярга тиеш. Бу очракта position: absolute;
кирәк булганда өстәгез. Плагин элементны кая куярга икәнен ачыклау өчен мәгълүмат атрибутын яки JavaScript параметрын куллана.CSS-ны түбәндәге куллану вариантлары өчен урнаштыру өчен югарыдагы адымнарны үтәгез.
Теләсә нинди элементка аффикс тәртибен җиңел өстәр data-spy="affix"
өчен, шпион булырга теләгән элементка өстәгез. Элементны кадаклауны кайчан билгеләү өчен офсет кулланыгыз.
JavaScript аша аффикс плагинына шалтыратыгыз:
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-
өстәгез data-offset-top="200"
.
Исем | тибы | Килешү | тасвирлау |
---|---|---|---|
офсет | саны | функция | объект | 10 | Пиксель әйләндерү позициясен исәпләгәндә экраннан офсетка. Әгәр бер сан бирелсә, офсет өске һәм аскы юнәлештә кулланылачак. offset: { top: 10 } Уникаль, аскы һәм өске офсет белән тәэмин итү өчен объектны гына бирегез offset: { top: 10, bottom: 5 } . Офсетны динамик рәвештә исәпләргә кирәк булганда функция кулланыгыз. |
максат | селектор | төен | jQuery элементы | window объект _ |
Аффиксның максат элементын күрсәтә. |
.affix(options)
Сезнең эчтәлекне кушылган эчтәлек итеп активлаштыра. Өстәмә вариантларны кабул итә object
.
.affix('checkPosition')
Аффиксның торышын тиешле элементларның үлчәмнәренә, позициясенә һәм әйләндерү позициясенә карап кабатлый. .affix
,, .affix-top
Һәм класслар яңа халәт буенча .affix-bottom
кушылган эчтәлеккә өстәлә яки бетерелә. Аффиксланган эчтәлекнең дөрес урнашуын тәэмин итү өчен, бу ысул кушылган эчтәлекнең үлчәмнәре яки максат элементы үзгәргәндә чакырылырга тиеш.
Bootstrap аффикс плагины аффикс функциясенә кушылу өчен берничә вакыйганы фаш итә.
Вакыйга төре | Тасвирлау |
---|---|
affix.bs.affix | Бу вакыйга элемент кушылганчы ук янып тора. |
affixed.bs.affix | Бу вакыйга элемент кушылганнан соң җибәрелә. |
affix-top.bs.affix | Бу вакыйга элемент өстенә куелганчы ук янып тора. |
affixed-top.bs.affix | Бу вакыйга элемент өстенә куелганнан соң җибәрелә. |
affix-bottom.bs.affix | Бу вакыйга элемент астына куелганчы ук янып тора. |
affixed-bottom.bs.affix | Бу вакыйга элемент астына куелганнан соң җибәрелә. |