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

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

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

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

Все плагины зависят от JQuery. Так что JQuery должен быть включен перед файлом плагина.

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

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

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

• Чтобы отключить определенный/один плагин, просто включите название плагина в качестве пространства имен вместе с пространством имен данных плагинов, примерно так:

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

Программирование API

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

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

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

// инициализируется по умолчанию
$("#myModal").modal()    

 // Тип клавиатуры                 
$("#myModal").modal({ keyboard: false })  

// инициализирует, запускает и сразу показывает
$("#myModal").modal('show')

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

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

Без конфликтов

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

// возврат $.fn.button на ранее присвоенное значение
var bootstrapButton = $.fn.button.noConflict()

// отдать $().bootstrapBtn начальную функциональность загрузки
$.fn.bootstrapBtn = bootstrapButton

Мероприятия

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

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

$('#myModal').on('show.bs.modal', function (e) {
   // модальное окно перестает быть показано
   if (!data) return e.preventDefault() 
})

• Past participle form — Срабатывает по завершению действия.

Читайте также

Вопросы для собеседования по Bootstrap

2 года назад

Как пользоваться bootstrap Glyphicons

8 лет назад

7 Основных инструментов для Frontend веб-разработки сайтов в 2023 году

2 года назад