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

Приставките могат да бъдат включени индивидуално (въпреки че някои имат необходими зависимости) или всички наведнъж. Както 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" ). modal ({ keyboard : false }) // инициализирано без клавиатура     
$ ( "#myModal" ). modal ( 'show' ) // инициализира и извиква show веднага                

Всеки плъгин също излага своя необработен конструктор на свойството `Constructor`: $.fn.popover.Constructor. Ако искате да получите конкретен екземпляр на приставка, извлечете го директно от елемент: $('[rel=popover]').data('popover').

Без конфликт

Понякога е необходимо да използвате плъгини Bootstrap с други UI рамки. При тези обстоятелства понякога могат да възникнат сблъсъци в пространството на имена. Ако това се случи, можете да извикате .noConflictприставката, на която искате да върнете стойността.

var bootstrapButton = $ . fn . бутон . noConflict () // връщане на $.fn.button към предварително присвоена стойност 
$ . fn . bootstrapBtn = bootstrapButton             // дайте на $().bootstrapBtn функционалността за стартиране

събития

Bootstrap предоставя персонализирани събития за повечето уникални действия на плъгина. Обикновено те идват във форма на инфинитив и минало причастие - където инфинитивът (напр. show) се задейства в началото на събитие, а неговата форма на минало причастие (напр. shown) се задейства при завършване на действие.

Всички безкрайни събития предоставят функция preventDefault. Това осигурява възможност за спиране на изпълнението на действие, преди то да започне.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    ако (! данни ) върне 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 = "modal-body" > 
    <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 = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Модална заглавка </h3> 
  </div>
  <div class = "modal-body" > 
    <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" > Стартиране на modal </button>   

Чрез JavaScript

Извикайте модал с идентификатор myModalс един ред на JavaScript:

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

Настроики

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

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

Методи

.modal(опции)

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

$ ( '#myModal' ). модален ({
  клавиатура : невярно 
})

.modal('превключване')

Ръчно превключва модал.

$ ( '#myModal' ). модален ( 'превключване' )

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

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

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

.modal('скрий')

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

$ ( '#myModal' ). модален ( 'скрий' )

събития

Модалният клас на Bootstrap разкрива няколко събития за свързване с модална функционалност.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // направи нещо…
})

Примери

Добавете падащи менюта към почти всичко с този прост плъгин, включително лентата за навигация, раздели и хапчета.

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

В раздели

Използване

Чрез атрибути на данни

Добавете data-toggle="dropdown"към връзка или бутон, за да превключите падащо меню.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Задействане на падащо меню </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "dropdown" > 
  <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 = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Чрез JavaScript

Извикайте падащите менюта чрез JavaScript:

$ ( '.dropdown-toggle' ). падащо меню ()

Настроики

Нито един

Методи

$().dropdown('превключване')

Програмен API за превключване на менюта за дадена навигационна лента или навигация с раздели.

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

Приставката ScrollSpy е за автоматично актуализиране на навигационните цели въз основа на позицията на превъртане. Превъртете областта под лентата за навигация и наблюдавайте промяната на активния клас. Поделементите от падащото меню също ще бъдат маркирани.

Използване

Чрез атрибути на данни

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

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

Чрез JavaScript

Обадете се на scrollspy чрез JavaScript:

$ ( '#navbar' ). scrollspy ()

Методи

.scrollspy('refresh')

Когато използвате scrollspy във връзка с добавяне или премахване на елементи от DOM, ще трябва да извикате метода за опресняване по следния начин:

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

Настроики

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

събития

Примерни раздели

Добавете бърза, динамична функционалност на раздели за преход през панели с локално съдържание, дори чрез падащи менюта.

Използване

Активиране на раздели с възможност за разделяне чрез JavaScript (всеки раздел трябва да се активира индивидуално):

$ ( '#myTab a' ). щракнете върху ( функция ( e ) {  
  д . предотврати по подразбиране ();
  $ ( това ). раздел ( 'покажи' );
})

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

$ ( '#myTab a[href="#profile"]' ). раздел ( 'покажи' ); // Изберете раздел по име 
$ ( '#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>

Методи

$().tab

Активира разделен елемент и контейнер със съдържание. Разделът трябва да има или , 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 = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:last' ). раздел ( 'покажи' );
  })
