Індивідуальний або складений

Плагіни можна включати окремо (хоча деякі мають необхідні залежності) або всі одночасно. І bootstrap.js , і bootstrap.min.js містять усі плагіни в одному файлі.

Атрибути даних

Ви можете використовувати всі плагіни Bootstrap виключно через API розмітки без написання жодного рядка JavaScript. Це API першого класу Bootstrap, і вам варто в першу чергу звернути увагу на використання плагіна.

Однак у деяких ситуаціях може бути бажано вимкнути цю функцію. Тому ми також надаємо можливість вимкнути API атрибутів даних, скасувавши прив’язку всіх подій у просторі імен тіла з `'data-api'`. Це виглядає так:

$ ( 'тіло' ). вимкнено ( '.data-api' )

Крім того, щоб націлити певний плагін, просто додайте назву плагіна як простір імен разом із простором імен data-api, як це:

$ ( 'тіло' ). вимкнено ( '.alert.data-api' )

Програмний API

Ми також вважаємо, що ви повинні мати можливість використовувати всі плагіни Bootstrap виключно через JavaScript API. Усі загальнодоступні API є єдиними методами, які можна зв’язати, і повертають колекцію, на яку діють.

$ ( ".btn.danger" ). кнопка ( "перемикач" ). addClass ( "жирний" )

Усі методи повинні приймати необов’язковий об’єкт параметрів, рядок, який націлений на певний метод, або нічого (що ініціює плагін із типовою поведінкою):

$ ( "#myModal" ). modal () // ініціалізується за умовчанням                       
$ ( "#myModal" ). modal ({ keyboard : false }) // ініціалізується без клавіатури     
$ ( "#myModal" ). modal ( 'show' ) // ініціалізує та негайно викликає show                

Кожен плагін також надає свій необроблений конструктор у властивості `Constructor`: $.fn.popover.Constructor. Якщо ви хочете отримати певний екземпляр плагіна, отримайте його безпосередньо з елемента: $('[rel=popover]').data('popover').

Події

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' ). модальний ({
  клавіатура : false 
})

.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 призначений для автоматичного оновлення цілей навігації на основі положення прокрутки. Прокрутіть область під панеллю навігації та спостерігайте за зміною активного класу. Підпункти спадного списку також будуть виділені.

Використання

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

Щоб легко додати шпигунську поведінку до вашої верхньої панелі навігації, просто додайте data-spy="scroll"до елемента, який ви хочете стежити (найчастіше це буде тіло), і data-target=".navbar"виберіть, яку навігацію використовувати. Ви захочете використовувати Scrollspy з .navкомпонентом.

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

Через JavaScript

Викличте scrollspy через JavaScript:

$ ( '#navbar' ). ScrollSpy ()

методи

.scrollspy('оновити')

Під час використання Scrollspy разом із додаванням або видаленням елементів із DOM вам потрібно буде викликати метод refresh таким чином:

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

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-offset="".

Події

Приклади вкладок

Додайте швидку функціональність динамічних вкладок для переходу між панелями локального вмісту, навіть через спадні меню.

Використання

Увімкнути вкладки з можливістю вкладок через JavaScript (кожну вкладку потрібно активувати окремо):

$ ( '#myTab a' ). натисніть ( функція ( e ) {  
  e . preventDefault ();
  $ ( це ). вкладка ( 'показати' );
})

Ви можете активувати окремі вкладки кількома способами:

$ ( '#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>

методи

$().таб

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати або 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 = "активна панель вкладок" 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 ) {   
  e . target // активована вкладка
  e . relatedTarget // попередня вкладка
})

Приклади

Натхненний чудовим плагіном jQuery.tipsy, написаним Джейсоном Фреймом; Підказки – це оновлена ​​версія, яка не покладається на зображення, використовує CSS3 для анімації та атрибути даних для локального зберігання заголовків.

Наведіть курсор на посилання нижче, щоб переглянути підказки:

Чотири напрямки

Використання

Запустити підказку через JavaScript:

$ ( '#приклад' ). підказка ( параметри )

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-animation="".

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть опцію вибору.

<a href = "#" rel = "tooltip" title = "перша підказка" > наведіть на мене курсор </a>   

методи

$().tooltip(параметри)

Додає обробник спливаючої підказки до колекції елементів.

.tooltip('show')

Показує спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'показати' )

.tooltip('сховати')

Приховує спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'сховати' )

.tooltip('перемикати')

Перемикає спливаючу підказку елемента.

$ ( '#element' ). підказка ( 'перемикач' )

.tooltip('destroy')

Приховує та знищує підказку елемента.

$ ( '#element' ). підказка ( 'destroy' )

Приклади

Додайте невеликі накладки вмісту, як на iPad, до будь-якого елемента для розміщення вторинної інформації. Наведіть курсор на кнопку, щоб запустити спливаюче вікно. Потрібно включити підказку .

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

