Индивидуални или составени

Приклучоците може да се вклучат поединечно (иако некои бараат зависност) или сите одеднаш. И bootstrap.js и bootstrap.min.js ги содржат сите приклучоци во една датотека.

Атрибути на податоци

Можете да ги користите сите приклучоци за Bootstrap чисто преку API за обележување без да пишувате ниту една линија JavaScript. Ова е API од прва класа на Bootstrap и треба да биде вашето прво внимание кога користите приклучок.

Сепак, во некои ситуации може да биде пожелно да се исклучи оваа функционалност. Затоа, ние исто така обезбедуваме можност за оневозможување на атрибутот на податоци API со разврзување на сите настани на просторот за име на телото со ``data-api``. Ова изгледа вака:

$ ( „тело“ ). исклучено ( „.data-api“ )

Алтернативно, за да насочите конкретен приклучок, само вклучете го името на приклучокот како именски простор заедно со именскиот простор за податоци-api вака:

$ ( „тело“ ). исклучено ( „.alert.data-api“ )

Програмски API

Ние, исто така, веруваме дека треба да можете да ги користите сите приклучоци за Bootstrap чисто преку JavaScript API. Сите јавни API се единечни, верижни методи и ја враќаат колекцијата по која е постапено.

$ ( ".btn.danger" ). копче ( „префрли“ ). addClass ( „масти“ )

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

