Појединачно или састављено

Додаци се могу укључити појединачно (иако неки имају потребне зависности) или све одједном. И боотстрап.јс и боотстрап.мин.јс садрже све додатке у једној датотеци.

Атрибути података

Можете користити све додатке за Боотстрап искључиво преко АПИ-ја за означавање без писања ниједног реда ЈаваСцрипт-а. Ово је Боотстрап-ов првокласни АПИ и требало би да буде ваша прва пажња када користите додатак.

Међутим, у неким ситуацијама може бити пожељно да искључите ову функцију. Због тога, такође пружамо могућност да онемогућимо АПИ атрибута података тако што ћемо поништити све догађаје у телу именима са `'дата-апи'`. ово изгледа овако:

$ ( 'тело' ). искључено ( '.дата-апи' )

Алтернативно, да бисте циљали одређени додатак, само укључите име додатка као именски простор заједно са дата-апи именским простором овако:

$ ( 'тело' ). искључено ( '.алерт.дата-апи' )

Програмски АПИ

Такође верујемо да би требало да будете у могућности да користите све додатке за Боотстрап искључиво преко ЈаваСцрипт АПИ-ја. Сви јавни АПИ-ји су једноструки, ланчани методи и враћају колекцију на коју се поступа.

$ ( ".бтн.дангер" ). дугме ( "искључи" ). аддЦласс ( "дебео" )

Све методе треба да прихвате опциони објекат опција, стринг који циља одређени метод или ништа (што покреће додатак са подразумеваним понашањем):

$ ( "#миМодал" ). модал () // иницијализован са подразумеваним вредностима                       
$ ( "#миМодал" ). модални ({ кеибоард : фалсе }) // иницијализовано без тастатуре     
$ ( "#миМодал" ). модал ( 'схов' ) // иницијализује и одмах позива схов                

Сваки додатак такође излаже свој сирови конструктор на својству `Конструктора`: $.fn.popover.Constructor. Ако желите да добијете одређену инстанцу додатка, преузмите је директно из елемента: $('[rel=popover]').data('popover').

Без сукоба

Понекад је потребно користити додатке за Боотстрап са другим оквирима корисничког интерфејса. У овим околностима повремено се могу појавити колизије простора имена. Ако се то догоди, можете позвати .noConflictдодатак којем желите да вратите вредност.

вар боотстрапБуттон = $ . фн . дугме . ноЦонфлицт () // враћање $.фн.буттон на претходно додељену вредност 
$ . фн . боотстрапБтн = боотстрапБуттон             // дај $().боотстрапБтн функционалност боотстрап-а

Догађаји

Боотстрап обезбеђује прилагођене догађаје за већину јединствених радњи додатака. Генерално, они долазе у облику инфинитива и партиципа у прошлости – где се инфинитив (нпр. show) покреће на почетку догађаја, а његов глаголски облик у прошлости (нпр. shown) се покреће по завршетку радње.

Сви инфинитивни догађаји пружају функцију превентДефаулт. Ово пружа могућност заустављања извршења радње пре него што она почне.

$ ( '#миМодал' ). он ( 'прикажи' , функција ( е ) {   
    иф (! дата ) врати е . превентДефаулт () // зауставља приказ модала   
})

О прелазима

За једноставне ефекте транзиције, укључите боотстрап-транситион.јс једном уз друге ЈС датотеке. Ако користите компајлирани (или минимизирани) боотстрап.јс , нема потребе да ово укључујете – већ је ту.

Случајеви употребе

Неколико примера додатка за транзицију:

• Клизање или бледење у модалима
• Фадинг оут табс
• Упозорења која се гасе
• Клизна карусел окна

Примери

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

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

Приказани модални са заглављем, телом и скупом радњи у подножју.

<див цласс = "модал хиде фаде" > 
  <див цласс = "модал-хеадер" > 
    <буттон типе = "буттон" цласс = "цлосе" дата-дисмисс = "модал" ариа-хидден = "труе" > &тимес; </буттон>    
    <х3> Модално заглавље </х3>
  </див>
  <див цласс = "модал-боди" > 
    <п> Једно фино тело... </п>
  </див>
  <див цласс = "модал-фоотер" > 
    < а хреф = "#" цласс = "бтн" > Затвори < /а>  
    < а хреф = "#" цласс = "бтн бтн-примари" > Сачувај промене < /а>  
  </див>
</див>

Демо уживо

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

<!-- Дугме за активирање модалног -->
< а хреф = "#миМодал" роле = "буттон" цласс = "бтн " дата- тоггле = "модал" > Покрени демо модал < /а>    
 
<!-- Модал -->
<див ид = "миМодал" цласс = "модал хиде фаде" табиндек = "-1" роле = "диалог" ариа-лабелледби = "миМодалЛабел" ариа-хидден = "труе" >      
  <див цласс = "модал-хеадер" > 
    <буттон типе = "буттон" цласс = "цлосе" дата-дисмисс = "модал" ариа-хидден = "труе" > × </буттон>    
    <х3 ид = "миМодалЛабел" > Модално заглавље </х3> 
  </див>
  <див цласс = "модал-боди" > 
    <п> Једно фино тело... </п>
  </див>
  <див цласс = "модал-фоотер" > 
    <буттон цласс = "бтн" дата-дисмисс = "модал" ариа-хидден = "труе" > Затвори </буттон>   
    <буттон цласс = "бтн бтн-примари" > Сачувај промене </буттон> 
  </див>
</див>

Употреба

Преко атрибута података

Активирајте модал без писања ЈаваСцрипт-а. Поставите data-toggle="modal"на елемент контролера, попут дугмета, заједно са data-target="#foo"или href="#foo"да бисте циљали одређени модал за пребацивање.

<буттон типе = "буттон" дата-тоггле = "модал" дата-таргет = "#миМодал" > Покрени модални </буттон>   

Преко ЈаваСцрипт-а

Позовите модални са ИД myModal-ом са једном линијом ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-backdrop="".

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

Методе

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

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

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

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

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

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

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

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

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

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

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

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

Догађаји

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

$ ( '#миМодал' ). он ( 'скривен' , функција () {   
  // учини нешто…
})

Примери

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

У оквиру навигационе траке

У оквиру картица

Употреба

Преко атрибута података

Додајте data-toggle="dropdown"везу или дугме да бисте укључили падајући мени.

<див цласс = "падајући" > 
  < а цласс = "дропдовн -тоггле" дата- тоггле = "дропдовн" хреф = "#" > Окидач падајућег менија < /а>   
  <ул цласс = "дропдовн-мену" роле = "мену" ариа-лабелледби = "дЛабел" >   
    ...
  </ул>
</див>

Да би УРЛ-ови остали нетакнути, користите data-targetатрибут уместо href="#".

<див цласс = "падајући" > 
  < а цласс = "дропдовн-тоггле" ид = "дЛабел" роле = "буттон " дата- тоггле = "дропдовн " дата- таргет = "#" хреф = "/паге.хтмл" >      
    Испустити
    <б цласс = "царет" ></б> 
  </а>
  <ул цласс = "дропдовн-мену" роле = "мену" ариа-лабелледби = "дЛабел" >   
    ...
  </ул>
</див>

Преко ЈаваСцрипт-а

Позовите падајуће меније преко ЈаваСцрипт-а:

$ ( '.дропдовн-тоггле' ). падајући мени ()

Опције

Ниједан

Методе

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

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

Пример у навигационој траци

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

Употреба

Преко атрибута података

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

<боди дата-спи = "сцролл" дата-таргет = ".навбар" > ... </боди>  

Преко ЈаваСцрипт-а

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

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

Методе

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

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

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-offset="".

Догађаји

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

Додајте брзу, динамичку функционалност картица за прелазак кроз окна локалног садржаја, чак и преко падајућих менија.

Употреба

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

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

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

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

Означавање

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

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

Методе

$().таб

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

<ул цласс = "нав нав-табс" ид = "миТаб" >  
  <ли цласс = "ацтиве" >< а хреф = "#хоме" > Почетна </а ></ли>  
  <ли>< а хреф = "#профиле" > Профил </а ></ли> 
  <ли>< а хреф = "#мессагес" > Поруке </а ></ли> 
  <ли>< а хреф = "#сеттингс" > Подешавања </а ></ли> 
</ул>
 
