Јавасцрипт за Боотстрап

Оживите компоненте Боотстрапа—сада са 12 прилагођених јКуери додатака.

Модалс

Поједностављен, али флексибилан, преузима традиционални јавасцрипт модални додатак са само минималном потребном функционалношћу и паметним подразумеваним подешавањима.

Падајући мени

Додајте падајуће меније скоро свему у Боотстрапу помоћу овог једноставног додатка. Боотстрап има пуну подршку за падајући мени на навигационој траци, картицама и таблетама.

Сцроллспи

Користите сцроллспи да аутоматски ажурирате везе у вашој навигационој траци да бисте приказали тренутну активну везу на основу положаја померања.

Преклопне картице

Користите овај додатак да бисте картице и таблете учинили кориснијима тако што ћете им омогућити да прелазе кроз окна локалног садржаја са табовима.

Описи алатки

Ново схватање додатка јКуери Типси, савети се не ослањају на слике – они користе ЦСС3 за анимације и атрибуте података за локално складиштење наслова.

Поповерс *

Додајте мале слојеве садржаја, попут оних на иПад-у, било ком елементу за смештај секундарних информација.

* Захтева да буду укључени алати

Поруке упозорења

Додатак за упозорење је мала класа за додавање блиске функционалности упозорењима.

Дугмад

Урадите више са дугмадима. Контролишите стања дугмади или креирајте групе дугмади за више компоненти као што су траке са алаткама.

Колапс

Набавите основне стилове и флексибилну подршку за склопиве компоненте као што су хармонике и навигација.

Вртешка

Направите вртешку било ког садржаја који желите да пружите интерактивну пројекцију слајдова садржаја.

Типеахеад

Основни, лако проширени додатак за брзо креирање елегантних предњих слова са било којим уносом текста.

Прелази *

За једноставне ефекте транзиције, укључите боотстрап-транситион.јс једном да бисте клизнули у модали или угасила упозорења.

* Потребно за анимацију у додацима

Главу горе! Сви јавасцрипт додаци захтевају најновију верзију јКуери-ја.

О модалитетима

Поједностављен, али флексибилан, преузима традиционални јавасцрипт модални додатак са само минималном потребном функционалношћу и паметним подразумеваним подешавањима.

Скини докуменат

Статички пример

Испод је статички приказан модални.

Демо уживо

Пребаците модал преко јавасцрипт-а кликом на дугме испод. Клизиће надоле и избледети са врха странице.

Покрените демо модал

Коришћење боотстрап-модал

Позовите модални преко јавасцрипт-а:

  1. $ ( '#миМодал' ). модални ( опције )

Опције

Име тип Уобичајено Опис
позадина боолеан истинито Укључује елемент модалне позадине. Алтернативно, наведите staticза позадину која не затвара модал на клик.
тастатура боолеан истинито Затвара модал када се притисне тастер за излаз
Прикажи боолеан истинито Приказује модални када се иницијализира.

Означавање

Можете лако да активирате модале на својој страници без потребе да пишете ни један ред јавасцрипт-а. Само поставите data-toggle="modal"на елемент контролера са data-target="#foo"или href="#foo"који одговара ИД-у модалног елемента, а када се кликне, покренуће ваш модални.

Такође, да бисте додали опције својој модалној инстанци, само их укључите као додатне атрибуте података било на контролном елементу или на саму модалну маркацију.

  1. < а цласс = "бтн" дата- тоггле = "модал" хреф = "#миМодал" > Покрени модални < /а>
  1. <див цласс = "модал хиде" ид = "миМодал" >
  2. <див цласс = "модал-хеадер" >
  3. <буттон типе = "буттон" цласс = "цлосе" дата-дисмисс = "модал" > × </буттон>
  4. <х3> Модално заглавље </х3>
  5. </див>
  6. <див цласс = "модал-боди" >
  7. <п> Једно фино тело... </п>
  8. </див>
  9. <див цласс = "модал-фоотер" >
  10. < а хреф = "#" цласс = "бтн " дата-дисмисс = " модал" > Затвори < /а>
  11. < а хреф = "#" цласс = "бтн бтн-примари" > Сачувај промене < /а>
  12. </див>
  13. </див>
