Javascript барои Bootstrap

Ҷузъҳои Bootstrap -ро ҳоло бо 12 плагинҳои фармоишии jQuery ҳаёт бахшед.

Модалҳо

Васлкунаки модалии JavaScript-и соддакардашуда, вале чандирро бо танҳо ҳадди ақали функсионалии зарурӣ ва пешфарзҳои оқилона қабул мекунад.

Равзанаҳои афтанда

Бо ин плагини оддӣ ба ҳама чизе дар Bootstrap менюҳои афтанда илова кунед. Bootstrap дорои дастгирии пурраи менюи афтанда дар навор, ҷадвалҳо ва доруҳо мебошад.

Scrollspy

Барои ба таври худкор нав кардани истинодҳо дар лавҳаи худ scrollspy-ро истифода баред, то истиноди фаъолро дар асоси мавқеи ҳаракат нишон диҳед.

Варақаҳои ивазшаванда

Ин плагинро барои муфидтар кардани ҷадвалҳо ва доруҳо истифода баред ва ба онҳо имкон диҳед, ки тавассути панелҳои ҷадвалбандишавандаи мундариҷаи маҳаллӣ гузаред.

Маслиҳатҳо

Гирифтани нави плагини jQuery Tipsy, Маслиҳатҳо ба тасвирҳо такя намекунанд - онҳо CSS3-ро барои аниматсияҳо ва атрибутҳои маълумот барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

Поповҳо *

Иловаи қабатҳои хурди мундариҷаро, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгир кардани маълумоти дуввум илова кунед.

* Барои дохил кардани маслиҳатҳои асбобҳо талаб карда мешавад

Паёмҳои огоҳкунанда

Васлкунаки ҳушдор як синфи хурдест барои илова кардани функсияҳои наздик ба огоҳиҳо.

Тугмаҳо

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Фурӯпошӣ

Барои ҷузъҳои ҷамъшаванда, ба монанди аккордеонҳо ва навигатсия, сабкҳои асосӣ ва дастгирии чандир гиред.

Карусель

Ҳар гуна мундариҷаеро, ки мехоҳед слайд-шоуи интерактивии мундариҷаро пешкаш кунед, эҷод кунед.

Навиштан

Васлкунаки асосӣ ва ба осонӣ васеъшуда барои зуд эҷод кардани сарлавҳаҳои шево бо ҳама гуна вуруди матн.

Гузаришҳо *

Барои эффектҳои оддии гузариш, як бор bootstrap-transition.js-ро дохил кунед, то дар модальҳо лағжонед ё огоҳиҳоро хомӯш кунед.

* Барои аниматсия дар плагинҳо лозим аст

Сарҳо боло! Ҳама плагинҳои JavaScript версияи охирини jQuery-ро талаб мекунанд.

Дар бораи модальхо

Васлкунаки модалии JavaScript-и соддакардашуда, вале чандирро бо танҳо ҳадди ақали функсионалии зарурӣ ва пешфарзҳои оқилона қабул мекунад.

Файлро зеркашӣ кунед

Намунаи статикӣ

Дар зер модали статикӣ дода шудааст.

Намоиши зинда

Модалро тавассути JavaScript бо пахш кардани тугмаи зер иваз кунед. Он аз болои саҳифа ба поён ҳаракат мекунад ва пажмурда мешавад.

Модал намоиширо оғоз кунед

Истифодаи bootstrap-modal

Модалро тавассути javascript занг занед:

  1. $ ( '#myModal' ). модаль ( имконот )

Имконот

Ном навъи пешфарз тавсиф
замина булӣ дуруст Унсури модаль-заминаро дар бар мегирад. Интихобан, staticбарои заминае муайян кунед, ки модальро бо клик намепӯшад.
клавиатура булӣ дуруст Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад
нишон додан булӣ дуруст Модалро ҳангоми оғозёбӣ нишон медиҳад.

Нишондиҳӣ

