Учебники

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

Октябрь 25, 2018

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

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

  • Индивидуально — Использование отдельных файлов Bootstrap * .js . Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации.

  • Или скомпилированный (все сразу) — используя bootstrap.js или минимизированный bootstrap.min.js . Не пытайтесь включить оба, так как и bootstrap.js, и bootstrap.min.js содержат все плагины в одном файле.

Индивидуально — Использование отдельных файлов Bootstrap * .js . Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации.

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

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

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

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

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

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

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

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

  • Чтобы отключить определенный / единственный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен 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 предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, эти события бывают двух форм —

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

Форма причастия в прошлом — запускается по завершении действия. Например, показано.

40
Share: