JavaScript
Бо зиёда аз даҳҳо плагинҳои фармоишии jQuery ҷузъҳои Bootstrap-ро ба ҳаёт оред. Ба осонӣ ҳамаи онҳоро ё як ба як дохил кунед.
Бо зиёда аз даҳҳо плагинҳои фармоишии jQuery ҷузъҳои Bootstrap-ро ба ҳаёт оред. Ба осонӣ ҳамаи онҳоро ё як ба як дохил кунед.
Васлкунакҳо метавонанд ба таври инфиродӣ (бо истифода аз *.js
файлҳои инфиродии Bootstrap) ё ҳама якбора (бо истифода bootstrap.js
ё хурдтар bootstrap.min.js
) дохил карда шаванд.
Ҳарду bootstrap.js
ва bootstrap.min.js
дорои ҳамаи плагинҳо дар як файл. Танҳо якро дохил кунед.
Баъзе плагинҳо ва ҷузъҳои CSS аз плагинҳои дигар вобастаанд. Агар шумо плагинҳоро ба таври инфиродӣ дохил кунед, боварӣ ҳосил кунед, ки ин вобастагиҳоро дар ҳуҷҷатҳо тафтиш кунед. Инчунин қайд кунед, ки ҳама плагинҳо аз jQuery вобастаанд (ин маънои онро дорад, ки jQuery бояд пеш аз файлҳои плагин дохил карда шавад). Ба моbower.json
муроҷиат кунед, то бубинед, ки кадом версияҳои jQuery дастгирӣ мешаванд.
Шумо метавонед ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API-и аломатгузорӣ бидуни навиштани як сатри JavaScript истифода баред. Ин API-и дараҷаи якуми Bootstrap аст ва ҳангоми истифодаи плагин бояд аввалиндараҷаи шумо бошад.
Гуфта мешавад, ки дар баъзе ҳолатҳо хомӯш кардани ин функсия матлуб аст. Аз ин рӯ, мо инчунин қобилияти ғайрифаъол кардани атрибути додаҳои API-ро бо роҳи қатъ кардани ҳама рӯйдодҳои ҳуҷҷат дар фазои номҳо таъмин мекунем data-api
. Ин чунин менамояд:
Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:
Атрибутҳои маълумотро аз плагинҳои сершумор дар як элемент истифода набаред. Масалан, тугма наметавонад ҳам нӯги асбоб дошта бошад ва ҳам модальро иваз кунад. Барои анҷом додани ин, як унсури печонидашударо истифода баред.
Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама API-ҳои ҷамъиятӣ усулҳои ягона ва занҷирӣ мебошанд ва коллексияи мувофиқи амалро бармегардонанд.
Ҳама усулҳо бояд объекти опсияҳои ихтиёрӣ, сатре, ки усули мушаххасро ҳадаф қарор медиҳанд ё ҳеҷ чиз (ки плагинро бо рафтори пешфарз оғоз мекунад) қабул кунанд:
Ҳар як плагин инчунин конструктори хоми худро дар Constructor
моликият фош мекунад: $.fn.popover.Constructor
. Агар шумо хоҳед, ки як мисоли мушаххаси плагинро ба даст оред, онро мустақиман аз элемент дарёфт кунед: $('[rel="popover"]').data('popover')
.
Шумо метавонед танзимоти пешфарзии плагинро тавассути тағир додани Constructor.DEFAULTS
объекти плагин тағир диҳед:
Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflict
ба плагин занг занед, ки мехоҳед арзиши онро баргардонед.
Bootstrap рӯйдодҳои фармоиширо барои амалҳои беназири аксари плагинҳо таъмин мекунад. Одатан, инҳо дар шакли пасванд ва замони гузашта меоянд - дар он ҷо масдар (масалан show
) дар оғози ҳодиса ва шакли пасванди он (масалан shown
) дар анҷоми амал ба вуҷуд меояд.
Аз 3.0.0, ҳама рӯйдодҳои Bootstrap фазои ном доранд.
Ҳама рӯйдодҳои инфинитивӣ preventDefault
функсияро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед.
Ба версияи ҳар як плагинҳои jQuery Bootstrap тавассути VERSION
моликияти созандаи плагин дастрас шудан мумкин аст. Масалан, барои плагини асбобҳо:
Васлкунакҳои Bootstrap ҳангоми хомӯш кардани JavaScript ба таври возеҳ намеафтанд. Агар шумо дар бораи таҷрибаи корбар дар ин ҳолат ғамхорӣ кунед, <noscript>
барои шарҳ додани вазъият (ва чӣ гуна JavaScript-ро аз нав фаъол кардан) ба корбарони худ истифода баред ва/ё нусхаҳои фармоишии худро илова кунед.
Bootstrap расман китобхонаҳои JavaScript-и тарафи сеюмро ба монанди Prototype ё jQuery UI дастгирӣ намекунад. Сарфи назар аз .noConflict
рӯйдодҳо ва фазои ном, метавонад мушкилоти мутобиқат дошта бошад, ки шумо бояд мустақилона ислоҳ кунед.
Барои эффектҳои гузариши оддӣ, transition.js
як маротиба дар паҳлӯи дигар файлҳои JS дохил кунед. Агар шумо компилятсионӣ (ё хурдтар) -ро истифода баред bootstrap.js
, лозим нест, ки онро дохил кунед - он аллакай вуҷуд дорад.
Transition.js як ёвари асосӣ барои transitionEnd
рӯйдодҳо ва инчунин эмулятори гузариш CSS мебошад. Он аз ҷониби плагинҳои дигар барои тафтиши дастгирии гузариш CSS ва гирифтани гузариши овезон истифода мешавад.
Гузаришҳоро бо истифода аз порчаи зерини JavaScript дар саросари ҷаҳон ғайрифаъол кардан мумкин аст, ки он бояд пас аз боркунӣ transition.js
(ё bootstrap.js
ё bootstrap.min.js
мувофиқи ҳолат) ворид шавад:
Модалҳо соддашуда, вале чандир, дархостҳои муколама бо ҳадди ақали функсияҳои зарурӣ ва пешфарзҳои оқилона мебошанд.
Боварӣ ҳосил кунед, ки модальро дар ҳоле ки дигараш ҳанӯз намоён аст, накушед. Намоиши зиёда аз як модаль дар як вақт рамзи фармоиширо талаб мекунад.
Ҳамеша кӯшиш кунед, ки коди HTML-и модальро дар як мавқеи боло дар ҳуҷҷати худ ҷойгир кунед, то ҷузъҳои дигареро, ки ба намуди зоҳирӣ ва/ё функсияи модал таъсир мерасонанд, пешгирӣ кунед.
Дар мавриди истифодаи модальҳо дар дастгоҳҳои мобилӣ баъзе огоҳиҳо мавҷуданд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред.
Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, autofocus
атрибути HTML дар модальҳои Bootstrap ҳеҷ гуна таъсире надорад. Барои ноил шудан ба ҳамон таъсир, якчанд JavaScript-и фармоиширо истифода баред:
Модали намоишшуда бо сарлавҳа, бадан ва маҷмӯи амалҳо дар поён.
Модалро тавассути JavaScript бо пахш кардани тугмаи зер иваз кунед. Он аз болои саҳифа ба поён ҳаракат мекунад ва пажмурда мешавад.
Ҳатман илова кунед role="dialog"
ва aria-labelledby="..."
бо истинод ба унвони модалӣ ба .modal
, ва role="document"
ба .modal-dialog
худи.
Илова бар ин, шумо метавонед тавсифи муколамаи модалии худро бо aria-describedby
on .modal
.
Ҷойгиркунии видеоҳои YouTube дар модальҳо JavaScript-и иловагиро талаб мекунад, ки на дар Bootstrap барои худкор қатъ кардани бозиҳо ва ғайра. Барои маълумоти бештар ба ин пости муфиди Stack Overflow нигаред.
Модалҳо ду андозаи ихтиёрӣ доранд, ки тавассути синфҳои тағирдиҳанда барои ҷойгир кардани .modal-dialog
.
Барои модальҳое, ки ба ҷои он ки барои дидан пажмурда шаванд, пайдо мешаванд, .fade
синфро аз аломатгузории модалии худ хориҷ кунед.
Барои истифодаи бартарии системаи шабакаи Bootstrap дар як мод, танҳо .row
дар дохили лона ҷойгир кунед .modal-body
ва сипас синфҳои муқаррарии системаи шабакаро истифода баред.
Оё як даста тугмаҳо доред, ки ҳамаашон як модальро ба вуҷуд меоранд, танҳо бо мундариҷаи каме гуногун? Аттрибутҳо event.relatedTarget
ва HTML - data-*
ро (эҳтимолан тавассути jQuery ) истифода баред, то мундариҷаи модалро вобаста ба он ки тугмача пахш карда шудааст, тағир диҳед. Барои тафсилот ба ҳуҷҷатҳои рӯйдодҳои модалӣ нигаред relatedTarget
,
Васлкунаки модалӣ мундариҷаи пинҳонии шуморо бо дархост тавассути атрибутҳои додаҳо ё JavaScript иваз мекунад. Он инчунин ба рафтори пешфарзии пешфарз барои бекор кардани ҳаракат илова мекунад .modal-open
ва <body>
барои .modal-backdrop
фароҳам овардани майдони клик барои рад кардани модальҳои нишондодашуда ҳангоми клик берун аз модаль тавлид мекунад.
Модалро бе навиштани JavaScript фаъол созед. Дар data-toggle="modal"
як унсури контроллер, ба монанди тугма, дар якҷоягӣ бо як data-target="#foo"
ё href="#foo"
ҳадафи модали мушаххас барои иваз кардан насб кунед.
Модалро бо ID myModal
бо як сатри JavaScript занг занед:
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-backdrop=""
.
Ном | навъи | пешфарз | тавсиф |
---|---|---|---|
замина | булӣ ё сатр'static' |
дуруст | Унсури модаль-заминаро дар бар мегирад. Интихобан, static барои заминае муайян кунед, ки модальро бо клик намепӯшад. |
клавиатура | булӣ | дуруст | Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад |
нишон додан | булӣ | дуруст | Модалро ҳангоми оғозёбӣ нишон медиҳад. |
дурдаст | роҳ | дурӯғ | Ин хосият аз замони v3.3.0 бекор карда шудааст ва дар v4 хориҷ карда шудааст. Мо тавсия медиҳем, ки ба ҷои он шаблонсозии тарафи муштарӣ ё чаҳорчӯбаи ҳатмии маълумот ё худ ба jQuery.load занг занед . Агар URL-и дурдаст таъмин карда шавад, мундариҷа як маротиба |
.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 интизор мешавад). |
loaded.bs.modal | Ин ҳодиса вақте оғоз мешавад, ки модаль мундариҷаро бо истифода аз remote опсия бор кардааст. |
Бо ин плагини оддӣ ба қариб ҳама чиз менюҳои афтанда илова кунед, аз ҷумла навбар, ҷадвалҳо ва доруҳо.
Тавассути атрибутҳои додаҳо ё JavaScript, плагини афтанда мундариҷаи пинҳоншударо (менюҳои афтанда) бо иваз кардани .open
синф дар ҷузъи рӯйхати волидайн иваз мекунад.
Дар дастгоҳҳои мобилӣ, кушодани .dropdown-backdrop
афтанда ҳамчун майдони ламс барои пӯшидани менюҳои афтанда ҳангоми пахш кардани берун аз меню, талабот барои дастгирии дурусти iOS илова мекунад. Ин маънои онро дорад, ки гузариш аз менюи кушодаи афтанда ба менюи дигари афтанда як клики иловагиро дар мобилӣ талаб мекунад.
Эзоҳ: data-toggle="dropdown"
Аттрибутӣ барои пӯшидани менюҳои афтанда дар сатҳи барномаҳо такя мекунад, аз ин рӯ ҳамеша истифода бурдани он фикри хуб аст.
Барои data-toggle="dropdown"
иваз кардани афтанда ба пайванд ё тугма илова кунед.
Барои беэътибор нигоҳ доштани URL-ҳо бо тугмаҳои истинод, атрибутро data-target
ба ҷои href="#"
.
Ба афтандаҳо тавассути JavaScript занг занед:
data-toggle="dropdown"
хануз талаб карда мешавадНовобаста аз он, ки шумо афтандаро тавассути JavaScript занг мезанед ё ба ҷои он data-api-ро истифода мебаред, data-toggle="dropdown"
ҳамеша бояд дар элементи триггери афтанда мавҷуд бошад.
Ҳеҷ
$().dropdown('toggle')
Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро иваз мекунад.
Ҳама рӯйдодҳои афтанда дар .dropdown-menu
унсури волидайни ' ба кор андохта мешаванд.
Ҳама рӯйдодҳои афтанда дорои relatedTarget
хосиятест, ки арзиши он унсури лангари ивазшаванда аст.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.downdown | Вақте ки усули мисоли нишон даъват карда мешавад, ин ҳодиса фавран оғоз меёбад. |
нишон дода мешавад | Ин ҳодиса вақте оғоз мешавад, ки афтанда ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
пинҳон.bs.афтанда | Вақте ки усули пинҳон кардани мисол даъват карда шудааст, ин ҳодиса фавран оғоз мешавад. |
hidden.bs.downdown | Ин ҳодиса пас аз анҷоми пинҳон кардани афтанда аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст. Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд.
Ad leggings keytar, brunch ID санъати ҳизб dolor labore. Pitchfork yr enim lo-fi пеш аз он ки онҳо qui фурӯхта. Tumblr ҳуқуқҳои велосипедронии ферма ба мизи ҳар чӣ. Кардиган Аним Кеффиех Карлес. Велит Сейтан Максвини аксбардорӣ 3 гург моҳ irure. Косби свитери ломо ҷин шорт, hoodie minim Williamsburg, ки шумо эҳтимол дар бораи онҳо нашунидаед ва фонди эътимоди кардиган culpa biodiesel Вес Андерсон эстетикӣ. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa mouche skateboard, adipisicing fugiat velit pitchfork риш. Фриган риши aliqua cupidatat Mcsweeney's Vero. Cupidatat чор loko nisi, ea helvetica nulla carles. Мошини хӯрокворӣ свитери косби татуировкашуда, винилӣ аз Максвини. Ло-фи Вес Андерсон +1 sartorial. Карлес машқҳои эстетикии ғайримуқаррарӣ аст. Бруклин adipisicing ҳунарҳои пиво ноиби Keytar deserunt.
Дастрасӣ ба шумо имкон медиҳад. Fap ҳунармандӣ пиво deserunt скейтборд ea. Ҳуқуқҳои велосипедронии Lomo adipisicing banh mi, velit ea sunt lokavore қаҳваи якнажинадор дар Magna Veniam. Винили идентификатсияи ҳаёт, Эхо Парки оқибати он quis aliquip banh mi pitchfork мебошад. Vero VHS est adipising. Consectetur nisi DIY minim болишти паёмбаре. Cred ex in, 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.
Keytar twee blog, culpa messenger халта марфа ҳар мошини хӯрокворӣ delectus. Тасвирҳои синтези идентификатсия. Locavore sed helvetica cliche irony, thundercats, ки шумо эҳтимол дар бораи онҳо нашунидаед, ки дар натиҷаи hoodie free gluten lo-fi fap aliquip. Пеш аз он ки онҳо фурӯхта шаванд, Терри Ричардсон пеш аз он ки свитерҳои косбиро пеш аз он ки онҳо фурӯхта шаванд. Кардиган ҳунарҳои пиво seitan тайёр velit. VHS Chambray меҳнати муваққатӣ дорад. Аним моллит миним commodo ullamco thundercats.
Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <a href="#home">home</a>
бояд ба чизе дар DOM мувофиқат кунад <div id="home"></div>
.
:visible
ғайримақсаднок сарфи назар карда шудандУнсурҳои мақсаднок, ки :visible
мувофиқи jQuery нестанд , сарфи назар карда мешаванд ва ҷузъҳои нави нави онҳо ҳеҷ гоҳ таъкид карда намешаванд.
Новобаста аз усули татбиқ, scrollspy истифодаи position: relative;
элементеро, ки шумо ҷосусӣ мекунед, талаб мекунад. Дар аксари ҳолатҳо ин аст <body>
. Ҳангоми scrollspying дар ҷузъҳои ғайр аз <body>
, боварӣ ҳосил кунед, ки height
маҷмӯи ва overflow-y: scroll;
татбиқшаванда дошта бошед.
Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, data-spy="scroll"
ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин <body>
). Сипас data-target
атрибутро бо ID ё синфи унсури волидайни ягон .nav
ҷузъи Bootstrap илова кунед.
Пас аз илова кардани position: relative;
CSS-и худ, ба scrollspy тавассути JavaScript занг занед:
.scrollspy('refresh')
Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-offset=""
.
Ном | навъи | пешфарз | тавсиф |
---|---|---|---|
офсет | рақам | 10 | Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз боло ҷуброн карда мешаванд. |
Навъи ҳодиса | Тавсифи |
---|---|
activate.bs.scrollspy | Ин ҳодиса ҳар вақте, ки ашёи нав тавассути scrollspy фаъол мешавад, оташ мегирад. |
Барои гузариш аз панелҳои мундариҷаи маҳаллӣ, ҳатто тавассути менюҳои афтанда вазифаи зуд ва динамикии ҷадвалро илова кунед. Варақаҳои дохилӣ дастгирӣ намешаванд.
Ҷинси хом шумо эҳтимол дар бораи онҳо шортҳои ҷинс Остин нашунидаед. Nesciunt tofu stumptown aliqua, retro synth усто пок. Мӯйлаб клише tempor, Williamsburg Carles vegan helvetica. Reprehenderit қассоб ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон собиқ калмар. 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 фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):
Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:
Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"
додан ё data-toggle="pill"
дар элемент фаъол созед. Илова кардани nav
синфҳо nav-tabs
ба ҷадвал услуби ҷадвалиul
Bootstrapро татбиқ мекунад , дар ҳоле ки илова кардани синфҳо ва синфҳо ороиши доруҳоро татбиқ мекунад.nav
nav-pills
Барои пажмурда шудани ҷадвалҳо, .fade
ба ҳар як .tab-pane
. Панели ҷадвали аввал низ бояд .in
мундариҷаи ибтидоиро намоён гардонад.
$().tab
Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-target
як href
гиреҳи контейнерро дар DOM дошта бошад. Дар мисолҳои дар боло овардашуда, ҷадвалҳо <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 |
нишон дода шудааст | Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.target ва истифода баред .event.relatedTarget |
hide.bs.tab | Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода event.target баред .event.relatedTarget |
hidden.bs.tab | Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, event.target ва истифода баред .event.relatedTarget |
Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, CSS3-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.
Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.
Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:
Шимҳои танги сатҳи оянда keffiyeh шумо эҳтимол дар бораи онҳо нашунидаед. Аксҳо кабина риш хом denim letterpress vegan болишти паёмбаре Stumptown. Либоси амрикоии 8-битаи фарм-ба-сеитан, фиксии устувори квиноаи Максвини дорои винилии терри Ричардсон . Раъду риш, кардиганҳо banh mi lomo thundercats. Tofu biodiesel Williamsburg Марфа, чор Loko mcsweeney пок vegan chambray. A artisan воқеан ironic ҳар keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw denim қаҳва вирусӣ ягона.
Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.
Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis дохил мешаванд, яъне шумо бояд онҳоро худатон оғоз кунед .
Як роҳи оғоз кардани ҳамаи маслиҳатҳои асбобҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggle
атрибути онҳост:
Васлкунаки асбобҳо мундариҷа ва аломатҳоро мувофиқи дархост тавлид мекунад ва ба таври нобаёнӣ маслиҳатҳои абзорро пас аз унсури триггери худ ҷойгир мекунад.
Маслиҳати абзорро тавассути JavaScript фаъол созед:
Нишондиҳии зарурӣ барои маслиҳати асбобҳо танҳо атрибут аст data
ва title
дар унсури HTML шумо мехоҳед маслиҳати абзор дошта бошед. Нишондиҳандаи тавлидшудаи маслиҳат хеле содда аст, гарчанде ки он мавқеъро талаб мекунад (ба таври нобаёнӣ, top
аз ҷониби плагин муқаррар карда шудааст).
Баъзан шумо мехоҳед, ки ба гиперҳавола, ки сатрҳои сершуморро фаро мегирад, маслиҳати абзор илова кунед. Рафтори пешфарзии плагини абзор ин аст, ки он ба таври уфуқӣ ва амудӣ марказонида шавад. Барои white-space: nowrap;
пешгирӣ кардани ин ба лангарҳои худ илова кунед.
Ҳангоми истифодаи маслиҳатҳои асбобҳо оид ба унсурҳои дохили a .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 | Таъхири нишон додан ва пинҳон кардани маслиҳати асбобҳо (ms) - ба намуди триггери дастӣ дахл надорад Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад Сохтори объект ин аст: |
html | булӣ | дурӯғ | HTML-ро ба маслиҳати абзор дохил кунед. Агар дурӯғ бошад, text усули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред. |
ҷойгиркунӣ | сатр | функсия | 'боло' | Маслиҳати абзорро чӣ гуна ҷойгир кардан мумкин аст - боло | поён | чап | рост | авто. Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи асбоби 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 даъват кардани усули инстансия оғоз меёбад. |
нишон дода шудааст | Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
hide.bs.tooltip | Ин ҳодиса фавран ҳангоми hide даъват кардани усули инстансия оғоз мешавад. |
hidden.bs.tooltip | Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор аз корбар пинҳон карда шавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
inserted.bs.tooltip | Ин ҳодиса пас аз show.bs.tooltip ҳодиса, вақте ки қолаби маслиҳати абзор ба DOM илова карда шудааст, оғоз мешавад. |
Иловаи қабатҳои хурди мундариҷаро, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгир кардани маълумоти дуввум илова кунед.
Поповарҳое, ки ҳам унвон ва ҳам мундариҷаи онҳо сифр дарозӣ доранд, ҳеҷ гоҳ намоиш дода намешаванд.
Popovers талаб мекунад, ки плагини абзор ба версияи Bootstrap дохил карда шавад.
Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis дохил мешаванд, яъне шумо бояд онҳоро худатон оғоз кунед .
Як роҳи оғоз кардани ҳама поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggle
атрибути онҳост:
Ҳангоми истифодаи поповҳо дар унсурҳои дохили a .btn-group
ё a .input-group
, ё дар унсурҳои марбут ба ҷадвал ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), шумо бояд интихобро муайян кунед container: 'body'
(дар зер ҳуҷҷатгузорӣ шудааст) барои пешгирӣ кардани таъсири манфии номатлуб (масалан, элемент васеътар мешавад ва/ ё гум кардани кунҷҳои мудавваршуда ҳангоми фаъол кардани попов).
Барои илова кардани попов ба элемент disabled
ё .disabled
элемент, элементро дар дохили a ҷойгир кунед <div>
ва ба ҷои он поповро истифода <div>
баред.
Баъзан шумо мехоҳед, ки ба гиперҳаволае, ки сатрҳои сершуморро фаро мегирад, поповер илова кунед. Рафтори пешфарзии плагини popover ин аст, ки он ба таври уфуқӣ ва амудӣ марказонида шавад. Барои white-space: nowrap;
пешгирӣ кардани ин ба лангарҳои худ илова кунед.
Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.
Дар лобортис ҷойгир аст. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.
Дар лобортис ҷойгир аст. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.
Дар лобортис ҷойгир аст. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.
Дар лобортис ҷойгир аст. Aenean eu leo quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.
Триггерро истифода баред focus
, то поповҳоро дар клики навбатӣ, ки корбар мекунад, рад кунед.
Барои рафтори дурусти кросс-браузер ва байниплатформа, шумо бояд тегро истифода баред <a>
, на тег ва <button>
шумо инчунин бояд атрибутҳои варо дохил role="button"
кунед .tabindex
Поповҳоро тавассути JavaScript фаъол созед:
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-animation=""
.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
аниматсия | булӣ | дуруст | Гузариши пажмурдашавии CSS-ро ба popover татбиқ кунед |
контейнер | сатр | дурӯғ | дурӯғ | Поповро ба унсури мушаххас замима мекунад. Мисол: |
мазмун | сатр | функсия | '' | Арзиши мундариҷаи пешфарз, агар Агар функсия дода шавад, он бо |
таъхир | рақам | объект | 0 | Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад Сохтори объект ин аст: |
html | булӣ | дурӯғ | HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, text усули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред. |
ҷойгиркунӣ | сатр | функсия | 'дуруст' | Чӣ тавр ҷойгир кардани попов - боло | поён | чап | рост | авто. Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст |
интихобкунанда | сатр | дурӯғ | Агар интихобкунанда таъмин карда шавад, объектҳои попов ба ҳадафҳои муайяншуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани поповҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед . |
шаблон | сатр | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Асоси HTML барои истифода ҳангоми сохтани popover. Поповар ба Поповар ба
Унсури болоии печанда бояд |
унвон | сатр | функсия | '' | Қимати унвони пешфарз, агар Агар функсия дода шавад, он бо |
триггер | сатр | 'клик' | Чӣ тавр popover фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manual бо ягон триггери дигар якчоя кардан мумкин нест. |
нуқтаи назар | сатр | объект | функсия | { интихобкунанда: 'бадан', пуркунӣ: 0 } | Поповарро дар ҳудуди ин элемент нигоҳ медорад. Мисол: Агар функсия дода шавад, он бо унсури триггери гиреҳи DOM ҳамчун далели ягонаи он даъват карда мешавад. Контекст |
Вариантҳо барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.
$().popover(options)
Поповҳоро барои коллексияи элементҳо оғоз мекунад.
.popover('show')
Поповери элементро ошкор мекунад. Ба зангзананда пеш аз намоиши поповер бармегардад (яъне пеш аз shown.bs.popover
рух додани ҳодиса). Ин як ангезаи "дастӣ"-и попов ҳисобида мешавад. Поповарҳое, ки ҳам унвон ва ҳам мундариҷаи онҳо сифр дарозӣ доранд, ҳеҷ гоҳ намоиш дода намешаванд.
.popover('hide')
Попповери элементро пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани поповер бармегардад (яъне пеш аз hidden.bs.popover
рух додани ҳодиса). Ин як ангезаи "дастӣ"-и попов ҳисобида мешавад.
.popover('toggle')
Поп-повери элементро иваз мекунад. Ба зангзананда пеш аз он ки popover воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.popover
ё ҳодиса) бармегардад. hidden.bs.popover
Ин як ангезаи "дастӣ"-и попов ҳисобида мешавад.
.popover('destroy')
Поповери элементро пинҳон ва нобуд мекунад. Поповҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selector
опсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.popover | Ин ҳодиса фавран ҳангоми show даъват кардани усули инстансия оғоз меёбад. |
нишон дода шудааст.bs.popover | Ин ҳодиса вақте оғоз мешавад, ки попов ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
hide.bs.popover | Ин ҳодиса фавран ҳангоми hide даъват кардани усули инстансия оғоз мешавад. |
hidden.bs.popover | Ин ҳодиса пас аз анҷоми пинҳон кардани попов аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
inserted.bs.popover | Ин ҳодиса пас аз show.bs.popover ҳодиса, вақте ки қолаби popover ба DOM илова карда шудааст, оғоз мешавад. |
Бо ин плагин ба ҳама паёмҳои огоҳкунанда функсияи радкунӣ илова кунед.
Ҳангоми истифодаи .close
тугма, он бояд аввалин фарзанди он бошад .alert-dismissible
ва дар аломатгузорӣ ягон мундариҷаи матнӣ пеш аз он омада наметавонад.
Ин ва онро тағир диҳед ва бори дигар кӯшиш кунед. Дуис моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.
Танҳо data-dismiss="alert"
ба тугмаи пӯшидаи худ илова кунед, то ба таври худкор функсияи наздики ҳушдор диҳад. Пӯшидани ҳушдор онро аз DOM хориҷ мекунад.
Барои он ки огоҳиҳои шумо ҳангоми пӯшидан аниматсияро истифода баранд, боварӣ ҳосил кунед, ки онҳо аллакай ба онҳо .fade
ва .in
синфҳо татбиқ шудаанд.
$().alert()
Ҳодисаҳои кликро дар унсурҳои насли, ки атрибут доранд, огоҳӣ медиҳад data-dismiss="alert"
. (Ҳангоми истифодаи автоматикунонии data-api лозим нест.)
$().alert('close')
Огоҳиро бо хориҷ кардани он аз DOM мепӯшонад. Агар дар элемент синфҳо .fade
ва .in
синфҳо мавҷуд бошанд, огоҳӣ пеш аз хориҷ шуданаш хомӯш мешавад.
Васлкунаки огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи ҳушдор фош мекунад.
Навъи ҳодиса | Тавсифи |
---|---|
наздик.б.огоҳӣ | Ин ҳодиса фавран ҳангоми close даъват кардани усули инстансия оғоз меёбад. |
баста.б.огоҳӣ | Ин ҳодиса ҳангоми баста шудани ҳушдор оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.
Firefox ҳолати назорати шаклро (маъюбонӣ ва тафтишӣ) дар сарбории саҳифа нигоҳ медорад . Як роҳи ҳалли ин истифода autocomplete="off"
аст. Ба хатогии Mozilla # 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)
Матнро ба ҳама гуна ҳолати матни додашуда иваз мекунад.
Васлкунаки фасеҳ, ки барои рафтори ивазкунии осон як қатор синфҳоро истифода мебарад.
Collapse плагини гузаришро талаб мекунад , ки ба версияи Bootstrap дохил карда шавад.
Барои нишон додан ва пинҳон кардани унсури дигар тавассути тағироти синф тугмаҳои зерро клик кунед:
.collapse
мундариҷаро пинҳон мекунад.collapsing
хангоми гузариш ба кор бурда мешавад.collapse.in
мазмун нишон медихадШумо метавонед пайвандеро бо href
атрибут ё тугмаи дорои data-target
атрибут истифода баред. Дар ҳарду ҳолат, data-toggle="collapse"
зарур аст.
Барои сохтани аккордеон бо ҷузъи панел, рафтори пешфарзро васеъ кунед.
Инчунин иваз кардани .panel-body
s бо .list-group
s имконпазир аст.
Боварӣ ҳосил кунед aria-expanded
, ки ба элементи назорат илова кунед. Ин атрибут ба таври возеҳ ҳолати кунунии унсури пӯшидашавандаро барои хонандагони экран ва технологияҳои ёрирасони шабеҳ муайян мекунад. Агар унсури ҷамъшаванда бо нобаёнӣ баста бошад, он бояд арзиши aria-expanded="false"
. Агар шумо унсури ҷамъшавандаро бо нобаёнӣ бо истифода аз in
синф муқаррар aria-expanded="true"
карда бошед, ба ҷои он назоратро насб кунед. Васлкунак ба таври худкор ин атрибутро вобаста ба кушода ё баста шудани элементи ҷамъшаванда иваз мекунад.
Илова бар ин, агар унсури идоракунии шумо як унсури ҷамъшавандаро ҳадаф қарор диҳад, яъне data-target
атрибут ба селектор ишора кунад - шумо метавонед ба унсури идоракунӣ атрибути id
иловагӣ илова кунед , ки дорои унсури ҷамъшаванда мебошад. Хонандагони экрани муосир ва технологияҳои ёрирасони шабеҳ аз ин атрибут истифода мебаранд, то ба корбарон миёнабурҳои иловагӣ фароҳам оранд, то мустақиман ба худи унсури пӯшидашаванда ҳаракат кунанд.aria-controls
id
Васлкунаки пошхӯрӣ чанд синфро барои идора кардани борбардории вазнин истифода мебарад:
.collapse
мундариҷаро пинҳон мекунад.collapse.in
мазмунро нишон медихад.collapsing
ҳангоми оғози гузариш илова карда мешавад ва ҳангоми ба охир расиданаш хориҷ карда мешавадИн синфҳоро дар component-animations.less
.
Барои ба таври худкор таъин кардани назорати унсури пӯшидашаванда танҳо data-toggle="collapse"
ва data-target
ба элемент илова кунед. Аттрибут data-target
интихобкунандаи CSS-ро барои татбиқи шикастхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapse
ба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед in
.
Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба назорати ҷамъшаванда, атрибути маълумотро илова кунед data-parent="#selector"
. Барои дидани ин амал ба намоиш муроҷиат кунед.
Ба таври дастӣ бо:
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-parent=""
.
Ном | навъи | пешфарз | тавсиф |
---|---|---|---|
падару модар | интихобкунанда | дурӯғ | Агар интихобкунанда таъмин карда шуда бошад, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни муайяншуда ҳангоми нишон додани ин унсури ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд - ин аз panel синф вобаста аст) |
иваз кардан | булӣ | дуруст | Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад |
.collapse(options)
Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object
.
.collapse('toggle')
Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад. Пеш аз он ки унсури ҷамъшаванда воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.collapse
ё ҳодиса) ба зангзан бармегардад.hidden.bs.collapse
.collapse('show')
Элементи ҷамъшавандаро нишон медиҳад. Ба зангзананда пеш аз намоиш додани унсури ҷамъшаванда бармегардад (яъне пеш аз shown.bs.collapse
рух додани ҳодиса).
.collapse('hide')
Элементи пӯшидашавандаро пинҳон мекунад. Ба зангзананда пеш аз он ки унсури ҷамъшаванда воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.collapse
рух додани ҳодиса) бармегардад.
Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.colapse | Ин ҳодиса фавран ҳангоми show даъват кардани усули инстансия оғоз меёбад. |
нишон дода шудааст | Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
пинҳон кардан | Ин ҳодиса фавран вақте ки hide усул даъват шудааст, барканор карда мешавад. |
пинҳон.б.хуриш | Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
Як ҷузъи слайд-шоу барои велосипедронӣ дар байни элементҳо, ба монанди карусел. Каруселҳои ҷойгиршуда дастгирӣ намешаванд.
Ҷузъи карусел одатан ба стандартҳои дастрасӣ мувофиқат намекунад. Агар ба шумо лозим бошад, ки мувофиқат кунед, лутфан имконоти дигари пешниҳоди мундариҷаи худро баррасӣ кунед.
Bootstrap танҳо CSS3-ро барои аниматсияҳо истифода мебарад, аммо Internet Explorer 8 ва 9 хосиятҳои зарурии CSS-ро дастгирӣ намекунанд. Ҳамин тариқ, ҳангоми истифодаи ин браузерҳо аниматсияҳои гузариши слайд вуҷуд надоранд. Мо дидаву дониста тасмим гирифтем, ки барои гузаришҳо бозгашти бар асоси jQuery-ро дохил накунем.
Синфро .active
ба яке аз слайдҳо илова кардан лозим аст. Дар акси ҳол, карусел намоён нахоҳад шуд.
Барои назорат ҳатман синфҳо .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">
).
Навъи ҳодиса | Тавсифи |
---|---|
слайд.б.карусел | slide Вақте ки усули мисол даъват карда мешавад, ин ҳодиса фавран оғоз меёбад. |
slid.bs.carousel | Ин ҳодиса вақте оғоз мешавад, ки карусел гузариши слайди худро анҷом дод. |
Васлкунаки аффикс position: fixed;
фурӯзон ва хомӯш карда мешавад, ки таъсири бо position: sticky;
. Субнавигатсия дар тарафи рост намоиши зиндаи плагини аффикс мебошад.
Васлкунаки аффиксро тавассути атрибутҳои додаҳо ё дастӣ бо JavaScript-и худ истифода баред. Дар ҳарду ҳолат, шумо бояд CSS-ро барои ҷойгиршавӣ ва паҳнои мундариҷаи замимашуда таъмин кунед.
Эзоҳ: Васлкунаки аффиксиро дар элементе, ки дар як унсури нисбатан ҷойгиршуда мавҷуд аст, ба монанди сутуни кашидашуда ё телашуда аз сабаби иштибоҳи намоиши Safari истифода набаред .
Васлкунаки аффикс дар байни се синф иваз мешавад, ки ҳар як ҳолати мушаххасро ифода мекунад: .affix
, .affix-top
, ва .affix-bottom
. Шумо бояд сабкҳоро ба истиснои position: fixed;
on .affix
, барои ин синфҳо худатон таъмин кунед (вобаста аз ин плагин) барои идора кардани мавқеъҳои воқеӣ.
Ин аст, ки плагини аффикс чӣ гуна кор мекунад:
.affix-top
, то нишон диҳад, ки элемент дар мавқеи баландтаринаш аст. Дар ин лаҳза ҷойгиркунии CSS талаб карда намешавад..affix
ҷойгузинҳо .affix-top
ва танзимҳо position: fixed;
(аз ҷониби CSS Bootstrap дода шудааст)..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.affiks | Ин ҳодиса фавран пеш аз гузоштани элемент оғоз меёбад. |
аффикс.б.аффикс | Ин ҳодиса пас аз гузоштани элемент ба кор андохта мешавад. |
affix-top.bs.affiks | Ин ҳодиса фавран пеш аз он ки элемент часпонида шавад, оғоз меёбад. |
affixed-top.bs.affiks | Ин ҳодиса пас аз гузоштани элемент ба боло оғоз мешавад. |
affix-bottom.bs.affiks | Ин ҳодиса фавран пеш аз он ки элемент дар поён часпида шавад, оғоз меёбад. |
affixed-bottom.bs.affiks | Ин ҳодиса пас аз гузоштани элемент дар поён ба кор андохта мешавад. |