Шумо метавонед модальҳоро дар саҳифаи худ бе навиштани як сатри JavaScript ба осонӣ фаъол созед. Танҳо data-toggle="modal"дар як унсури контроллер бо data-target="#foo"ё href="#foo", ки ба id-и элементи модалӣ мувофиқат мекунад, насб кунед ва ҳангоми клик он модали шуморо оғоз мекунад.

Инчунин, барои илова кардани вариантҳо ба намунаи модалии худ, танҳо онҳоро ҳамчун атрибутҳои маълумоти иловагӣ дар унсури назорат ё худи аломатгузории модалӣ дохил кунед.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Модалро оғоз кунед </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < навъи тугма = "тугма" синф = "пӯшидан" data-dississ = "modal" > × </button>
  4. <h3> Сарлавҳаи модалӣ </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Як бадани хуб… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dississ = "modal" > Пӯшед </a>
  11. <a href = "#" class = "btn btn-primary" > Тағиротро захира кунед </a>
  12. </div>
  13. </div>
Сарҳо боло! Агар шумо хоҳед, ки модали шумо дар дохил ва берун аниматсион кунад, танҳо .fadeба элемент синф илова кунед .modal(барои дидани ин амал ба намоиш муроҷиат кунед) ва bootstrap-transition.js-ро дохил кунед.

Усулҳо

.modal(имконот)

Мундариҷаи шуморо ҳамчун модаль фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

  1. $ ( '#myModal' ). модаль ({
  2. клавиатура : бардурӯғ
  3. })

.modal('гузариш')

Модалро дастӣ иваз мекунад.

  1. $ ( '#myModal' ). модаль ( 'гузариш' )

.modal('шоу')

Модалро дастӣ мекушояд.

  1. $ ( '#myModal' ). модаль ( 'намоиш' )

.modal('пинҳон')

Модалро дастӣ пинҳон мекунад.

  1. $ ( '#myModal' ). модаль ( 'пинҳон' )

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

Ҳодиса Тавсифи
нишон додан Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки модаль барои корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
пинҳон Ин ҳодиса пас аз анҷоми пинҳон кардани модаль аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#myModal' ). дар ( 'пинҳон' , функсия () {
  2. // коре кунед…
  3. })

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст.

Файлро зеркашӣ кунед

Намунаи навбар бо 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.

@mdo

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.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger халта марфа ҳар мошини хӯрокворӣ delectus. Тасвирҳои синтези идентификатсия. Locavore sed helvetica cliche irony, thundercats, ки шумо эҳтимол дар бораи онҳо нашунидаед, ки дар натиҷаи hoodie free gluten lo-fi fap aliquip. Пеш аз он ки онҳо фурӯхта шаванд, Терри Ричардсон пеш аз он ки свитерҳои косбиро пеш аз он ки онҳо фурӯхта шаванд. Кардиган ҳунарҳои пиво seitan тайёр velit. VHS Chambray меҳнати муваққатӣ дорад. Аним моллит миним commodo ullamco thundercats.


Истифодаи bootstrap-scrollspy.js

Ба scrollspy тавассути javascript занг занед:

  1. $ ( '#навбар' ). scrollspy ()

Нишондиҳӣ

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, танҳо data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин бадан хоҳад буд).

  1. <body data-spy = "scroll" > ... </body>
Сарҳо боло! Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <a href="#home">home</a>бояд ба чизе дар дом мувофиқ бошад, ба монанди <div id="home"></div>.

Усулҳо

.scrollspy('навсозӣ')

Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:

  1. $ ( '[data-spy = "ҳаракат"]' ). ҳар як ( функсия () {
  2. var $spy = $ ( ин ). scrollspy ( 'навсозӣ' )
  3. });

Имконот

Ном навъи пешфарз тавсиф
офсет рақам 10 Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз боло ҷуброн карда мешаванд.

Ҳодисаҳо