$ ( „#myModal“ ). модален () // иницијализиран со стандардни                       
$ ( „#myModal“ ). модален ({ тастатура : неточно }) // иницијализиран без тастатура     
$ ( „#myModal“ ). модален ( 'покажи' ) // иницијализира и веднаш го повикува прикажувањето                

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

Без конфликт

Понекогаш е неопходно да се користат приклучоци за Bootstrap со други рамки за интерфејс. Во овие околности, повремено може да се појават судири на именскиот простор. Ако тоа се случи, можете да го повикате .noConflictприклучокот на кој сакате да ја вратите вредноста.

var bootstrapButton = $ . fn . копче . noConflict () // врати $.fn.button на претходно доделената вредност 
$ . fn . bootstrapBtn = bootstrapButton             // дадете $().bootstrapBtn функционалноста на bootstrap

Настани

Bootstrap обезбедува сопствени настани за повеќето уникатни дејства на приклучокот. Општо земено, овие доаѓаат во форма на инфинитив и минато партицип - каде што инфинитивот (пр. show) се активира на почетокот на настанот, а неговата форма на минато партицип (пр. shown) се активира при завршување на дејството.

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

$ ( „#myModal“ ). на ( 'прикажи' , функција ( д ) {   
    ако (! податоци ) се врати e . preventDefault () // престанува да се прикажува модалниот   
})

За транзициите

За едноставни ефекти на транзиција, вклучете го bootstrap-transition.js еднаш заедно со другите JS-датотеки. Ако користите компајлиран (или минификуван) bootstrap.js , нема потреба да го вклучите ова - веќе е таму.

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

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

• Лизгање или избледување во модали
• Избледување јазичиња
• Избледување на предупредувањата
• Лизгачки стакла на рингишпил

Примери

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

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

Изведен модал со заглавие, тело и збир на дејства во подножјето.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Модално заглавие </h3>
  </div>
  <div class = „модално тело“ > 
    <p> Едно убаво тело... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Затвори </a>  
    <a href = "#" class = "btn btn-primary" > Зачувај промени </a>  
  </div>
</div>

Демо во живо

Вклучете модал преку JavaScript со кликнување на копчето подолу. Ќе се лизне надолу и ќе избледи од врвот на страницата.

<!-- Копче за активирање модална -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Стартувај демо модал </a>    
 
<!-- Модален -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "дијалог" aria-labelledby = "myModalLabel" aria-hidden = "точно" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Модално заглавие </h3> 
  </div>
  <div class = „модално тело“ > 
    <p> Едно убаво тело... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Затвори </button>   
    <button class = "btn btn-primary" > Зачувај промени </button> 
  </div>
</div>

Употреба

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

Активирајте модал без да пишувате JavaScript. Поставете data-toggle="modal"на елемент на контролорот, како копче, заедно со data-target="#foo"или href="#foo"за да насочите конкретен модал за префрлување.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Стартувај модал </button>   

Преку JavaScript

Повикајте модал со id myModalсо една линија JavaScript:

$ ( „#myModal“ ). модален ( опции )

Опции

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

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

Методи

.modal(опции)

Ја активира вашата содржина како модална. Прифаќа изборни опции object.

$ ( „#myModal“ ). модален ({
  тастатура : неточно 
})

.modal('toggle')

Рачно менува модал.

$ ( „#myModal“ ). модален ( „префрли“ )

.modal('покажи')

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

$ ( „#myModal“ ). модален ( „прикажи“ )

.modal ('скриј')

Рачно крие модал.

$ ( „#myModal“ ). модален ( „скриј“ )

Настани

Модалната класа на Bootstrap изложува неколку настани за приклучување во модалната функционалност.

$ ( „#myModal“ ). на ( 'скриено' , функција () {   
  // направи нешто…
})

Примери

Додајте паѓачки менија на речиси сè со овој едноставен приклучок, вклучувајќи ја лентата за навигација, јазичињата и таблетите.

Во рамките на лентата за навигација

Во рамките на јазичињата

Употреба

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

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

<div class = „паѓачко долу“ > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > паѓачкото активирање </a>   
  <ul class = "dropdown-menu" role = "мени" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

За да ги задржите URL-адресите непроменети, користете го data-targetатрибутот наместо href="#".

<div class = „паѓачко долу“ > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Спуштање
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "мени" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Преку JavaScript

Повикајте ги паѓачките списоци преку JavaScript:

$ ( '.dropdown-toggle' ). паѓачко ()

Опции

Никој

Методи

$().dropdown('toggle')

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

Пример во navbar

Приклучокот ScrollSpy е за автоматско ажурирање на навигациските цели врз основа на позицијата на лизгање. Скролувајте ја областа под лентата за навигација и гледајте како се менува активната класа. Ќе бидат означени и паѓачките подставки.

Употреба

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

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

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Преку JavaScript

Повикајте го scrollspy преку JavaScript:

$ ( „#navbar“ ). scrollspy ()

Методи

.scrollspy ('освежи')

Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:

$ ( '[data-spy="scroll"]' ). секоја ( функција () {  
  var $spy = $ ( ова ). scrollspy ( 'освежи' )
});

Опции

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

Настани

Пример јазичиња

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

Употреба

Овозможете јазичиња со јазичиња преку JavaScript (секоја картичка треба да се активира поединечно):

$ ( '#myTab a' ). кликнете ( функција ( д ) {  
  д . preventDefault ();
  $ ( ова ). табот ( 'покажи' );
})

Можете да активирате поединечни јазичиња на неколку начини:

$ ( '#myTab a[href="#профил"]' ). табот ( 'покажи' ); // Изберете јазиче по име 
$ ( '#myTab a:first' ). табот ( 'покажи' ); // Изберете ја првата картичка 
$ ( '#myTab a:last' ). табот ( 'покажи' ); // Изберете последно јазиче 
$ ( '#myTab li:eq(2) a' ). табот ( 'покажи' ); // Изберете трето јазиче (0-индексирано) 

Означување

Можете да активирате навигација со јазиче или таблети без да пишувате JavaScript со едноставно назначување data-toggle="tab"или data-toggle="pill"на елемент. Додавањето на navкласите nav-tabsи во јазичето ulќе го примени стилот на јазичето Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Почетна </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Профил </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Пораки </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Поставки </a></li>  
</ul>

Методи

$().таб

Активира елемент на картичката и контејнер за содржина. Јазичето треба да има или data-targetили hrefтаргетирање контејнерски јазол во DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Дома </a></li>  
  <li><a href = "#profile" > Профил </a></li> 
  <li><a href = "#messages" > Пораки </a></li> 
  <li><a href = "#settings" > Поставки </a></li> 
</ul>
 
<div class = „таб-содржина“ > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "пораки" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<скрипта>
  $ ( функција () {  
    $ ( '#myTab a:last' ). табот ( 'покажи' );
  })
</script>

Настани

$ ( 'a[data-toggle="tab"]' ). на ( 'прикажани' , функција ( e ) {   
  д . цел // активиран таб
  д . relatedTarget // претходен таб
})

Примери

Инспириран од одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; Советите за алатки се ажурирана верзија, која не се потпира на слики, користи CSS3 за анимации и атрибути на податоци за локално складирање на наслови.

Од причини за изведба, советот за алатки и popover data-apis се вклучени, што значи дека мора сами да ги иницијализирате .

Лебдете над линковите подолу за да ги видите советите за алатки:

Четири насоки

Совети за алатки во влезните групи

Кога користите совети за алатки и поповери со влезните групи на Bootstrap, ќе мора да ја поставите опцијата container(документирана подолу) за да избегнете несакани несакани ефекти.

Употреба

Активирајте го советот за алатка преку JavaScript:

$ ( „#пример“ ). совет за алатки ( опции )

Опции

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

Означување

<a href = "#" data-toggle = "tooltip" title = "прв совет за алатка" > лебди над мене </a>   

Методи

$().tooltip(опции)

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

.tooltip('покажи')

Го открива советот за алатка на елементот.

$ ( „#елемент“ ). совет за алатка ( „покажи“ )

.tooltip('скриј')

Го крие советот за алатка за елемент.

$ ( „#елемент“ ). совет за алатка ( „скриј“ )

.tooltip('toggle')

Го исклучува советот за алатка на елементот.

$ ( „#елемент“ ). совет за алатки ( „прекинувај“ )

.tooltip ('уништи')

Го крие и уништува советот за алатка на елементот.

$ ( „#елемент“ ). совет за алатка ( „уништи“ )

Примери

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

Статичен поповер

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

Ниту една ознака прикажана како поповер не е генерирана од JavaScript и содржина во dataатрибут.

Демо во живо

Четири насоки

Употреба

Овозможете popovers преку JavaScript:

$ ( „#пример“ ). поповер ( опции )

Опции

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

Означување

Од причини за изведба, се избираат „Tooltip“ и „Popover data-apis“. Доколку сакате да ги користите, само наведете опција за избирање.

Методи

$().popover(опции)

Иницијализира поповери за колекција на елементи.

.popover ('шоу')

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

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

.popover ('скриј')

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

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

.popover ('toggle')

Вклучува поповер на елементи.

$ ( „#елемент“ ). поповер ( „префрлање“ )

.popover ('уништи')

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

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

Примери за предупредувања

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

Употреба

Овозможете отфрлање на предупредување преку JavaScript:

$ ( ".alert" ). алармирање ()

Означување

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

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Методи

$().alert()

Ги обвива сите предупредувања со затворена функционалност. За да може вашите предупредувања да се анимираат кога се затворени, проверете дали ја имаат веќе применето класата и на нив .fade..in

.alert ('затвори')

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

$ ( ".alert" ). предупредување ( „затвори“ )

Настани

Класата за предупредување на Bootstrap изложува неколку настани за приклучување на функционалноста за предупредување.

$ ( '#my-alert' ). bind ( 'затворено' , функција () {   
  // направи нешто…
})

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

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

Државен

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

<button type = "button" class = "btn btn-primary" data-loading-text = "Се вчитува..." > Состојба на вчитување </button>   

Единечно преклопување

Додај data-toggle="button"за активирање на префрлање на едно копче.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Едно вклучување </button>   

Поле за избор

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

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Лево </button>  
  <button type = "button" class = "btn btn-primary" > Средно </button>  
  <button type = "button" class = "btn btn-primary" > Десно </button>  
</div>

Радио

Додадете data-toggle="buttons-radio"за менување стил на радио на btn-група.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Лево </button>  
  <button type = "button" class = "btn btn-primary" > Средно </button>  
  <button type = "button" class = "btn btn-primary" > Десно </button>  
</div>

Употреба

Овозможи копчиња преку JavaScript:

$ ( '.nav-tabs' ). копче ()

Означување

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

Опции

Никој

Методи

$().button('toggle')

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('се вчитува')

Ја поставува состојбата на копчето на вчитување - го оневозможува копчето и го заменува текстот со текстот што се вчитува. Вчитувањето на текстот треба да се дефинира на елементот на копчето користејќи го атрибутот податоци data-loading-text.

<button type = "button" class = "btn" data-loading-text = "вчитувам работи..." > ... </button>    

$().button('ресетирање')

Ресетира состојбата на копчето - го заменува текстот со оригиналниот текст.

$().копче(низа)

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

<button type = "button" class = "btn" data-complete-text = "заврши!" > ... </button>    
<скрипта>
  $ ( '.btn' ). копче ( „заврши“ )
</script>

За

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

* Потребно е да се вклучи приклучокот Transitions.

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

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

<div class = "хармоника" id = "хармоника2" >  
  <div class = "хармоника-група" > 
    <div class = „наслов на хармоника“ > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Групна ставка што може да се склопува бр. 1
      </a>
    </div>
    <div id = "collapseOne" class = "хармоника-тело колапс во" >  
      <div class = "хармоника-внатрешна" > 
        Аним париатурно клише...
      </div>
    </div>
  </div>
  <div class = "хармоника-група" > 
    <div class = „наслов на хармоника“ > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Групна ставка за склопување бр. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "колапс на хармоника-тело" >  
      <div class = "хармоника-внатрешна" > 
        Аним париатурно клише...
      </div>
    </div>
  </div>
</div>
...

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

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  едноставно склопливо
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Употреба

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

Само додајте data-toggle="collapse"и a data-targetво елемент за автоматски да доделите контрола на елемент што може да се склопува. Атрибутот data-targetприфаќа css избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapseво склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа in.

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

Преку JavaScript

Овозможи рачно со:

$ ( ".collapse" ). колапс ()

Опции

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

Методи

.collapse(опции)

Ја активира вашата содржина како склоплив елемент. Прифаќа изборни опции object.

$ ( '#myCollapsible' ). колапс ({
  префрли : неточно 
})

.collapse ('toggle')

Вклучува склопувачки елемент на прикажан или скриен.

.collapse ('покажи')

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

.collapse ('скриј')

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

Настани

Класата за колапс на Bootstrap изложува неколку настани за приклучување во функционалноста за колапс.

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

Пример рингишпил

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

Прва ознака за сликички

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "слајд на рингишпил" >  
  <ol class = "рингишпил-индикатори" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "активен" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Ставки од рингишпил -->
  <div class = „внатрешна рингишпил“ > 
    <div class = "активна ставка" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- рингишпил -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "претходна" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "следно" > › </a>   
</div>

Употреба

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

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

Преку JavaScript

Повикајте рингишпил рачно со:

$ ( „.рингишпил“ ). рингишпил ()

Опции

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

Методи

.рингишпил (опции)

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

$ ( „.рингишпил“ ). рингишпил ({
  интервал : 2000 
})

.рингишпил ('циклус')

Вози низ ставките на рингишпил од лево кон десно.

.рингишпил ('пауза')

Го спречува рингишпилот да се движи со велосипед низ предмети.

.рингишпил (број)

Циклира рингишпил на одредена рамка (заснована на 0, слично на низа).

.рингишпил ('претходна')

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

.рингишпил ('следно')

Циклуси до следната ставка.

Настани

Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот.

Пример

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

<input type = "text" data- provide = "typehead" >  

Ќе сакате да поставите autocomplete="off"да спречите да се појавуваат стандардните менија на прелистувачот преку паѓачкото мени Bootstrap.

Употреба

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

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

Преку JavaScript

Рачно повикајте го типот со:

$ ( '.typeahead' ). типкање ()

Опции

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

Методи

.машина (опции)

Иницијализира влез со типка.

Пример

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

Употреба

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

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

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

Преку JavaScript

Повикајте го приклучокот за афикс преку JavaScript:

$ ( „#navbar“ ). прикачи ()

Опции

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