Bootstrap - Обзор плагинов

Компоненты, рассмотренные в предыдущих главах в разделе Layout Componentsтолько начало. Bootstrap поставляется в комплекте с 12 плагинами jQuery, которые расширяют возможности и могут добавить больше взаимодействия на ваш сайт. Чтобы начать работу с плагинами JavaScript Bootstrap, вам не нужно быть опытным разработчиком JavaScript. Используя Bootstrap Data API, большинство плагинов можно запускать без написания ни одной строчки кода.

Плагины Bootstrap могут быть включены на ваш сайт в двух формах:

Individually- Использование отдельных файлов * .js Bootstrap . Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации.
Или compiled (all at once)- Использование bootstrap.js или уменьшенного файла bootstrap.min.js . Не пытайтесь включить оба, так как и bootstrap.js, и bootstrap.min.js содержат все плагины в одном файле.

Все плагины зависят от jQuery. Поэтому jQuery должен быть включен перед файлами плагина. Проверьте bower.json, чтобы узнать, какие версии jQuery поддерживаются.

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

Все плагины Bootstrap доступны с помощью прилагаемого API данных. Следовательно, вам не нужно включать ни одной строки JavaScript для вызова какой-либо функции плагина.
В некоторых ситуациях может потребоваться отключить эту функцию Data API. Если вам нужно отключить Data API, вы можете отвязать атрибуты, добавив следующую строку JavaScript -

$(document).off('.data-api')

Чтобы отключить определенный / отдельный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:

$(document).off('.alert.data-api')

Программный API

Разработчики Bootstrap считают, что вы сможете использовать все плагины исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую воздействовали, например:

$(".btn.danger").button("toggle").addClass("fat")

Все методы принимают необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что запускает плагин с поведением по умолчанию), как показано ниже -

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')

Каждый плагин также предоставляет свой необработанный конструктор на Constructorсвойство: $ .fn.popover.Constructor . Если вы хотите получить конкретный экземпляр плагина, извлеките его прямо из элемента -

$('[rel = popover]').data('popover').

Нет конфликта

Плагины Bootstrap иногда можно использовать с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Чтобы преодолеть этот призыв.noConflict в плагине, значение которого вы хотите вернуть.

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton

События

Bootstrap предоставляет настраиваемые события для большинства уникальных действий плагина. Как правило, эти события бывают двух форм:

Infinitive form- Это срабатывает в начале события. Например, шоу . Инфинитивные события обеспечивают функцию preventDefault . Это дает возможность остановить выполнение действия до его запуска.

$('#myModal').on('show.bs.modal', function (e) {
   // stops modal from being shown
   if (!data) return e.preventDefault() 
})

Past participle form- Это срабатывает по завершении действия. Например, показано.