Ҳодиса Тавсифи
фаъол кардан Ин ҳодиса ҳар вақте, ки ашёи нав тавассути 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.


Истифодаи bootstrap-tab.js

Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):

  1. $ ( '#Tab a' ). пахш кунед ( функсия ( e ) {
  2. д . preventDefault ();
  3. $ ( ин ). ҷадвал ( 'намоиш' );
  4. })

Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:

  1. $ ( '#myTab a[href="#profile"]' ). ҷадвал ( 'намоиш' ); // Ҷадвалро аз рӯи ном интихоб кунед
  2. $ ( '#Май Tab a:first' ). ҷадвал ( 'намоиш' ); // Ҷадвали аввалро интихоб кунед
  3. $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' ); // Варақаи охиринро интихоб кунед
  4. $ ( '#myTab li:eq(2) a' ). ҷадвал ( 'намоиш' ); // Варақаи сеюмро интихоб кунед (0-индексшуда)

Нишондиҳӣ

Шумо метавонед як ҷадвал ё новбари ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"додан ё data-toggle="pill"дар элемент фаъол созед. Илова кардани navсинфҳо nav-tabsба ulҷадвал услуби ҷадвали bootstrapро татбиқ мекунад.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Профил </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Паёмҳо </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Танзимот </a></li>
  6. </ul>

Усулҳо

$().таб

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-targetяк hrefгиреҳи контейнерро дар DOM дошта бошад.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Хона </a></li>
  3. <li><a href = "#profile" > Профил </a></li>
  4. <li><a href = "#messages" > Паёмҳо </a></li>
  5. <li><a href = "#settings" > Танзимот </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "паёмҳо" > ... </div>
  12. <div class = "tab-pane" id = "танзимот" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функсия () {
  17. $ ( '#Табиби ман: охирон' ). ҷадвал ( 'намоиш' );
  18. })
  19. </script>

Ҳодисаҳо

Ҳодиса Тавсифи
нишон додан Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
нишон дода шудааст Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
  1. $ ( 'a[data-toggle="таб"]' ). дар ( 'нишон дода шудааст' , функсия ( e ) {
  2. д . ҳадаф // ҷадвали фаъолшуда
  3. д . марбут ба ҳадаф // ҷадвали қаблӣ
  4. })

Дар бораи Маслиҳатҳо

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳои асбобҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, css3-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

Файлро зеркашӣ кунед

Намунаи истифодаи Tooltips

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Шимҳои танги сатҳи оянда 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 қаҳва вирусӣ ягона.


Истифодаи bootstrap-tooltip.js

Маслиҳати абзорро тавассути javascript фаъол кунед:

  1. $ ( '#мисол' ). маслиҳати асбобҳо ( имконот )

Имконот

Ном навъи пешфарз тавсиф
аниматсия булӣ дуруст ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
ҷойгиркунӣ сатр|функсия 'боло' Чӣ тавр ҷойгир кардани банди асбобҳо - боло | поён | чап | рост
интихобкунанда сатр дурӯғ Агар интихобкунанда таъмин карда шавад, объектҳои маслиҳати асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд.
унвон сатр | функсия '' арзиши унвони пешфарз, агар теги `title` мавҷуд набошад
триггер сатр 'гурез' Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - нишонаеро | таваҷҷӯҳ | дастур
таъхир рақам | объект 0