Главу горе! Ако желите да ваш модал анимира улази и излази, само додајте .fadeкласу .modalелементу (погледајте демо да бисте видели ово у акцији) и укључите боотстрап-транситион.јс.

Методе

.модал(опције)

Активира ваш садржај као модални. Прихвата опционе опције object.

  1. $ ( '#миМодал' ). модални ({
  2. тастатура : лажна
  3. })

.модал('тоггле')

Ручно пребацује модал.

  1. $ ( '#миМодал' ). модални ( 'искључи' )

.модал('схов')

Ручно отвара модал.

  1. $ ( '#миМодал' ). модални ( 'прикажи' )

.модал('сакриј')

Ручно сакрива модал.

  1. $ ( '#миМодал' ). модални ( 'сакриј' )

Догађаји

Боотстрап-ова модална класа излаже неколико догађаја за спајање на модалну функционалност.

Догађај Опис
Прикажи Овај догађај се покреће одмах када showсе позове метод инстанце.
показано Овај догађај се покреће када модал постане видљив кориснику (сачекаће да се цсс транзиције доврше).
сакрити Овај догађај се покреће одмах када hideсе позове метод инстанце.
сакривен Овај догађај се покреће када модал заврши са сакривањем од корисника (сачекаће да се цсс транзиције доврше).
  1. $ ( '#миМодал' ). он ( 'скривен' , функција () {
  2. // учини нешто…
  3. })

Додатак СцроллСпи служи за аутоматско ажурирање навигационих циљева на основу положаја померања.

Скини докуменат

Пример навигационе траке са сцроллспи-ом

Померите област испод и погледајте ажурирање навигације. Падајуће подставке ће такође бити истакнуте. Пробајте!

@дебео

Оглас хеланке кеитар, брунцх ид арт парти долор лаборе. Виле ир еним ло-фи пре него што су распродали куи. Тумблр права на бицикл од фарме до стола. Аним кеффииех царлес кардиган. Фото кабина Велита сеитана мцсвеенеија 3 волф моон ируре. Цосби џемпер ломо јеан шортс, Виллиамсбург хоодие миним куи за које вероватно нисте чули и кардиган труст фонд цулпа биодиесел вес андерсон аестхетиц. Нихил тетовирани акузамус, цред иронија биодизел кеффииех артисан улламцо цонсекуат.

@мдо

Вениам марфа бркови скејтборд, адиписицинг фугиат велит питцхфорк брада. Фрееган брада аликуа цупидатат мцсвеенеи'с веро. Цупидатат фоур локо ниси, еа хелветица нулла царлес. Тетовирани косби џемпер камион за храну, мцсвеенеи'с куис нон фрееган винил. Ло-фи вес андерсон +1 сарториал. Царлесова неестетска вежба куис гентрифи. Брооклин адиписицинг занатско пиво вице кеитар десерунт.

једно

Оццаецат цоммодо аликуа делецтус. Фап црафт пиво десерунт скејтборд еа. Ломо бицицле ригхтс адиписицинг банх ми, велит еа сунт нект левел лоцаворе кафа једног порекла у магна вениам. Хигх лифе ид винил, ецхо парк цонсекуат куис аликуип банх ми питцхфорк. Веро ВХС ест адиписицинг. Цонсецтетур ниси ДИИ мини торба за курир. Цред ек ин, одрживи делецтус цонсецтетур фанни пацк ипхоне.

два

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.

Кеитар твее блог, цулпа мессенгер баг марфа вхатевер делецтус фоод труцк. Сапиенте синтх ид аццептнда. Лоцаворе сед хелветица клише иронија, тхундерцатс за које вероватно нисте чули као последица ло-фи фап аликуипа дуксерица без глутена. Лаборе елит плацеат пре него што су распродати, Терри Рицхардсон проидент бранч несциунт куис цосби џемпер париатур кеффииех у хелветица артисан. Кардиган занатско пиво сеитан реадимаде велит. ВХС цхамбраи лаборис темпор вениам. Аним моллит миним цоммодо улламцо тхундерцатс.


Коришћење боотстрап-сцроллспи.јс

Позовите сцроллспи преко јавасцрипт-а:

  1. $ ( '#навбар' ). сцроллспи ()

Означавање

Да бисте лако додали понашање скроловања вашој навигацији на горњој траци, само додајте data-spy="scroll"елементу који желите да шпијунирате (најчешће то би било тело).

  1. <боди дата-спи = "сцролл" > ... </боди>
Главу горе! Везе за Навбар морају имати разлучиве циљеве ИД-а. На пример, <a href="#home">home</a>мора одговарати нечему у дому као што је <div id="home"></div>.

Методе

.сцроллспи('рефресх')

Када користите сцроллспи у комбинацији са додавањем или уклањањем елемената из ДОМ-а, мораћете да позовете метод освежавања на следећи начин:

  1. $ ( '[дата-спи="сцролл"]' ). свака ( функција () {
  2. вар $спи = $ ( ово ). сцроллспи ( 'освежи' )
  3. });

Опције

Име тип Уобичајено Опис
офсет број 10 Пиксели за померање од врха приликом израчунавања положаја померања.

Догађаји

Догађај Опис
активирати Овај догађај се покреће сваки пут када се нова ставка активира помоћу сцроллспи-а.

Овај додатак додаје брзу, динамичну функцију картица и таблета за прелазак кроз локални садржај.

Скини докуменат

Пример картица

Кликните на картице испод да бисте се пребацивали између скривених окна, чак и преко падајућих менија.

Сирови тексас за који вероватно нисте чули за фармерке Аустин. Несциунт тофу стумптовн аликуа, ретро синт мајстор за чишћење. Бркови клише темпор, Виллиамсбург Царлес веганска хелветица. Репрехендерит бутцхер ретро кеффииех дреамцатцхер синтх. Цосби џемпер еу банх ми, куи ируре Терри рицхардсон ек скуид. Аликуип плацеат салвиа циллум ипхоне. Сеитан аликуип куис кардиган америчка одећа, месар волуптате ниси куи.

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.


Коришћењем боотстрап-таб.јс

Омогућите картице са табулаторима путем јавасцрипт-а (свака картица треба да се активира појединачно):

  1. $ ( '#миТаб а' ). клик ( функција ( е ) {
  2. е . превентДефаулт ();
  3. $ ( ово ). таб ( 'прикажи' );
  4. })

Појединачне картице можете активирати на неколико начина:

  1. $ ( '#миТаб а[хреф="#профиле"]' ). таб ( 'прикажи' ); // Изаберите картицу по имену
  2. $ ( '#миТаб а:фирст' ). таб ( 'прикажи' ); // Изаберите прву картицу
  3. $ ( '#миТаб а:ласт' ). таб ( 'прикажи' ); // Изаберите последњу картицу
  4. $ ( '#миТаб ли:ек(2) а' ). таб ( 'прикажи' ); // Изаберите трећу картицу (индексирано 0)

Означавање

Можете активирати навигацију по картици или таблетама без писања било каквог јавасцрипта једноставним навођењем data-toggle="tab"или data-toggle="pill"на елементу. Додавањем класа и на картицу navпримениће се стил боотстрап картице.nav-tabsul

  1. <ул цласс = "нав нав-табс" >
  2. <ли>< а хреф = "# хоме" дата-тоггле = " таб" > Почетна </а ></ли>
  3. <ли>< а хреф = "# профиле" дата-тоггле = " таб" > Профил </а ></ли>
  4. <ли>< а хреф = "# мессагес" дата-тоггле = " таб" > Поруке </а ></ли>
  5. <ли>< а хреф = "# сеттингс" дата-тоггле = " таб" > Подешавања </а ></ли>
  6. </ул>

Методе

$().таб