</script>

събития

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

Примери

Вдъхновен от отличния плъгин jQuery.tipsy, написан от Jason Frame; Подсказките са актуализирана версия, която не разчита на изображения, използва CSS3 за анимации и атрибути на данни за локално съхранение на заглавия.

От съображения за производителност подсказката и изскачащият API за данни са включени, което означава, че трябва да ги инициализирате сами .

Задръжте курсора на мишката над връзките по-долу, за да видите подсказки:

Четири посоки

Подсказки в групите за въвеждане

Когато използвате подсказки и изскачащи елементи с групите за въвеждане на Bootstrap, ще трябва да зададете опцията container(документирана по-долу), за да избегнете нежелани странични ефекти.

Използване

Задействайте подсказката чрез JavaScript:

$ ( '#example' ). подсказка ( опции )

Настроики

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

Маркиране

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > задръжте курсора на мишката над мен </a>   

Методи

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

Прикрепя манипулатор на подсказка към колекция от елементи.

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

Разкрива подсказка на елемент.

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

.tooltip('скрий')

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

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

.tooltip('превключване')

Превключва подсказката на елемент.

$ ( '#елемент' ). подсказка ( 'превключване' )

.tooltip('destroy')

Скрива и унищожава подсказката на елемент.

$ ( '#елемент' ). подсказка ( 'унищожи' )

Примери

Добавете малки наслагвания на съдържание, като тези на iPad, към всеки елемент за съхраняване на вторична информация. Задръжте курсора на мишката над бутона, за да активирате изскачащия прозорец. Изисква да бъде включена подсказка .

Статично изскачане

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

Не се показва маркиране, тъй като изскачащите екрани се генерират от JavaScript и съдържание в dataатрибут.

Демо на живо

Четири посоки

Използване

Активиране на изскачащи прозорци чрез JavaScript:

$ ( '#example' ). popover ( опции )

Настроики

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

Маркиране

От съображения за производителност, подсказката и Popover data-apis са включени. Ако искате да ги използвате, просто посочете опция за избор.

Методи

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

Инициализира изскачащи прозорци за колекция от елементи.

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

Разкрива изскачащ прозорец на елементите.

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

.popover('скрий')

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

$ ( '#елемент' ). popover ( 'скрий' )

.popover('превключване')

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

$ ( '#елемент' ). popover ( 'превключване' )

.popover('унищожи')

Скрива и унищожава popover на елемент.

$ ( '#елемент' ). popover ( 'унищожи' )

Примерни сигнали

Добавете функция за отхвърляне към всички предупредителни съобщения с този плъгин.

Използване

Активирайте отхвърлянето на предупреждение чрез JavaScript:

$ ( ".alert" ). предупреждение ()

Маркиране

Просто добавете data-dismiss="alert"към бутона за затваряне, за да дадете автоматично функция за затваряне на предупреждение.

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

Методи

$().alert()

Обгръща всички сигнали с близка функционалност. За да анимирате вашите сигнали, когато са затворени, уверете се, че към тях вече е приложен клас .fadeи ..in

.alert('close')

Затваря предупреждение.

$ ( ".alert" ). предупреждение ( 'близо' )

събития

Класът за предупреждение на Bootstrap разкрива няколко събития за свързване към функционалността за предупреждение.

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

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

Правете повече с бутоните. Състояния на бутоните за управление или създаване на групи от бутони за повече компоненти като ленти с инструменти.

Държавен

Добавете data-loading-text="Loading...", за да използвате състояние на зареждане на бутон.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Състояние на зареждане </button>   

Единичен превключвател

Добавете data-toggle="button", за да активирате превключване на един бутон.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Единичен превключвател </button>   

Квадратче за отметка

Добавете data-toggle="buttons-checkbox"за превключване на стила на полето за отметка в btn-group.

<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-group.

<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('превключване')

Превключва състоянието на натискане. Придава на бутона вид, че е активиран.

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

$().button('зареждане')

Задава състоянието на бутона на зареждане - деактивира бутона и разменя текста на текст за зареждане. Текстът за зареждане трябва да бъде дефиниран в елемента бутон с помощта на атрибута data data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>    

