Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.
Bootstrap включает в себя немного JavaScript, чтобы помочь оживить наши компоненты. Изучите, как включить его, наши данные и параметры программируемого API, и многое другое.
Плагины могут быть включены по отдельности (с помощью Bootstrap индивидуальный *.js
файлы), или все сразу используя bootstrap.js
или сокращен bootstrap.min.js
(не включать одновременно).
Некоторые плагины и CSS компонентов зависит от других плагинов. Если вы включаете плагины отдельно, убедитесь, что для проверки этих зависимостей в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что библиотека jQuery должна быть включена прежде чем файлы модуля). Обратитесь в наш bower.json
, чтобы увидеть, какие версии jQuery не поддерживается.
Почти все Bootstrap плагинов можно включить и настроить только через HTML с атрибутами данных (наш предпочтительный способ использования JavaScript функциональности). Обязательно использовать только один набор атрибутов данных на одном элементе (например, Вы не можете вызвать подсказку и модальное окно от той же кнопки.)
Однако в некоторых случаях может быть желательно отключить эту функцию. Чтобы отключить API атрибута данных, уберите все события в документе пространства имен с data-api
вот так:
$(document).off('.data-api')
Кроме того, для конкретного плагина, просто добавьте название плагина как пространство имен вместе с данными API в пространстве имен такой:
$(document).off('.alert.data-api')
Мы также считаем, вы должны быть в состоянии использовать все Bootstrap плагины через JavaScript API. Все публичные API являются единичными, цепными методами, и возвращающих коллекцию задействованных после.
$('.btn.danger').button('toggle').addClass('fat')
Все методы должны принимать дополнительный объект Options, строку, которая ориентирована на конкретный метод, или ничего (что инициирует плагин с поведением по умолчанию):
$('#myModal').modal() // инициализируется по умолчанию
$('#myModal').modal({ keyboard: false }) // инициализируется без клавиатуры
$('#myModal').modal('show') // инициализирует и запускает сразу показывают
Каждый плагин также предоставляет сыром конструктора Constructor
собственность: $.fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, извлечь его непосредственно из элемента: $('[rel="popover"]').data('popover')
.
Вы можете изменить параметры по умолчанию для плагина путем изменения плагина Constructor.DEFAULTS
объект:
$.fn.modal.Constructor.DEFAULTS.keyboard = false // измененить поумолчанию в плагине модальное окно `клавиатура` в false
Иногда приходится использовать Bootstrap плагины с другими UI фреймворками. В этих условиях конфликты имен могут возникать. Если это произойдет, вы можете вызвать .noConflict
на плагин, который вы хотите вернуть значение.
var bootstrapButton = $.fn.button.noConflict() // возврат $.fn.button на ранее присвоенное значение
$.fn.bootstrapBtn = bootstrapButton // даем $().bootstrapBtn в Bootstrap функциональности
Bootstrap обеспечивает пользовательские события для большинства плагинов уникальных действий. Как правило, они приходят в инфинитив и причастие прошедшего времени форме - где инфинитив (исх. show
) срабатывает в начале события, и причастие прошедшего времени (например. shown
) срабатывает на завершение действий.
Все события инфинитива обеспечить preventDefault()
функциональность. Это обеспечивает возможность остановить выполнение действия перед его началом.
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // остановить модальное окно от показанного
})
В версии Bootstrap jQuery плагины могут быть доступны через VERSION
собственность конструктор плагина. Например, для плагина подсказка:
$.fn.tooltip.Constructor.VERSION // => "4.0.0-alpha.4"
Bootstrap плагинов не отступайте особенно изящно, когда JavaScript отключена. Если вы заботитесь об опыте пользователя, в этом случае используйте <noscript>
, чтобы объяснить ситуацию (и как включить JavaScript) для пользователей, и/или добавить свои собственные откаты.
Bootstrap официально не поддерживает сторонних JavaScript библиотек как Prototype или jQuery UI. Несмотря на .noConflict
и пространством событий, там могут быть проблемы совместимости, что вам нужно исправить самостоятельно.
Для простой эффект перехода, включить transition.js
после вместе с другими JS-файлов. Если вы используете скомпилированный (или уменьшенная), bootstrap.js
, там не нужно к этому относится—это уже есть.
Transition.js является основным помощником для transitionEnd
события, а также CSS перехода эмулятор. Он используется другими плагинами для проверки CSS поддержке в переходный период и ловить висячие переходы.