таъхир нишон додан ва пинҳон кардани маслиҳати асбобҳо (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { show: 500, hide: 100 }

Сарҳо боло! Имконот барои маслиҳатҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо муайян карда шаванд.

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

  1. <a href = "#" rel = "tooltip" title = "аввалин маслиҳат" > курсорро болои ман гузаронед </a>

Усулҳо

$().маслиҳат(имконот)

Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.

.tooltip('нишон')

Маслиҳати асбоби элементро ошкор мекунад.

  1. $ ( '#элемент' ). Маслиҳат ( 'намоиш' )

.tooltip('пинҳон')

Маслиҳати асбоби элементро пинҳон мекунад.

  1. $ ( '#элемент' ). маслиҳати асбобҳо ( 'пинҳон кардан' )

.tooltip('гузариш')

Маслиҳати асбоби элементро иваз мекунад.

  1. $ ( '#элемент' ). маслиҳати асбобҳо ( 'гузариш' )

Дар бораи popovers

Иловаи қабатҳои хурди мундариҷаро, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгир кардани маълумоти дуввум илова кунед.

* Барои дохил кардани Tooltip талаб мекунад

Файлро зеркашӣ кунед

Намунаи поповер

Тугмачаро ба болои тугма гузоред, то поповро фаъол созед.


Истифодаи bootstrap-popover.js

Поповҳоро тавассути javascript фаъол созед:

  1. $ ( '#мисол' ). popover ( имконот )

Имконот

Ном навъи пешфарз тавсиф
аниматсия булӣ дуруст ба маслиҳати абзор гузариш пажмурда шудани css-ро татбиқ кунед
ҷойгиркунӣ сатр|функсия 'дуруст' чӣ тавр ҷойгир кардани попов - боло | поён | чап | рост
интихобкунанда сатр дурӯғ агар интихобкунанда таъмин карда шавад, объектҳои банди асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд
триггер сатр 'гурез' Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - нишонаеро | таваҷҷӯҳ | дастур
унвон сатр | функсия '' арзиши унвони пешфарз, агар атрибути "унвон" мавҷуд набошад
мазмун сатр | функсия '' арзиши мундариҷаи пешфарз, агар атрибути `data-content` мавҷуд набошад
таъхир рақам | объект 0

таъхир нишон додан ва пинҳон кардани поповер (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { show: 500, hide: 100 }

Сарҳо боло! Имконот барои поповҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо муайян карда шаванд.

Нишондиҳӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis интихоб шудаанд. Агар шумо хоҳед, ки онҳоро истифода баред, танҳо як варианти селекторро муайян кунед.

Усулҳо

$().popover(имконот)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('намоиш')

Элементҳои поповро ошкор мекунад.

  1. $ ( '#элемент' ). popover ( 'намоиш' )

.popover('пинҳон')

Попвери элементҳоро пинҳон мекунад.

  1. $ ( '#элемент' ). popover ( 'пинҳон кардан' )

.popover('гузариш')

Калиди элементҳоро иваз мекунад.

  1. $ ( '#элемент' ). popover ( 'гузариш' )

Дар бораи огоҳиҳо

Васлкунаки ҳушдор як синфи хурдест барои илова кардани функсияҳои наздик ба огоҳиҳо.

Зеркашӣ кунед

Намунаи огоҳиҳо

Васлкунаки огоҳкунӣ дар паёмҳои огоҳии муқаррарӣ кор мекунад ва паёмҳоро блок мекунад.

Гуакамоли муқаддас! Беҳтарин худатонро тафтиш кунед, шумо он қадар хуб намебинед.

Оҳ афсӯс! Шумо хато гирифтед!

Ин ва онро тағир диҳед ва бори дигар кӯшиш кунед. Дуис моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

Ин амалро андешед Ё ин корро кунед


Истифодаи bootstrap-alert.js

Қатъи огоҳиро тавассути javascript фаъол созед:

  1. $ ( ".alert" ). огоҳӣ ()

Нишондиҳӣ

Танҳо data-dismiss="alert"ба тугмаи пӯшидаи худ илова кунед, то ба таври худкор функсияи наздики ҳушдор диҳад.

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

Усулҳо

$(). alert()

Ҳама огоҳиҳоро бо функсияҳои наздик фаро мегирад. Барои он ки ҳушдорҳои шумо ҳангоми басташавӣ фаъол шаванд, боварӣ ҳосил кунед, ки онҳо аллакай .fadeва .inсинфро ба онҳо татбиқ кардаанд.

.alert('пушидани')

Огоҳӣ мепӯшад.

  1. $ ( ".alert" ). огоҳӣ ( 'наздик' )

Ҳодисаҳо

Синфи огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи огоҳӣ фош мекунад.

Ҳодиса Тавсифи
наздик Ин ҳодиса фавран ҳангоми closeдаъват кардани усули инстансия оғоз меёбад.
баста Ин ҳодиса ҳангоми баста шудани ҳушдор оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#худдори ман' ). пайваст ( 'пӯшида' , функсия () {
  2. // коре кунед…
  3. })

