English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
в предыдущем Компоненты layouts Компоненты, обсуждаемые в разделе, это только начало. Bootstrap включает 12 плагинов jQuery, которые расширяют функции и добавляют больше взаимодействия на сайт. Даже если вы не опытный разработчик JavaScript, вы можете начать изучать JavaScript-плагины Bootstrap. С помощью Bootstrap Data API (Bootstrap Data API) большинство плагинов можно активировать без написания кода.
Есть два способа привязки плагинов Bootstrap на сайте: $$
отдельноИспользование отдельных ссылок на Bootstrap $$ *.js Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы ссылаетесь на плагин отдельно, сначала убедитесь, что вы знаете зависимость этих плагинов друг от друга.
составления (одновременно) ссылок на файлы.Использование bootstrap.js или сжатой версии bootstrap.min.js. Не пытайтесь ссылаться на эти два файла одновременно, потому что $$ bootstrap.js и bootstrap.min.js они включают все плагины.
Вы можете использовать все плагины Bootstrap через API атрибутов data, не написав ни строчки JavaScript. Это один из лучших API в Bootstrap, и это должно быть вашим предпочтительным способом.
Однако, в некоторых случаях может потребоваться отключить эту функцию. Поэтому мы также предоставляем метод для отключения API атрибутов data, то есть data-api Для пространства имен и привязки событий к документу. Например, как это: $$
$$(document).off('.data-api')$$Чтобы закрыть определенный плагин, просто добавьте имя плагина в качестве пространства имен перед data-api, как показано ниже:
$(document).off('.alert.data-api')Мы предоставляем API для всех плагинов Bootstrap в чистом JavaScript. Все публичные API поддерживают отдельные или цепные вызовы и возвращают набор элементов, на котором они работают (Примечание: в формате вызова аналогичен jQuery). Например:
$(".btn.danger").button("toggle").addClass("fat")Все методы могут принимать опциональный объект параметров, строку, представляющую определенный метод, или не передавать никакие параметры (в этом случае плагин инициализируется по умолчанию), как показано ниже:
// Инициализирует по умолчанию
$("#myModal").modal()
// Инициализирует без поддержки клавиатуры
$("#myModal").modal({ keyboard: false })
// Инициализирует и немедленно вызывает show
$("#myModal").modal('show')Каждый плагин в Constructor Также на свойстве экспонируется исходный конструктор:$.fn.popover.ConstructorЕсли вы хотите получить пример определенного плагина, вы можете напрямую получить его через элемент страницы:
$('[rel=popover]').data('popover').В некоторых случаях плагины Bootstrap могут использоваться вместе с другими UI-фреймворками. В этом случае может произойти конфликт命名空间. Если不幸 это случилось, вы можете избежать конфликта命名ного пространства, вызывая функцию плагина. .noConflict Метод восстанавливает его исходное значение.
// Возвращает значение $.fn.button до его изменения var bootstrapButton = $.fn.button.noConflict() // Предоставляет функциональность Bootstrap для $().bootstrapBtn $.fn.bootstrapBtn = bootstrapButton
Bootstrap предоставляет пользовательские события для уникального поведения большинства плагинов. В общем, у этих событий есть две формы:
Действие неопределенной формы：Это срабатывает в начале события. Например Пример: showДействие неопределенной формы предоставляет preventDefault Функция. Это позволяет остановить выполнение действия до начала события.
$('#myModal').on('show.bs.modal', function(e) {
// Предотвращение отображения модального окна
if (!data) return e.preventDefault()
)Форма прошедшего времениЭто срабатывает после выполнения действия. Например например.