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

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

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

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

Демо уживо

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

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

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

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

Опције

Означавање

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

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

< а цласс = "бтн" дата- тоггле = "модал" хреф = "#миМодал" > Покрени модални < /а>    

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

Методе

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

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

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

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

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

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

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

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

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

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

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

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

Догађаји

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

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

О падајућим менијима

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

Примери

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

• Редовна веза
• Испустити
  • Action
  • Another action
  • Something else here
  • Separated link
• Падајући мени 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Падајући мени 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

Означавање

Да бисте брзо додали функционалност падајућег менија било ком елементу, само додајте data-toggle="dropdown"и сваки важећи падајући мени за покретање ће се аутоматски активирати.

<ул цласс = "нав нав-пиллс" > 
  <ли цласс = "ацтиве" >< а хреф = "#" > Редовна веза </а ></ли>  
  <ли цласс = "дропдовн " ид = "мену1" >  
    < а цласс = "дропдовн -тоггле" дата- тоггле = "дропдовн" хреф = "#мену1" >   
      Испустити
      <б цласс = "царет" ></б> 
    </а>
    <ул цласс = "падајући мени" > 
      <ли>< а хреф = "# " > Радња </а ></ли> 
      <ли>< а хреф = "#" > Још једна радња </а ></ли> 
      <ли>< а хреф = "#" > Овде још нешто </а ></ли> 
      <ли цласс = "дивидер" ></ли> 
      <ли>< а хреф = "#" > Одвојена веза </а ></ли> 
    </ул>
  </ли>
  ...
</ул>

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

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

Методе

$().падајући()

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

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

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

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

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

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

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

Означавање

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

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

Методе

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

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

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

Опције

Догађаји

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

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

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

• Кућа
• Профил
• Испустити
  • @fat
  • @mdo

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

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

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

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

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

Означавање

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

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

Методе

$().таб

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

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

Догађаји

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

О саветима

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

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

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

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

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

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

Опције

Означавање

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

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

Методе

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

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

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

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

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

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

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

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

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

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

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

О поповерима

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

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

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

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

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

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

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

Опције

Означавање

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

Методе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Означавање

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

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

Методе

$().алерт()

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

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

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

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

Догађаји

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

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

О томе

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

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

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

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

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

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

Означавање

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

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

Методе

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

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

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

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

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

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

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

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

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

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

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

О томе

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

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

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

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

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

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

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

Опције

Означавање

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

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

Методе

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

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

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

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

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

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

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

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

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

Догађаји

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

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

О томе

Генерички додатак за кретање кроз елементе. Вртешка.

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

Погледајте слидесхов испод.

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

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

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

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

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

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

‹ ›

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

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

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

Опције

Означавање

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

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

Методе

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

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

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

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

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

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

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

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

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

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

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

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

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

Догађаји

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

О томе

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

Пример

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

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

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

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

Опције

Означавање

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

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

Методе

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

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