Активира елемент картице и контејнер садржаја. Картица би требало да има data-targetили hrefциљни чвор контејнера у ДОМ-у.

  1. <ул цласс = "нав нав-табс" ид = "миТаб" >
  2. <ли цласс = "ацтиве" >< а хреф = "#хоме" > Почетна </а ></ли>
  3. <ли>< а хреф = "#профиле" > Профил </а ></ли>
  4. <ли>< а хреф = "#мессагес" > Поруке </а ></ли>
  5. <ли>< а хреф = "#сеттингс" > Подешавања </а ></ли>
  6. </ул>
  7.  
  8. <див цласс = "таб-цонтент" >
  9. <див цласс = "таб-пане ацтиве" ид = "хоме" > ... </див>
  10. <див цласс = "таб-пане" ид = "профиле" > ... </див>
  11. <див цласс = "таб-пане" ид = "мессагес" > ... </див>
  12. <див цласс = "таб-пане" ид = "сеттингс" > ... </див>
  13. </див>
  14.  
  15. <сцрипт>
  16. $ ( функција () {
  17. $ ( '#миТаб а:ласт' ). таб ( 'прикажи' );
  18. })
  19. </сцрипт>

Догађаји

Догађај Опис
Прикажи Овај догађај се покреће у емисији картице, али пре него што је нова картица приказана. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
показано Овај догађај се покреће у емисији картице након што се картица прикаже. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
  1. $ ( 'а[дата-тоггле="таб"]' ). он ( 'приказано' , функција ( е ) {
  2. е . циљ // активирана картица
  3. е . релатедТаргет // претходна картица
  4. })

О саветима

Инспирисан одличним јКуери.типси додатком који је написао Јасон Фраме; Алати су ажурирана верзија, која се не ослања на слике, користи цсс3 за анимације и атрибуте података за локално складиштење наслова.

Скини докуменат

Пример употребе алатки

Пређите курсором преко линкова испод да бисте видели савете са алаткама:

Уске панталоне следећег нивоа кефије за које вероватно нисте чули. Фото штанд брада сирови тексас висока штампа веганска торба за гласнике стумптовн. Сеитан од фарме до стола, мцсвеенеи'с фикие одржива киноа 8-битна америчка одећа има винил цхамбраи од терри рицхардсон-а. Брада стумптовн, кардигани банх ми ломо тхундерцатс. Тофу биодизел Виллиамсбург марфа, четири локо мцсвеенеи'с цлеансе веган цхамбраи. Заиста ироничан занатлија без обзира на кеитар , сценестер од фарме до стола Банкси Аустин твиттер обрађује фрееган цред сирови тексас извор кафе једног порекла.


Коришћење боотстрап-тоолтип.јс

Покрени објашњење путем јавасцрипт-а:

  1. $ ( '#екампле' ). опис алата ( опције )

Опције

Име тип Уобичајено Опис
анимација боолеан истинито примените цсс фаде прелаз на опис алата
постављање стринг|функција 'врх' како позиционирати опис алата - врх | боттом | лево | јел тако
селектор низ лажно Ако је обезбеђен селектор, објекти описа алата ће бити делегирани наведеним циљевима.
наслов стринг | функција '' подразумевана вредност наслова ако ознака `титле` није присутна
Окидач низ 'лебдети' како се алатка покреће - лебдите | фокус | упутство
кашњење број | објекат 0

одлагање приказивања и сакривања описа алата (мс) - не примењује се на тип ручног окидача

Ако је наведен број, кашњење се примењује и на сакривање/прикажи

Структура објекта је:delay: { show: 500, hide: 100 }

Главу горе! Опције за појединачне описе алата могу се алтернативно специфицирати коришћењем атрибута података.

Означавање

Из разлога перформанси, Тоолтип и Поповер дата-апис су укључени. Ако желите да их користите, само наведите опцију бирача.

  1. < а хреф = "#" рел = "тоолтип" титле = "фирст тоолтип" > задржите показивач изнад мене < /а>

Методе

$().тоолтип(оптионс)

Прилаже руковао описом алата колекцији елемената.

.тоолтип('схов')

Открива опис елемента.

  1. $ ( '#елемент' ). опис алата ( 'прикажи' )