Дар бораи

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Файлро зеркашӣ кунед

Намунаҳои истифода

Васлкунаки тугмаҳоро барои ҳолатҳо ва гузаришҳо истифода баред.

Давлатманд
Гузариш ягона
Қуттии қайд
Радио

Истифодаи bootstrap-button.js

Тугмаҳоро тавассути javascript фаъол созед:

  1. $ ( '.nav-tabs' ). тугмаи ()

Нишондиҳӣ

Аттрибутҳои маълумот барои плагини тугма ҷудонашаванда мебошанд. Рамзи намунаи зерро барои намудҳои гуногуни аломатгузорӣ санҷед.

  1. <!-- Илова кардани data-toggle="button" барои фаъол кардани гузариш дар як тугма -->
  2. <button class = "btn" data- toggle = "button" > Гузариши ягона </button>
  3.  
  4. <!-- Илова кардани data-toggle="buttons-checkbox" барои иваз кардани услуби қуттии қайд дар btn-group -->
  5. <div class = "btn-group" data- toggle = "buttons-checkbox " >
  6. <button class = "btn" > Чап </тугма>
  7. <button class = "btn" > Миёна </button>
  8. <button class = "btn" > Рост </button>
  9. </div>
  10.  
  11. <!-- Илова кардани data-toggle="buttons-radio" барои иваз кардани услуби радио дар btn-group -->
  12. <div class = "btn-group" data-toggle = "тугмаҳо-радио" >
  13. <button class = "btn" > Чап </тугма>
  14. <button class = "btn" > Миёна </button>
  15. <button class = "btn" > Рост </button>
  16. </div>

Усулҳо

$().тугма('гузариш')

Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.

Сарҳо боло! Шумо метавонед бо истифода аз data-toggleаттрибутӣ ивазкунии худкори тугмаро фаъол созед.
  1. <button class = "btn" data- toggle = "button" > </button>

$().тугма('боркунӣ')

Ҳолати тугмаро ба боркунӣ муқаррар мекунад - тугмаро хомӯш мекунад ва матнро ба боркунии матн иваз мекунад. Матни боркунӣ бояд дар элементи тугма бо истифода аз атрибути data муайян карда шавад data-loading-text.

  1. <button class = "btn" data-loading-text = "боркунии ашё..." > ... </button>
Сарҳо боло! Firefox ҳолати ғайрифаъолро дар тамоми борҳои саҳифа нигоҳ медорад . Як роҳи ҳалли ин истифода autocomplete="off"аст.

$().тугма('reset')

Ҳолати тугмаро барқарор мекунад - матнро ба матни аслӣ иваз мекунад.

$().тугма(сатр)

Ҳолати тугмаро аз нав барқарор мекунад - матнро ба ҳама гуна ҳолати матни муайяншуда иваз мекунад.

  1. <button class = "btn" data-complete-text = "ба охир расид!" > ... </тугма>
  2. <скрипт>
  3. $ ( '.btn' ). тугма ( 'пурра' )
  4. </script>

Дар бораи

Барои ҷузъҳои ҷамъшаванда, ба монанди аккордеонҳо ва навигатсия, сабкҳои асосӣ ва дастгирии чандир гиред.

Файлро зеркашӣ кунед

* Барои ворид кардани плагини Transitions талаб карда мешавад.

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

Бо истифода аз плагини фурӯпошӣ, мо як виҷети оддии услуби аккордеон сохтем:

Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.

