JavaScript

Оживіть компоненти Bootstrap — тепер за допомогою 13 спеціальних плагінів jQuery.

Голови вгору! Ці документи стосуються версії 2.3.2, яка більше не підтримується офіційно. Перегляньте останню версію Bootstrap!

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

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

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

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

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

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

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

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

Програмний API

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

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

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

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

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

Жодного конфлікту

Іноді необхідно використовувати плагіни Bootstrap з іншими фреймворками інтерфейсу користувача. За таких обставин час від часу можуть виникати конфлікти простору імен. Якщо це станеться, ви можете викликати .noConflictплагін, значення якого хочете повернути.

  1. var bootstrapButton = $ . fn . кнопка . noConflict () // повертає $.fn.button до попереднього значення
  2. $ . fn . bootstrapBtn = bootstrapButton // надає $().bootstrapBtn функції початкового завантаження

Події

Bootstrap надає власні події для більшості унікальних дій плагіна. Зазвичай вони бувають у формі інфінітива та дієприкметника минулого часу, де інфінітив (наприклад. show) активується на початку події, а його форма дієприкметника минулого часу (наприклад. shown) — після завершення дії.

Усі нескінченні події забезпечують функцію preventDefault. Це надає можливість зупинити виконання дії до її початку.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. якщо (! дані ) повертає e . preventDefault () // зупиняє показ модального
  3. })

Про переходи

Для простих ефектів переходу додайте bootstrap-transition.js один раз разом з іншими файлами JS. Якщо ви використовуєте скомпільований (або мінімізований) bootstrap.js , немає потреби включати його — він уже є.

Випадки використання

Кілька прикладів плагіна переходу:

  • Ковзання або затухання в модалах
  • Згасання вкладок
  • Згасання сповіщень
  • Розсувні каруселі

Приклади

Модальні — це оптимізовані, але гнучкі діалогові підказки з мінімальною необхідною функціональністю та інтелектуальними параметрами за замовчуванням.

Статичний приклад

Відтворений модальний із заголовком, тілом і набором дій у нижньому колонтитулі.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Модальний заголовок </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Одне чудове тіло… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Закрити </a>
  11. <a href = "#" class = "btn btn-primary" > Зберегти зміни </a>
  12. </div>
  13. </div>

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

Увімкніть модаль за допомогою JavaScript, натиснувши кнопку нижче. Він зсунеться вниз і зникне з верхньої частини сторінки.

  1. <!-- Кнопка для запуску модального -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Запустити демонстраційний модальний режим </a>
  3.  
  4. <!-- Модальний -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Модальний заголовок </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Одне чудове тіло… </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Закрити </button>
  15. <button class = "btn btn-primary" > Зберегти зміни </button>
  16. </div>
  17. </div>

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

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

Активуйте модаль без написання JavaScript. Встановіть data-toggle="modal"на елементі контролера, наприклад на кнопці, разом із data-target="#foo"або href="#foo", щоб націлити певний режим для перемикання.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Запустити modal </button>

Через JavaScript

Викличте модаль з ідентифікатором myModalза допомогою одного рядка JavaScript:

  1. $ ( '#myModal' ). модальний ( параметри )

Опції

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

Ім'я типу за замовчуванням опис
фон логічний правда Включає елемент модального фону. Крім того, вкажіть staticдля фону, який не закриває модальний елемент після натискання.
клавіатура логічний правда Закриває модаль, коли натиснуто клавішу виходу
шоу логічний правда Показує модаль під час ініціалізації.
дистанційний шлях помилковий

Якщо вказано віддалену URL-адресу, вміст буде завантажено за допомогою loadметоду jQuery та вставлено в .modal-body. Якщо ви використовуєте API даних, ви можете використовувати hrefтег для визначення віддаленого джерела. Приклад цього показано нижче:

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

методи

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

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

  1. $ ( '#myModal' ). модальний ({
  2. клавіатура : false
  3. })

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

Вручну перемикає режим.

  1. $ ( '#myModal' ). модальний ( 'перемикач' )

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

Вручну відкриває модаль.

  1. $ ( '#myModal' ). модальний ( 'показати' )

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

Вручну приховує модаль.

  1. $ ( '#myModal' ). модальний ( 'сховати' )

Події

Модальний клас Bootstrap надає кілька подій для підключення до модальної функціональності.

Подія опис
шоу Ця подія запускається негайно, коли showвикликається метод екземпляра.
показано Ця подія запускається, коли модаль стає видимою для користувача (чекатиме завершення переходів css).
приховати Ця подія запускається негайно після hideвиклику методу екземпляра.
прихований Ця подія запускається, коли модаль закінчується приховуванням від користувача (буде чекати завершення переходів css).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // робити щось…
  3. })

Приклад на панелі навігації

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

@жирний

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi до того, як вони були розпродані. Права на велосипеди Tumblr від ферми до столу. Кардиган Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Джинсовий светр Cosby, шорти з капюшоном Вільямсбурга, мінімальний, про який ви, мабуть, не чули, і трастовий фонд кардигану, кульпа біодизель, естетика Уеса Андерсона. Nihil витатуйований acusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa вуса скейтборд, adipisicing fugiat velit pitchfork борода. Борода Фрігана, як купидатат Веро Максвіні. Cupidatat four loko nisi, ea helvetica nulla carles. Татуйований светр косбі, фуд-трак, mcsweeney's quis non freegan вініл. Lo-fi Вес Андерсон +1 портняжне мистецтво. Carles non aesthetic exercitation quis gentrify. Крафтове пиво Brooklyn adipisicing vice keytar deserunt.

один

Occaecat commodo aliqua delectus. Fap крафтове пиво deserunt скейтборд ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id вініл, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY мініатюрна сумка-месенджер. Cred ex in, sustainable delectus consectetur fanny pack iphone.

два

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Припускається розумний синтезатор. Locavore sed helvetica cliche іронія, thundercats ви, мабуть, не чули про них consequat безглютеновий худі lo-fi fap aliquip. Labore elit placeat до того, як вони були розпродані, Terry Richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Кардиган крафтовий пивний сейтан готовий веліт. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


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

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

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

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

Через JavaScript

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

  1. $ ( '#navbar' ). Scrollspy ()
Голови вгору! Посилання на навігаційній панелі повинні мати ідентифікатори, які можна розпізнати. Наприклад, <a href="#home">home</a>повинен відповідати чомусь у домі, як <div id="home"></div>.

методи

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

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

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

Опції

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

Ім'я типу за замовчуванням опис
зсув номер 10 Пікселі для зміщення від верху під час обчислення положення прокручування.

Події

Подія опис
активувати Ця подія запускається щоразу, коли Scrollspy активує новий елемент.

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

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

Необроблений денім, напевно, ви не чули про них джинсові шорти Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Вуса cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Светр Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat шавлія cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


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

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). вкладка ( 'показати' ); // Виберіть вкладку за назвою
  2. $ ( '#myTab a:first' ). вкладка ( 'показати' ); // Виберіть першу вкладку
  3. $ ( '#myTab a:last' ). вкладка ( 'показати' ); // Виберіть останню вкладку
  4. $ ( '#myTab li:eq(2) a' ). вкладка ( 'показати' ); // Виберіть третю вкладку (з індексом 0)

Розмітка

Ви можете активувати вкладку або навігацію без написання будь-якого JavaScript, просто вказавши data-toggle="tab"або data-toggle="pill"на елементі. Додавання класів navі nav-tabsдо вкладки ulзастосує стиль вкладки Bootstrap.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Домашня сторінка </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Профіль </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Повідомлення </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Налаштування </a></li>
  6. </ul>

методи

$().таб