Доступні чотири варіанти: вирівнювання вгорі, праворуч, внизу та ліворуч.

Розмітка не відображається, оскільки спливаючі елементи генеруються з JavaScript і вмісту в dataатрибуті.

Жива демонстрація

Чотири напрямки

Використання

Увімкнути спливаючі вікна через JavaScript:

$ ( '#приклад' ). popover ( параметри )

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-animation="".

Розмітка

З міркувань продуктивності підказка та Popover data-apis доступні. Якщо ви хочете використовувати їх, просто вкажіть опцію вибору.

методи

$().popover(параметри)

Ініціалізує спливаючі вікна для колекції елементів.

.popover('показати')

Розкриває спливаюче вікно елементів.

$ ( '#element' ). popover ( 'показати' )

.popover('сховати')

Приховує спливаюче вікно елементів.

$ ( '#element' ). popover ( 'сховати' )

.popover('перемикати')

Перемикає спливаюче вікно елементів.

$ ( '#element' ). popover ( 'перемикач' )

.popover('знищити')

Приховує та знищує спливаючий елемент елемента.

$ ( '#element' ). 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="Завантаження...", щоб використовувати стан завантаження кнопки.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Стан завантаження </button>   

Одинарний перемикач

Додайте data-toggle="button", щоб активувати перемикання однієї кнопки.

<button type = "button" class = "btn" data-toggle = "button" > Один перемикач </button>   

Прапорець

Додайте data-toggle="buttons-checkbox" для перемикання стилю прапорця в btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Ліворуч </button>  
  <button type = "button" class = "btn" > Middle </button>  
  <button type = "button" class = "btn" > Праворуч </button>  
</div>

радіо

Додайте data-toggle="buttons-radio" для перемикання стилю радіо в btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Ліворуч </button>  
  <button type = "button" class = "btn" > Middle </button>  
  <button type = "button" class = "btn" > Праворуч </button>  
</div>

Використання

Увімкнути кнопки через JavaScript:

$ ( '.nav-tabs' ). кнопка ()

Розмітка

Атрибути даних є невід’ємною частиною плагіна кнопки. Перегляньте наведений нижче приклад коду для різних типів розмітки.

Опції

Жодного

методи

$().button('toggle')

Перемикає стан натискання. Надає кнопці вигляд, що вона була активована.

<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 = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Анімаційні париатурні кліше...
      </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 = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Анімаційні париатурні кліше...
      </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-parent="#selector". Перегляньте демонстрацію, щоб побачити це в дії.

Через JavaScript

Увімкнути вручну за допомогою:

$ ( ".collapse" ). згорнути ()

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-parent="".

методи

.collapse(параметри)

Активує ваш вміст як складний елемент. Приймає додаткові параметри object.

$ ( '#myCollapsible' ). згорнути ({
  перемикати : false 
})

.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" >  
  <!-- Предмети каруселі -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Карусель nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Використання

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

...

Через JavaScript

Викликати карусель вручну за допомогою:

$ ( '.carousel' ). карусель ()

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-interval="".

методи

.carousel (параметри)

Ініціалізує карусель із додатковими параметрами objectта починає переміщатися між елементами.

$ ( '.carousel' ). карусель ({
  інтервал : 2000 
})

.carousel('цикл')

Переглядає елементи каруселі зліва направо.

.carousel('пауза')

Зупиняє карусель від циклу між предметами.

.carousel(число)

Перемикає карусель до певного кадру (на основі 0, подібно до масиву).

.carousel('попередній')

Перехід до попереднього пункту.

.carousel('наступний')

Перехід до наступного елемента.

Події

Клас каруселі Bootstrap надає дві події для підключення до функції каруселі.

приклад

Базовий, легко розширюваний плагін для швидкого створення елегантних текстових текстів із будь-якою формою введення тексту.

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

Використання

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

Додайте атрибути даних, щоб зареєструвати елемент із функцією упередженого введення, як показано в прикладі вище.

Через JavaScript

Викличте попереднє введення вручну за допомогою:

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

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-source="".

методи

.typeahead(параметри)

Ініціалізує введення за допомогою попереднього введення.

приклад

Піднавігація ліворуч — це демонстраційна версія плагіна афіксів.

Використання

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

Щоб легко додати поведінку афіксів до будь-якого елемента, просто додайте data-spy="affix"до елемента, за яким ви хочете стежити. Потім використовуйте зміщення, щоб визначити, коли вмикати та вимикати закріплення елемента.

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

Через JavaScript

Викличте плагін афіксів через JavaScript:

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

методи

.affix('оновити')

Використовуючи affix у поєднанні з додаванням або видаленням елементів із DOM, ви захочете викликати метод refresh:

$ ( '[data-spy="affix"]' ). кожний ( функція () {  
  $ ( це ). афікс ( 'оновити' )
});

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-offset-top="200".