.тоолтип('хиде')

Сакрива опис елемента.

  1. $ ( '#елемент' ). опис алата ( 'сакриј' )

.тоолтип('тоггле')

Укључује опис елемента.

  1. $ ( '#елемент' ). опис алата ( 'пребацити' )

О поповерима

Додајте мале слојеве садржаја, попут оних на иПад-у, било ком елементу за смештај секундарних информација.

* Захтева да буде укључен Тоолтип

Скини докуменат

Пример искачућег приказа

Пређите курсором преко дугмета да бисте покренули искачући прозор.


Коришћење боотстрап-поповер.јс

Омогућите искачуће приказе путем јавасцрипт-а:

  1. $ ( '#екампле' ). поповер ( опције )

Опције

Име тип Уобичајено Опис
анимација боолеан истинито примените цсс фаде прелаз на опис алата
постављање стринг|функција 'јел тако' како позиционирати искачући повер - врх | боттом | лево | јел тако
селектор низ лажно ако је обезбеђен селектор, објекти описа алата ће бити делегирани наведеним циљевима
Окидач низ 'лебдети' како се алатка покреће - лебдите | фокус | упутство
наслов стринг | функција '' подразумевана вредност наслова ако атрибут `титле` није присутан
садржаја стринг | функција '' подразумевана вредност садржаја ако атрибут `дата-цонтент` није присутан
кашњење број | објекат 0

одлагање приказивања и сакривања искачућег екрана (мс) - не примењује се на тип ручног окидача

Ако је наведен број, кашњење се примењује и на сакривање/прикажи

Структура објекта је:delay: { show: 500, hide: 100 }

Главу горе! Опције за појединачне искачуће опције могу се алтернативно специфицирати коришћењем атрибута података.

Означавање

Из разлога перформанси, Тоолтип и Поповер дата-апис су укључени. Ако желите да их користите, само наведите опцију бирача.

Методе

$().поповер(опције)

Иницијализује искачуће прозоре за колекцију елемената.

.поповер('схов')

Открива искачући елемент.

  1. $ ( '#елемент' ). поповер ( 'прикажи' )

.поповер('сакриј')

Сакрива искачући прозор елемената.

  1. $ ( '#елемент' ). поповер ( 'сакриј' )

.поповер('тоггле')

Пребацује искачући прозор елемената.

  1. $ ( '#елемент' ). поповер ( 'пребацити' )

О упозорењима

Додатак за упозорење је мала класа за додавање блиске функционалности упозорењима.

Преузимање

Пример упозорења

Додатак за упозорења ради на редовним порукама упозорења и блокираним порукама.

Холи гуацамоле! Најбоље да се провери, не изгледаш баш добро.

Ох снап! Имате грешку!

Промените ово и то и покушајте поново. Дуис моллис, ест нон цоммодо луцтус, ниси ерат порттитор лигула, егет лациниа одио сем нец елит. Црас маттис цонсецтетур пурус сит амет ферментум.

Предузмите ову акцију Или уради ово


Коришћење боотстрап-алерт.јс

Омогућите одбацивање упозорења путем јавасцрипт-а:

  1. $ ( ".упозорење" ). упозорење ()

Означавање

Само додајте data-dismiss="alert"дугме за затварање да бисте аутоматски дали функцију за затварање упозорења.

  1. < а цласс = "цлосе " дата-дисмисс = " алерт" хреф = "#" > &тимес; </а>

Методе

$().алерт()

Обмотава сва упозорења са блиском функционалношћу. Да би се ваша упозорења анимирала када су затворена, уверите се да су на њих већ примењена класа .fadeи ..in

.алерт('цлосе')

Затвара упозорење.

  1. $ ( ".упозорење" ). упозорење ( 'затвори' )

Догађаји

Боотстрап-ова класа упозорења излаже неколико догађаја за повезивање са функционалношћу упозорења.