$().button('reset')

Нулира състоянието на бутона - заменя текста с оригиналния текст.

$().button(низ)

Нулира състоянието на бутона - сменя текста към произволно определено от данните състояние на текст.

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

относно

Вземете основни стилове и гъвкава поддръжка за сгъваеми компоненти като акордеони и навигация.

* Изисква приставката Transitions да бъде включена.

Пример за акордеон

Използвайки плъгина за свиване, създадохме проста джаджа в стил акордеон:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Сгъваем групов елемент #1
      </a>
    </div>
    <div id = "collapseOne" class = "collapse-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur клише...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Сгъваем групов елемент #2
      </a>
    </div>
    <div id = "collapseTwo" class = "collapse body-accordion" >  
      <div class = "accordion-inner" > 
        Anim pariatur клише...
      </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"и data-targetкъм елемент, за да присвоите автоматично управление на сгъваем елемент. Атрибутът data-targetприема css селектор, към който да се приложи свиването. Не забравяйте да добавите класа collapseкъм сгъваемия елемент. Ако искате да е отворен по подразбиране, добавете допълнителния клас in.

За да добавите подобно на акордеон групово управление към сгъваема контрола, добавете атрибута data data-parent="#selector". Обърнете се към демонстрацията, за да видите това в действие.

Чрез JavaScript

Активирайте ръчно с:

$ ( ".collapse" ). свиване ()

Настроики

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

Методи

.collapse(опции)

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

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

.collapse('превключване')

Превключва сгъваем елемент на показан или скрит.

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

Показва сгъваем елемент.

.collapse('скрий')

Скрива сгъваем елемент.

събития

Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // направи нещо…
})

Примерна въртележка

Слайдшоуто по-долу показва общ плъгин и компонент за циклично преминаване през елементи като въртележка.

Първи етикет с миниатюри

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.

Втори етикет с миниатюра

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.

Трети етикет на миниатюра

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 = "carousel slide" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Елементи от въртележка -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Навигация на въртележка -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Използване

Чрез атрибути на данни

Използвайте атрибути на данни, за да контролирате лесно позицията на въртележката. data-slideприема ключовите думи prevили next, което променя позицията на слайда спрямо текущата му позиция. Като алтернатива, използвайте data-slide-toз�� предаване на необработен индекс на слайд към въртележката data-slide-to="2", която прескача позицията на слайда към конкретен индекс, започващ с 0.

Чрез JavaScript

Ръчно извикване на въртележка с:

$ ( '.carousel' ). въртележка ()

Настроики

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

Методи

.carousel (опции)

Инициализира въртележката с незадължителни опции objectи започва да преминава през елементи.

$ ( '.carousel' ). въртележка ({
  интервал : 2000 
})

.carousel('цикъл')

Преминава през елементите на въртележката отляво надясно.

.carousel('пауза')

Спира въртележката да се движи през елементи.

.carousel(номер)

Цикълира въртележката до конкретен кадър (базиран на 0, подобно на масив).

.carousel('предишна')

Цикли към предишния елемент.

.carousel('следващ')

Преминава към следващия елемент.

събития

Carousel класът на Bootstrap разкрива две събития за свързване към функционалността на въртележката.

Пример

Основен, лесно разширим плъгин за бързо създаване на елегантни текстови надписи с всякаква форма на въвеждане на текст.

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

Ще искате да зададете autocomplete="off"да предотвратите показването на менютата на браузъра по подразбиране над падащото меню Bootstrap typeahead.

Използване

Чрез атрибути на данни

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

Чрез JavaScript

Ръчно извикване на typeahead с:

$ ( '.typeahead' ). набиране напред ()

Настроики

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

Методи

.typeahead(опции)

Инициализира въвеждане с предварително въвеждане.

Пример

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

Използване

Чрез атрибути на данни

За да добавите лесно поведение на афикс към всеки елемент, просто добавете data-spy="affix"към елемента, който искате да шпионирате. След това използвайте отмествания, за да определите кога да включите и изключите фиксирането на даден елемент.

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

Чрез JavaScript

Извикайте приставката за афикс чрез JavaScript:

$ ( '#navbar' ). афикс ()

Настроики

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