Истифодаи bootstrap-collapse.js

Ба воситаи javascript фаъол созед:

  1. $ ( ".colapse" ). фурӯпошӣ ()

Имконот

Ном навъи пешфарз тавсиф
падару модар интихобкунанда дурӯғ Агар селектор, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни муайяншуда ҳангоми нишон додани ин ашёи ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд)
иваз кардан булӣ дуруст Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад

Нишондиҳӣ

Барои ба таври худкор таъин кардани назорати унсури пӯшидашаванда танҳо data-toggle="collapse"ва data-targetба элемент илова кунед. Аттрибутӣ data-targetселектори css-ро барои татбиқи пошхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapseба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед in.

  1. <button class = "btn btn-danger" data-toggle = " colapse " data-target = "#demo" >
  2. соддаи пошхӯрда
  3. </ тугма >
  4.  
  5. <div id = "demo" class = "colapse in" > </div>
Сарҳо боло! Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба назорати ҷамъшаванда, атрибути маълумотро илова кунед data-parent="#selector". Барои дидани ин амал ба намоиш муроҷиат кунед.

Усулҳо

.collapse(имконот)

Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

  1. $ ( '#myCollapsible' ). фурӯпошӣ ({
  2. иваз кардан : бардурӯғ
  3. })

.collapse('гузариш')

Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад.

.collapse('намоиш')

Элементи ҷамъшавандаро нишон медиҳад.

.collapse('пинҳон')

Элементи пӯшидашавандаро пинҳон мекунад.

Ҳодисаҳо

Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.

Ҳодиса Тавсифи
нишон додан Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон Ин ҳодиса фавран вақте ки hideусул даъват шудааст, барканор карда мешавад.
пинҳон Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
  1. $ ( '#myCollapsible' ). дар ( 'пинҳон' , функсия () {
  2. // коре кунед…
  3. })

Дар бораи

Васлкунаки асосӣ ва ба осонӣ васеъшуда барои зуд эҷод кардани сарлавҳаҳои шево бо ҳама гуна вуруди матн.

Файлро зеркашӣ кунед

Мисол

Барои нишон додани натиҷаҳои пешакии чоп дар майдони зер навиштанро оғоз кунед.


Истифодаи bootstrap-typeahead.js

Тавассути javascript ба чопгар занг занед:

  1. $ ( '.typeahead' ). пешаки ()

Имконот

Ном навъи пешфарз тавсиф
сарчашма массив [ ] Манбаи маълумот барои пурсиш бар зидди.
ашё рақам 8 Шумораи максималии ҷузъҳо барои намоиш дар афтанда.
мувофиқ функсия ҳарфи ҳассос Усуле, ки барои муайян кардани мувофиқати дархост ба ашё истифода мешавад. Як далелро қабул мекунад, ки itemбар зидди он дархостро санҷидан лозим аст. Ба дархости ҷорӣ бо this.query. trueАгар дархост мувофиқ бошад, мантиқиро баргардонед .
ҷудокунанда функсия мувофиқати дақиқ,
ҳассос ба ҳарф, ҳассос
ба ҳарф
Усули барои мураттабсозии натиҷаҳои худкор истифодашаванда. Аргументи ягонаро қабул мекунад itemsва доираи намунаи чопкуниро дорад. Ба дархости ҷорӣ бо this.query.
равшангар функсия ҳамаи мувофиқатҳои пешфарзро таъкид мекунад Усули барои нишон додани натиҷаҳои автоматӣ истифода мешавад. Аргументи ягонаро қабул мекунад itemва доираи намунаи чопкуниро дорад. Бояд html-ро баргардонад.

Нишондиҳӣ

Иловаи атрибутҳои додаҳо барои бақайдгирии унсури дорои функсияи чопӣ.

  1. < навъи вуруд = "матн" маълумот-таъмини = "typeahead" >

Усулҳо

.typeahead(имконот)

Воридро бо пешакии чопӣ оғоз мекунад.