Активує елемент вкладки та контейнер вмісту. Вкладка повинна мати або data-targetабо hrefорієнтований на вузол контейнера в DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Домашня сторінка </a></li>
  3. <li><a href = "#profile" > Профіль </a></li>
  4. <li><a href = "#messages" > Повідомлення </a></li>
  5. <li><a href = "#settings" > Налаштування </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "активна панель вкладок" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <сценарій>
  16. $ ( функція () {
  17. $ ( '#myTab a:last' ). вкладка ( 'показати' );
  18. })
  19. </script>

Події

Подія опис
шоу Ця подія запускається під час показу вкладок, але до того, як буде показано нову вкладку. Використовуйте event.targetта event.relatedTargetдля націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
показано Ця подія запускається під час показу вкладок після показу вкладки. Використовуйте event.targetта event.relatedTargetдля націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'показано' , функція ( e ) {
  2. e . target // активована вкладка
  3. e . relatedTarget // попередня вкладка
  4. })

Приклади

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

З міркувань продуктивності спливаючу підказку та спливаючу програму даних API можна включити, тобто ви повинні ініціалізувати їх самостійно .

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

Вузькі штани наступного рівня , ви, напевно , не чули про них. Стенд для фотографій, борода, веганська сумка для високого друку з необробленого деніму. Сейтан від ферми до столу, 8-бітний американський одяг McSweeney's fixie sustainable quinoa має вінілове шамбре Террі Річардсона. Борода stumptown, кардигани banh mi lomo thundercats. Тофу біодизель Вільямсбург Марфа, чотири локо mcsweeney's cleanse vegan chambray. Справді іронічний ремісник будь-який кейтар , сценер від ферми до столу Бенксі Остін твіттер ручка Фріган Кред сирий денім однопохідна кава вірусна.

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

Підказки в групах введення

Під час використання спливаючих підказок і поповерів із групами вводу Bootstrap вам доведеться встановити параметр container(задокументовано нижче), щоб уникнути небажаних побічних ефектів.


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

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

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

Опції

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

Ім'я типу за замовчуванням опис
анімація логічний правда застосувати перехід CSS Fade до підказки
html логічний помилковий Вставте html у підказку. Якщо false, textметод jquery використовуватиметься для вставлення вмісту в dom. Використовуйте текст, якщо вас турбують атаки XSS.
розміщення рядок | функція "топ" як розташувати підказку - зверху | нижня | ліворуч | правильно
селектор рядок помилковий Якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям.
назва рядок | функція '' значення за замовчуванням заголовка, якщо тег `title` відсутній
тригер рядок 'hover focus' як запускається підказка - натисніть | навести | фокус | посібник. Зверніть увагу, що ви передаєте регістр кількох тригерів, розділених пробілами, типів тригерів.
затримка номер | об'єкт 0

затримка показу та приховування спливаючої підказки (мс) - не стосується ручного типу запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

Структура об'єкта:delay: { show: 500, hide: 100 }

контейнер рядок | помилковий помилковий

Додає підказку до певного елементаcontainer: 'body'

Голови вгору! Параметри для окремих підказок можна альтернативно вказати за допомогою використання атрибутів даних.

Розмітка

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

методи

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

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

.tooltip('show')

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

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

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

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

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

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

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

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

.tooltip('destroy')

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

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

Приклади

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

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

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

Поповер топ

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Повернутись праворуч

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Поповер пішов

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

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

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


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

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

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

Опції

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

Ім'я типу за замовчуванням опис
анімація логічний правда застосувати перехід CSS Fade до підказки
html логічний помилковий Вставте html у спливаюче вікно. Якщо false, textметод jquery використовуватиметься для вставлення вмісту в dom. Використовуйте текст, якщо вас турбують атаки XSS.
розміщення рядок | функція "право" як розташувати поповер - зверху | нижня | ліворуч | правильно
селектор рядок помилковий якщо надано селектор, об’єкти підказки будуть делеговані вказаним цілям
тригер рядок 'клік' як спрацьовує спливаюче вікно - натисніть | навести | фокус | посібник
назва рядок | функція '' значення за замовчуванням заголовка, якщо атрибут `title` відсутній
вміст рядок | функція '' значення вмісту за замовчуванням, якщо атрибут `data-content` відсутній
затримка номер | об'єкт 0