Догађај Опис
Близу Овај догађај се покреће одмах када closeсе позове метод инстанце.
затворено Овај догађај се покреће када је упозорење затворено (сачекаће да се цсс транзиције доврше).
  1. $ ( '#ми-алерт' ). бинд ( 'затворено' , функција () {
  2. // учини нешто…
  3. })

О томе

Урадите више са дугмадима. Контролишите стања дугмади или креирајте групе дугмади за више компоненти као што су траке са алаткама.

Скини докуменат

Пример употребе

Користите додатак дугмади за стања и прекидаче.

Статефул
Сингле свитцх
Поље за потврду
Радио

Коришћењем боотстрап-буттон.јс

Омогућите дугмад преко јавасцрипт-а:

  1. $ ( '.нав-табс' ). дугме ()

Означавање

Атрибути података су саставни део додатка дугмета. Погледајте пример кода у наставку за различите типове означавања.

  1. <!-- Додајте дата-тоггле="буттон" да бисте активирали пребацивање на једном дугмету -->
  2. <буттон цласс = "бтн" дата-тоггле = "буттон" > Један прекидач </буттон>
  3.  
  4. <!-- Додајте дата-тоггле="буттонс-цхецкбок" за укључивање стила поља за потврду на бтн-гроуп -->
  5. <див цласс = "бтн-гроуп" дата-тоггле = "буттонс-цхецкбок" >
  6. <буттон цласс = "бтн" > Лево </буттон>
  7. <буттон цласс = "бтн" > Средња </буттон>
  8. <буттон цласс = "бтн" > Десно </буттон>
  9. </див>
  10.  
  11. <!-- Додајте дата-тоггле="буттонс-радио" за укључивање стила радија на бтн-гроуп -->
  12. <див цласс = "бтн-гроуп" дата-тоггле = "буттонс-радио" >
  13. <буттон цласс = "бтн" > Лево </буттон>
  14. <буттон цласс = "бтн" > Средња </буттон>
  15. <буттон цласс = "бтн" > Десно </буттон>
  16. </див>

Методе

$().буттон('тоггле')

Пребацује стање притиска. Даје дугмету изглед да је активирано.

Главу горе! Можете омогућити аутоматско пребацивање дугмета помоћу data-toggleатрибута.
  1. <буттон цласс = "бтн" дата-тоггле = "буттон" > </буттон>

$().буттон('лоадинг')

Поставља стање дугмета на учитавање - онемогућава дугме и мења текст у текст за учитавање. Текст за учитавање треба да буде дефинисан на елементу дугмета помоћу атрибута података data-loading-text.

  1. <буттон цласс = "бтн" дата-лоадинг-тект = "учитавање ствари..." > ... </буттон>
Главу горе! Фирефок одржава стање онемогућено током учитавања страница . Заобилазно решење за ово је коришћење autocomplete="off".

$().буттон('ресет')

Ресетује стање дугмета - мења текст оригиналним текстом.

$().буттон(стринг)

Ресетује стање дугмета - мења текст у било које стање текста дефинисано подацима.

  1. <буттон цласс = "бтн" дата-цомплете-тект = "готово!" > ... </буттон>
  2. <сцрипт>
  3. $ ( '.бтн' ). дугме ( 'завршено' )
  4. </сцрипт>

О томе

Набавите основне стилове и флексибилну подршку за склопиве компоненте као што су хармонике и навигација.

Скини докуменат

* Захтева да додатак Транситионс буде укључен.

Пример хармонике

Користећи додатак за колапс, направили смо једноставан виџет у стилу хармонике:

Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.
Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.
Аним париатур цлицхе репрехендерит, еним еиусмод хигх лифе оптужба Терри рицхардсон ад лигње. 3 волф моон оффициа ауте, нон цупидатат скатебоард долор брунцх. Камион за храну куиноа несциунт лаборум еиусмод. Брунцх 3 волф моон темпор, сунт аликуа ставио птицу на то лигње кафа једног порекла нулла аццептнда схоредитцх ет. Нихил аним кеффииех хелветица, црафт пиво лаборе вес андерсон цред несциунт сапиенте еа проидент. Ад веган осим месар вице ломо. Хеланке оццаецат црафт пиво од фарме до стола, сирови деним естетски синтисајзер несциунт за које вероватно нисте чули Аццузамус Лабе сустаинабле ВХС.