<див цласс = "таб-цонтент" > 
  <див цласс = "таб-пане ацтиве" ид = "хоме" > ... </див>  
  <див цласс = "таб-пане" ид = "профиле" > ... </див>  
  <див цласс = "таб-пане" ид = "мессагес" > ... </див>  
  <див цласс = "таб-пане" ид = "сеттингс" > ... </див>  
</див>
 
<сцрипт>
  $ ( функција () {  
    $ ( '#миТаб а:ласт' ). таб ( 'прикажи' );
  })
</сцрипт>

Догађаји

$ ( 'а[дата-тоггле="таб"]' ). он ( 'приказано' , функција ( е ) {   
  е . циљ // активирана картица
  е . релатедТаргет // претходна картица
})

Примери

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

Из разлога перформанси, опис алата и искачући апис података су укључени, што значи да их морате сами иницијализирати .

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

Четири правца

Објашњења у групама за унос

Када користите описе алата и искачуће поруке са улазним групама Боотстрап, мораћете да подесите containerопцију (документовано у наставку) да бисте избегли нежељене нежељене ефекте.

Употреба

Покрени опис алатке преко ЈаваСцрипт-а:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Означавање

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

Методе

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

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

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

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

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

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

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

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

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

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

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

.тоолтип('дестрои')

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

$ ( '#елемент' ). тоолтип ( 'уништи' )

Примери

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

Статички искачући приказ

Доступне су четири опције: горе, десно, доле и поравнато лево.

Не приказује се ознака јер се искачући огласи генеришу из ЈаваСцрипт-а и садржаја унутар dataатрибута.

Демо уживо

Четири правца

Употреба

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

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-animation="".

Означавање

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

Методе

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

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

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

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

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

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

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

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

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

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

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

.поповер('уништи')

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

$ ( '#елемент' ). поповер ( 'уништити' )

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

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

Употреба

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

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

Означавање

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

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

Методе

$().алерт()

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

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

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

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

Догађаји

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

$ ( '#ми-алерт' ). бинд ( 'затворено' , функција () {   
  // учини нешто…
})

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

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

Статефул

Додајте data-loading-text="Loading..."да бисте користили стање учитавања на дугмету.

<буттон типе = "буттон" цласс = "бтн бтн-примари" дата-лоадинг-тект = "Учитавам..." > Стање учитавања </буттон>   

Сингле свитцх

Додајте data-toggle="button"да бисте активирали пребацивање на једном дугмету.

<буттон типе = "буттон" цласс = "бтн бтн-примари" дата-тоггле = "буттон" > Једноструки прекидач </буттон>   

Поље за потврду

Додајте data-toggle="buttons-checkbox"за укључивање стила поља за потврду на бтн-групи.

<див цласс = "бтн-гроуп" дата-тоггле = "буттонс-цхецкбок" >  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Лево </буттон>  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Средња </буттон>  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Десно </буттон>  
</див>

Радио

Додај data-toggle="buttons-radio"за укључивање радио стила на бтн-групи.

<див цласс = "бтн-гроуп" дата-тоггле = "буттонс-радио" >  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Лево </буттон>  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Средња </буттон>  
  <буттон типе = "буттон" цласс = "бтн бтн-примари" > Десно </буттон>  
</див>

Употреба

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

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

Означавање

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

Опције

Ниједан

Методе

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

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

<буттон типе = "буттон" цласс = "бтн" дата-тоггле = "буттон" > … </буттон>    

$().буттон('учитавање')

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

<буттон типе = "буттон" цласс = "бтн" дата-лоадинг-тект = "учитавање ствари..." > ... </буттон>    

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

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

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

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

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

О томе

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

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

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

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

<див цласс = "аццордион" ид = "аццордион2" >  
  <див цласс = "аццордион-гроуп" > 
    <див цласс = "аццордион-хеадинг" > 
      < а цласс = "аццордион -тоггле" дата- тоггле = "цоллапсе " дата- парент = " #аццордион2" хреф = "#цоллапсеОне" >    
        Ставка групе која се може склопити бр. 1
      </а>
    </див>
    <див ид = "цоллапсеОне" цласс = "тело хармонике колапс у" >  
      <див цласс = "аццордион-иннер" > 
        Аним париатур клише...
      </див>
    </див>
  </див>
  <див цласс = "аццордион-гроуп" > 
    <див цласс = "аццордион-хеадинг" > 
      < а цласс = "аццордион -тоггле" дата- тоггле = "цоллапсе " дата- парент = " #аццордион2" хреф = "#цоллапсеТво" >    
        Ставка групе која се може склопити #2
      </а>
    </див>
    <див ид = "цоллапсеТво" цласс = "хармоника-тело колапс" >  
      <див цласс = "аццордион-иннер" > 
        Аним париатур клише...
      </див>
    </див>
  </див>
</див>
...

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

<буттон типе = "буттон" цласс = "бтн бтн-дангер" дата-тоггле = "цоллапсе" дата-таргет = "#демо" >    
  једноставно склопиво
</буттон>
 
<див ид = "демо" цласс = "цоллапсе ин" > … </див>  

Употреба

Преко атрибута података

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

Да бисте склопивој контроли додали управљање групом налик хармоници, додајте атрибут података data-parent="#selector". Погледајте демо да видите ово у акцији.

Преко ЈаваСцрипт-а

Омогућите ручно помоћу:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-parent="".

Методе

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

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

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

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

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

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

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

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

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

Догађаји

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

$ ( '#миЦоллапсибле' ). он ( 'скривен' , функција () {   
  // учини нешто…
})

Пример вртешке

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

Ознака прве сличице

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

Ознака друге сличице

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

Тхирд Тхумбнаил лабел

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

‹ ›

<див ид = "миЦароусел" цласс = "цароусел слиде" >  
  <ол цласс = "карусел-индикатори" > 
    <ли дата-таргет = "#миЦароусел" дата-слиде-то = "0" цласс = "ацтиве" ></ли>   
    <ли дата-таргет = "#миЦароусел" дата-слиде-то = "1" ></ли>  
    <ли дата-таргет = "#миЦароусел" дата-слиде-то = "2" ></ли>  
  </ол>
  <!-- Ставке вртешке -->
  <див цласс = "цароусел-иннер" > 
    <див цласс = "активна ставка" > … </див> 
    <див цласс = "итем" > … </див> 
    <див цласс = "итем" > … </див> 
  </див>
  <!-- Цароусел нав -->
  < а цласс = "цароусел-цонтрол лефт" хреф = "# миЦароусел " дата- слиде = "прев" > &лсакуо; </а>   
  < а цласс = "цароусел-цонтрол ригхт" хреф = "#миЦароусел " дата- слиде = "нект" > &рсакуо; </а>   
</див>

Употреба

Преко атрибута података

Користите атрибуте података да лако контролишете положај вртешке. data-slideприхвата кључне речи prevили next, што мења положај слајда у односу на његову тренутну позицију. Алтернативно, користите data-slide-toза прослеђивање сировог индекса слајда на вртешку data-slide-to="2", што прескаче позицију слајда на одређени индекс који почиње са 0.

Преко ЈаваСцрипт-а

Ручно позовите вртешку помоћу:

$ ( '.вртуљак' ). вртешка ()

Опције

Опције се могу пренети преко атрибута података или ЈаваСцриптз-а. За атрибуте података додајте име опције у data-, као у data-interval="".

Методе

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

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

$ ( '.вртуљак' ). вртешка ({
  интервал : 2000 
})

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

Кружи кроз ставке вртешке с лева на десно.

.цароусел('пауза')

Спречава вртешку да се креће кроз ставке.

.цароусел(број)

Кружи вртешку до одређеног оквира (на основу 0, слично низу).

.цароусел('прев')

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

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

Прелази на следећу ставку.

Догађаји

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

Пример

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

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

Желите да подесите autocomplete="off"да спречите да се подразумевани менији прегледача појављују преко падајућег менија Боотстрап типеахеад.

Употреба

Преко атрибута података

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

Преко ЈаваСцрипт-а

Ручно позовите претходни тип помоћу:

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-source="".

Методе

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

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

Пример

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

Употреба

Преко атрибута података

Да бисте лако додали понашање афикса било ком елементу, само додајте data-spy="affix"елементу који желите да шпијунирате. Затим користите помаке да дефинишете када да укључите или искључите качење елемента.

<див дата-спи = "аффик" дата-оффсет-топ = "200" > ... </див>  

Преко ЈаваСцрипт-а

Позовите афикс додатак преко ЈаваСцрипт-а:

$ ( '#навбар' ). афикс ()

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-offset-top="200".