затримка показу та приховування спливного вікна (мс) - не стосується ручного типу запуску

Якщо вказано число, затримка застосовується як для приховування, так і для показу

Структура об'єкта:delay: { show: 500, hide: 100 }

контейнер рядок | помилковий помилковий

Додає спливаюче вікно до певного елементаcontainer: 'body'

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

Розмітка

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

методи

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. $ ( '#element' ). popover ( 'знищити' )

Приклад сповіщень

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

Свято гуакамоле! Краще перевірте себе, ви виглядаєте не дуже добре.

Ох, чорт! Ви отримали помилку!

Змініть те чи інше та спробуйте ще раз. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Виконайте цю дію Або зробіть це


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

Увімкнути відхилення попередження через JavaScript:

  1. $ ( ".alert" ). сповіщення ()

Розмітка

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

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

методи

$().alert()

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

.alert('закрити')

Закриває сповіщення.

  1. $ ( ".alert" ). сповіщення ( 'закрити' )

Події

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

Подія опис
закрити Ця подія запускається негайно, коли closeвикликається метод екземпляра.
ЗАЧИНЕНО Ця подія запускається, коли сповіщення закрито (очікуватиме завершення переходів css).
  1. $ ( '#my-alert' ). bind ( 'закрито' , функція () {
  2. // робити щось…
  3. })

Приклад використання

Робіть більше за допомогою кнопок. Кнопка керування визначає стани або створює групи кнопок для додаткових компонентів, наприклад панелей інструментів.

Державний

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

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

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

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

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

Прапорець

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

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Ліворуч </button>
  3. <button type = "button" class = "btn btn-primary" > Середній </button>
  4. <button type = "button" class = "btn btn-primary" > Справа </button>
  5. </div>

радіо

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

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Ліворуч </button>
  3. <button type = "button" class = "btn btn-primary" > Середній </button>
  4. <button type = "button" class = "btn btn-primary" > Справа </button>
  5. </div>

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

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

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

Розмітка

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

Опції

Жодного

методи

$().button('toggle')

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

Голови вгору! Ви можете ввімкнути автоматичне перемикання кнопки за допомогою data-toggleатрибута.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('завантаження')

Встановлює стан кнопки на завантаження - вимикає кнопку та замінює текст на текст завантаження. Текст для завантаження має бути визначений на елементі кнопки за допомогою атрибута data data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Голови вгору! Firefox зберігає вимкнений стан під час завантаження сторінки . Обхідним шляхом для цього є використання autocomplete="off".

$().button('reset')

Скидає стан кнопки - замінює текст оригінальним текстом.

$().button(рядок)

Скидає стан кнопки - змінює текст на будь-який текстовий стан, визначений даними.

  1. <button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>
  2. <сценарій>
  3. $ ( '.btn' ). кнопка ( 'завершено' )
  4. </script>

про

Отримайте базові стилі та гнучку підтримку складних компонентів, таких як гармошки та навігація.

* Необхідно включити плагін Transitions.

Приклад акордеон

Використовуючи плагін згортання, ми створили простий віджет у стилі акордеона:

Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.
Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.
Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Складна група Пункт №1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Анімаційні париатурні кліше...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Розбірний груповий предмет №2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "accordion-body collapse" >
  21. <div class = "accordion-inner" >
  22. Анімаційні париатурні кліше...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Ви також можете використовувати плагін без розмітки акордеона. Зробіть кнопку, яка перемикає розгортання та згортання іншого елемента.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. простий розбірний
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

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

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

Просто додайте data-toggle="collapse"до data-targetелемента, щоб автоматично призначити керування елементом, що згортається. Атрибут data-targetприймає селектор CSS для застосування згортання. Обов’язково додайте клас collapseдо розбірного елемента. Якщо ви хочете, щоб він відкривався за умовчанням, додайте додатковий клас in.