Коришћење боотстрап-цоллапсе.јс

Омогући путем јавасцрипт-а:

  1. $ ( ".цоллапсе" ). колапс ()

Опције

Име тип Уобичајено Опис
родитељ селектор лажно Ако је селектор онда ће сви склопиви елементи испод наведеног надређеног бити затворени када се прикаже ова склопива ставка. (слично традиционалном понашању хармонике)
искључи боолеан истинито Укључује склопиви елемент при позивању

Означавање

Само додајте data-toggle="collapse"и data-targetелемент у да бисте аутоматски доделили контролу над склопивим елементом. Атрибут data-targetприхвата цсс селектор за примену скупљања. Обавезно додајте класу collapseу склопиви елемент. Ако желите да се подразумевано отвори, додајте додатну класу in.

  1. <буттон цласс = "бтн бтн-дангер" дата-тоггле = "цоллапсе" дата-таргет = "#демо" >
  2. једноставно склопиво
  3. </буттон>
  4.  
  5. <див ид = "демо" цласс = "цоллапсе ин" > </див>
Главу горе! Да бисте склопивој контроли додали управљање групом налик хармоници, додајте атрибут података data-parent="#selector". Погледајте демо да видите ово у акцији.

Методе

.цоллапсе (опције)

Активира ваш садржај као склопиви елемент. Прихвата опционе опције object.

  1. $ ( '#миЦоллапсибле' ). колапс ({
  2. прекидач : лажно
  3. })

.цоллапсе('тоггле')

Пребацује склопиви елемент на приказан или скривен.

.цоллапсе('прикажи')

Приказује склопиви елемент.

.цоллапсе('сакриј')

Сакрива склопиви елемент.

Догађаји

Боотстрап-ова класа колапса излаже неколико догађаја за спајање на функционалност колапса.

Догађај Опис
Прикажи Овај догађај се покреће одмах када showсе позове метод инстанце.
показано Овај догађај се покреће када се кориснику учини видљивим елемент сажимања (сачекаће да се цсс транзиције доврше).
сакрити Овај догађај се покреће одмах када се hideметода позове.
сакривен Овај догађај се покреће када је елемент сажимања сакривен од корисника (сачекаће да се цсс транзиције доврше).
  1. $ ( '#миЦоллапсибле' ). он ( 'скривен' , функција () {
  2. // учини нешто…
  3. })

О томе

Основни, лако проширени додатак за брзо креирање елегантних предњих слова са било којим уносом текста.

Скини докуменат

Пример

Почните да куцате у поље испод да бисте приказали резултате унапред.


Коришћење боотстрап-типеахеад.јс

Позовите куцање унапред путем јавасцрипт-а:

  1. $ ( '.типеахеад' ). укуцај унапред ()

Опције

Име тип Уобичајено Опис
извор низ [ ] Извор података за испитивање.
ставке број 8 Максималан број ставки за приказ у падајућем менију.
матцхер функција неосетљив случај Метод који се користи за одређивање да ли се упит подудара са ставком. Прихвата један аргумент, itemпротив којег се тестира упит. Приступите тренутном упиту помоћу this.query. Врати логички trueако се упит подудара.
сортер функција тачно подударање,
осетљиво на велика и
мала слова
Метода која се користи за сортирање резултата аутодовршавања. Прихвата један аргумент itemsи има опсег инстанце испред типа. Позовите тренутни упит са this.query.
хигхлигхтер функција истиче сва подразумевана подударања Метода која се користи за истицање резултата аутодовршавања. Прихвата један аргумент itemи има опсег инстанце испред типа. Требало би да врати хтмл.

Означавање

Додајте атрибуте података да бисте регистровали елемент са функцијом унапред укуцавања.

  1. <инпут типе = "тект" дата-провиде = "типеахеад" >

Методе

.типеахеад (опције)

Иницијализује унос са типом унапред.