Skip to main content

C чего начать

Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.

JavaScript

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')

Программируемый 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"

Никаких специальных откаты, когда JavaScript отключены

Bootstrap плагинов не отступайте особенно изящно, когда JavaScript отключена. Если вы заботитесь об опыте пользователя, в этом случае используйте <noscript>, чтобы объяснить ситуацию (и как включить JavaScript) для пользователей, и/или добавить свои собственные откаты.

Сторонние библиотеки

Bootstrap официально не поддерживает сторонних JavaScript библиотек как Prototype или jQuery UI. Несмотря на .noConflict и пространством событий, там могут быть проблемы совместимости, что вам нужно исправить самостоятельно.

Переходы

Для простой эффект перехода, включить transition.js после вместе с другими JS-файлов. Если вы используете скомпилированный (или уменьшенная), bootstrap.js, там не нужно к этому относится—это уже есть.

Transition.js является основным помощником для transitionEnd события, а также CSS перехода эмулятор. Он используется другими плагинами для проверки CSS поддержке в переходный период и ловить висячие переходы.