Щоб додати керування групами, схоже на акордеон, до елемента керування, що згортається, додайте атрибут даних data-parent="#selector". Перегляньте демонстрацію, щоб побачити це в дії.

Через JavaScript

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

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

Опції

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

Ім'я типу за замовчуванням опис
батькові селектор помилковий Якщо селектор, тоді всі елементи, що згортаються, у вказаному батьківському елементі будуть закриті, коли буде показано цей елемент, що згортається. (схожа на традиційну поведінку акордеона)
перемикач логічний правда Перемикає елемент, що згортається, під час виклику

методи

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

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

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

.collapse('переключити')

Перемикає елемент, що згортається, на показаний або прихований.

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

Показує розбірний елемент.

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

Приховує розбірний елемент.

Події

Клас згортання Bootstrap надає кілька подій для підключення до функціональності згортання.

Подія опис
шоу Ця подія запускається негайно, коли showвикликається метод екземпляра.
показано Ця подія запускається, коли елемент згортання стає видимим для користувача (чекатиме, поки завершаться переходи css).
приховати Ця подія запускається відразу після виклику hideметоду.
прихований Ця подія запускається, коли елемент згортання було приховано від користувача (чекатиме, поки завершаться переходи css).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // робити щось…
  3. })

приклад

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

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

Ви захочете налаштувати autocomplete="off", щоб меню браузера за замовчуванням не з’являлося над розкривним меню Bootstrap.


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

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

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

Через JavaScript

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

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

Опції

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

Ім'я типу за замовчуванням опис
джерело масив, функція [ ] Джерело даних для запиту. Може бути масивом рядків або функцією. Функції передається два аргументи: queryзначення в полі введення та processзворотний виклик. Функцію можна використовувати синхронно, повертаючи джерело даних безпосередньо або асинхронно через processєдиний аргумент зворотного виклику.
елементи номер 8 Максимальна кількість елементів для відображення в спадному списку.
minLength номер 1 Мінімальна довжина символів, необхідна для запуску пропозицій автозавершення
відповідник функція нечутливий до регістру Метод, який використовується для визначення відповідності запиту елементу. Приймає єдиний аргумент, itemпроти якого перевіряється запит. Доступ до поточного запиту за допомогою this.query. Повертає логічне значення, trueякщо запит відповідає.
сортувальник функція точна відповідність, чутливість до
регістру,
нечутливість до регістру
Метод, який використовується для сортування результатів автозаповнення. Приймає один аргумент itemsі має область дії екземпляра з упередженим типом. Посилання на поточний запит за допомогою this.query.
оновлювач функція повертає вибраний елемент Метод, використаний для повернення вибраного елемента. Приймає єдиний аргумент, itemі має область дії екземпляра з упередженим типом.
хайлайтер функція виділяє всі збіги за замовчуванням Метод, який використовується для виділення результатів автозаповнення. Приймає один аргумент itemі має область дії екземпляра з упередженим типом. Має повернути html.

методи

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

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

приклад

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


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

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

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

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Голови вгору! Ви повинні керувати положенням закріпленого елемента та поведінкою його безпосереднього батька. Позиція контролюється за допомогою affix, affix-topі affix-bottom. Не забувайте перевірити потенційно згорнутий батьківський елемент, коли афікс починає працювати, оскільки він видаляє вміст із звичайного потоку сторінки.

Через JavaScript

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

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

Опції

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

Ім'я типу за замовчуванням опис
зсув номер | функція | об'єкт 10 Пікселі для зміщення від екрана під час обчислення положення прокручування. Якщо вказано одне число, зміщення буде застосовано як у верхньому, так і в лівому напрямках. Щоб прослухати один напрямок або кілька унікальних зсувів, просто надайте об’єкт offset: { x: 10 }. Використовуйте функцію, коли вам потрібно динамічно надати зміщення (корисно для деяких адаптивних дизайнів).