Обзор

Индивидуальный или скомпилированный

Плагины могут быть включены индивидуально (с использованием отдельных файлов Bootstrap *.js), или все сразу (с использованием bootstrap.js или минифицированный bootstrap.min.js).

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

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

Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Таким образом, мы также предоставляем возможность отключить API атрибутов данных путем отмены привязки всех событий в документе, имеющем пространство имен с помощью data-api. Это выглядит так:

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

В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api следующим образом:

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

Программный API

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

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

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

$('#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 // изменяет значение по умолчанию для опции `keyboard` модального плагина на false

Нет конфликта

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

var bootstrapButton = $.fn.button.noConflict() // возвращает $.fn.button к ранее присвоенному значению
$.fn.bootstrapBtn = bootstrapButton            // дает $().bootstrapBtn функциональность Bootstrap

События

Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (например, show) запускается в начале события, а его форма причастия прошедшего времени (например, shown) запускается по завершении действия.

Начиная с 3.0.0, все события Bootstrap имеют пространство имен.

Все инфинитивные события обеспечивают функциональность preventDefault. Это дает возможность остановить выполнение действия до его запуска.

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

Санитайзер

Всплывающие подсказки и всплывающие окна используют наше встроенное средство очистки для очистки параметров, принимающих HTML.

Значение по умолчанию whiteList следующее:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Если вы хотите добавить новые значения в этот whiteList по умолчанию, вы можете сделать следующее:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Если вы хотите обойти наше средство очистки, потому что предпочитаете использовать специальную библиотеку, например, DOMPurify, вам следует сделать следующее:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Номера версий

Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство VERSION конструктора подключаемого модуля. Например, для плагина всплывающей подсказки:

$.fn.tooltip.Constructor.VERSION // => "3.4.1"

Никаких специальных резервных вариантов при отключенном JavaScript

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

Переходы transition.js

О переходах

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

Что внутри

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

Отключение переходов

Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен располагаться после transition.js (или bootstrap.js или bootstrap.min.js, в зависимости от обстоятельств) загрузил:

$.support.transition = false

Модальные окна modal.js

Модальные окна - это упрощенные, но гибкие диалоговые окна с минимально необходимой функциональностью и умными настройками по умолчанию.

Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте специальный код JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Примеры

Статический пример

Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <p>Одно прекрасное тело&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Живая демонстрация

Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать с верхней части страницы.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Запустить демо модального окна
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Дополнительные размеры

Модальные окна имеют два необязательных размера, доступных через классы модификаторов для размещения в .modal-dialog.

<!-- Большое модальное окно -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Большое модальное окно</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Маленькое модальное окно -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Маленькое модальное окно</button>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Удаление анимации

Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из модальной разметки.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

Использование системы сеток

Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите элементы .row в .modal-body, а затем используйте обычные классы системы сетки.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Заголовок модального окна</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Изменение модального содержимого в зависимости от кнопки триггера

У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты (возможно, через jQuery) для изменения содержимого модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Открыть модальное окно для @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Открыть модальное окно для @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Открыть модальное окно для @getbootstrap</button>
...еще кнопки...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Новое сообщение</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Получатель:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Сообщение:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Отправить сообщение</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('Новое сообщение to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Использование

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open к <body>, чтобы переопределить поведение прокрутки по умолчанию, и создает .modal-backdrop для обеспечения щелчка область для закрытия отображаемых модальных окон при щелчке вне модальных окон.

Через data-атрибуты

Активируйте модальное окно без написания JavaScript. Установите data-toggle="modal" в элементе контроллера, например кнопке, вместе с data-target="#foo" или href="#foo", чтобы настроить переключение на конкретное модальное окно.

<button type="button" data-toggle="modal" data-target="#myModal">Запустить модальное окно</button>

Через JavaScript

Вызов модального окна с идентификатором myModal с помощью одной строки JavaScript:

$('#myModal').modal(options)

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Нажми на меня</a>

Методы

.modal(options)

Активирует ваш контент как модальный. Принимает необязательные параметры object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Вручную переключает модальное окно. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т. е. происходит до события shown.bs.modal или hidden.bs.modal).

$('#myModal').modal('toggle')

.modal('show')

Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т. е. до того, как произойдет событие shown.bs.modal).

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal. Возврат к вызывающей стороне до фактического скрытия модального окна (т. е. до того, как произойдет событие hidden.bs.modal).

$('#myModal').modal('hide')

.modal('handleUpdate')

Перенастраивает позиционирование модального окна для противодействия полосе прокрутки в случае ее появления, что приведет к переходу модального окна влево.

Требуется только при изменении высоты модального окна, когда оно открыто.

$('#myModal').modal('handleUpdate')

События

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям.

Все модальные события запускаются в самом модальном окне (т. е. в <div class="modal">).

$('#myModal').on('hidden.bs.modal', function (e) {
  // сделай что-нибудь...
})

Выпадающие списки dropdown.js

Примеры

С помощью этого простого плагина можно добавлять раскрывающиеся меню практически ко всему, включая панель навигации, вкладки и таблетки.

На панели навигации

Внутри таблеток

Использование

С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытое содержимое (раскрывающиеся меню) путем переключения класса .open в родительский элемент списка.

На мобильных устройствах открытие раскрывающегося списка добавляет .dropdown-backdrop в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню, что является требованием для надлежащей поддержки iOS. Это означает, что для перехода из открытого раскрывающегося меню в другое раскрывающееся меню требуется дополнительное нажатие на мобильном устройстве.

Примечание. Атрибут data-toggle="dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

Через data-атрибуты

Добавьте data-toggle="dropdown" к ссылке или кнопке, чтобы переключить раскрывающийся список.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Триггер выпадающего списка
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Чтобы URL-адреса оставались неизменными с помощью кнопок ссылок, используйте атрибут data-target вместо href="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Триггер выпадающего списка
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Вызов раскрывающихся списков через JavaScript:

$('.dropdown-toggle').dropdown()

Параметры

Отсутствуют

Методы

$().dropdown('toggle')

Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.

События

Все раскрывающиеся события запускаются в родительском элементе .dropdown-menu.

Все раскрывающиеся события имеют свойство relatedTarget, значением которого является переключаемый элемент привязки.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Отслеживание прокрутки scrollspy.js

Пример на панели навигации

Плагин отслеживание прокрутки предназначен для автоматического обновления навигационных целей в зависимости от положения прокрутки. Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Подпункты раскрывающегося списка также будут выделены.

Использование

Требуется относительное позиционирование

Независимо от метода реализации, scrollspy требует использования position: relative; в элементе, за которым вы следите. В большинстве случаев это <body>. При прокрутке элементов, отличных от <body>, убедитесь, что у вас установлена height и применено overflow-y: scroll;.

Через data-атрибуты

Чтобы легко добавить режим прокрутки к навигации на верхней панели, добавьте data-spy="scroll" к элементу, за которым вы хотите следить (чаще всего это <body>). Затем добавьте атрибут data-target с идентификатором или классом родительского элемента любого компонента Bootstrap .nav.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

После добавления position: relative; в ваш CSS вызовите scrollspy через JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Методы

.scrollspy('refresh')

При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам необходимо вызвать метод обновления следующим образом:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-offset="".

События

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Переключаемые вкладки tab.js

Примеры вкладок

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

Использование

Включите вкладки с вкладками через JavaScript (каждую вкладку нужно активировать индивидуально):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Вы можете активировать отдельные вкладки несколькими способами:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

Разметка

Вы можете активировать навигацию с вкладками или таблетками без написания кода JavaScript, просто указав для элемента data-toggle="tab" или data-toggle="pill". Добавление классов nav и nav-tabs на вкладку ul приведет к применению Bootstrap стиль вкладки, при добавлении классов nav и nav-pills будет применяться стиль таблетки.

<div>

  <!-- Вкладки навигации -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Главная</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Профиль</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Сообщения</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Настройки</a></li>
  </ul>

  <!-- Панели вкладок -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Эффект затухания

Чтобы вкладки постепенно появлялись, добавьте .fade к каждой .tab-pane. Первая панель вкладок также должна иметь .in, чтобы сделать видимым исходное содержимое.

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Методы

$().tab

Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо data-target, либо href, нацеленный на узел контейнера в DOM. В приведенных выше примерах вкладки - это <a> с атрибутами data-toggle="tab".

.tab('show')

Выбирает данную вкладку и показывает связанное с ней содержимое. Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанное с ней содержимое скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (т. е. до того, как произойдет событие shown.bs.tab).

$('#someTab').tab('show')

События

При отображении новой вкладки события запускаются в следующем порядке:

1. hide.bs.tab (на текущей активной вкладке)
2. show.bs.tab (на вкладке для показа)
3. hidden.bs.tab (на предыдущей активной вкладке такая же, как для события hide.bs.tab)
4. shown.bs.tab (на только что активированной вкладке, такой же, как для события show.bs.tab)

Если ни одна вкладка еще не была активна, события hide.bs.tab и hidden.bs.tab запускаться не будут.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Всплывающие подсказки tooltip.js

На основе отличного плагина jQuery.tipsy, написанного Джейсоном Фреймом; Всплывающие подсказки - это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.

Подсказки с заголовками нулевой длины никогда не отображаются.

Примеры

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

Статическая всплывающая подсказка

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.

Четыре направления

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Всплывающая подсказка слева">Всплывающая подсказка слева</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Всплывающая подсказка вверху">Всплывающая подсказка вверху</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Всплывающая подсказка внизу">Всплывающая подсказка внизу</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Всплывающая подсказка справа">Всплывающая подсказка справа</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Использование

Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента.

Запуск всплывающей подсказки через JavaScript:

$('#example').tooltip(options)

Разметка

Требуемая разметка для всплывающей подсказки - это только атрибут data и title в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином устанавливается значение top).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Текст всплывающей подсказки!">Наведите на меня</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Текст всплывающей подсказки!
  </div>
</div>

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-animation="".

Методы

$().tooltip(options)

Присоединяет обработчик всплывающей подсказки к коллекции элементов.

.tooltip('show')

Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до фактического отображения всплывающей подсказки (т. е. до возникновения события shown.bs.tooltip). Это считается "ручным" запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.

$('#element').tooltip('show')

.tooltip('hide')

Скрывает всплывающую подсказку элемента. Возврат к вызывающему абоненту до того, как всплывающая подсказка будет фактически скрыта (т. е. до возникновения события hidden.bs.tooltip). Это считается "ручным" запуском всплывающей подсказки.

$('#element').tooltip('hide')

.tooltip('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до фактического отображения или скрытия всплывающей подсказки (т. е. до возникновения события shown.bs.tooltip или hidden.bs.tooltip). Это считается "ручным" запуском всплывающей подсказки.

$('#element').tooltip('toggle')

.tooltip('destroy')

Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с использованием параметра selector), не могут быть уничтожены индивидуально для дочерних элементов триггера.

$('#element').tooltip('destroy')

События

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Всплывающие окна popover.js

Добавляйте небольшие наложения контента, как на iPad, к любому элементу для размещения вторичной информации.

Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

$(function () {
  $('[data-toggle="popover"]').popover()
})

Примеры

Статическое всплывающее окно

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.

Живое демо

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок всплывающего окна" data-content="А вот и потрясающий контент. Это очень интересно. Верно?">Нажмите, чтобы переключить всплывающее окно</button>

Четыре направления

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Всплывающее окно слева
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Всплывающее окно сверху
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Всплывающее окно внизу
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Всплывающее окно справа
</button>

Отказаться при следующем нажатии

Используйте триггер focus чтобы закрыть всплывающие окна при следующем щелчке пользователя.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Раскрывающееся всплывающее окно" data-content="А вот и потрясающий контент. Это очень интересно. Верно?">Раскрывающееся всплывающее окно</a>

Использование

Включить всплывающие окна через JavaScript:

$('#example').popover(options)

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-animation="".

Методы

$().popover(options)

Инициализирует всплывающие окна для коллекции элементов.

.popover('show')

Показывает всплывающее окно элемента. Возврат к вызывающей стороне до фактического отображения всплывающего окна (т. е. до того, как произойдет событие shown.bs.popover). Это считается "ручным" запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.

$('#element').popover('show')

.popover('hide')

Скрывает всплывающее окно элемента. Возврат к вызывающему абоненту до того, как всплывающее окно будет фактически скрыто (т. е. до того, как произойдет событие hidden.bs.popover). Это считается "ручным" запуском всплывающего окна.

$('#element').popover('hide')

.popover('toggle')

Переключает всплывающее окно элемента. Возврат к вызывающей стороне до фактического отображения всплывающего окна или скрытия (т. е. до того, как произойдет событие shown.bs.popover или hidden.bs.popover). Это считается "ручным" запуском всплывающего окна.

$('#element').popover('toggle')

.popover('destroy')

Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием параметра selector), не могут быть уничтожены индивидуально для дочерних элементов триггера.

$('#element').popover('destroy')

События

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Предупреждающие сообщения alert.js

Примеры уведомлений

Добавьте функцию закрытия для всех предупреждений с помощью этого плагина.

При использовании кнопки .close она должна быть первым дочерним элементом .alert-dismissible, и перед ней в разметке не должно быть текстового содержимого.

Использование

Просто добавьте data-dismiss="alert" к кнопке закрытия, чтобы автоматически включить функцию закрытия предупреждения. Закрытие предупреждения удаляет его из DOM.

<button type="button" class="close" data-dismiss="alert" aria-label="Закрыть">
  <span aria-hidden="true">&times;</span>
</button>

Чтобы в оповещениях использовалась анимация при закрытии, убедитесь, что к ним уже применены классы .fade и .in.

Методы

$().alert()

Заставляет оповещение прослушивать события щелчка на дочерних элементах, имеющих атрибут data-dismiss="alert". (Не требуется при использовании автоматической инициализации data-api.)

$().alert('close')

Закрывает предупреждение, удаляя его из DOM. Если в элементе присутствуют классы .fade и .in, предупреждение исчезнет, прежде чем оно будет удалено.

События

Плагин Bootstrap alert предоставляет несколько событий для подключения к функциям оповещения.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Кнопки button.js

Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов.

С сохранением состояния

Добавьте data-loading-text="Загрузка...", чтобы использовать состояние загрузки для кнопки.

Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.

<button type="button" id="myButton" data-loading-text="Загрузка..." class="btn btn-primary">
  Состояние загрузки
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Одиночный переключатель

Добавьте data-toggle="button", чтобы активировать переключение на одной кнопке.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Одиночный переключатель
</button>

Флажок / Радио

Добавьте data-toggle="buttons" в .btn-group , содержащую флажки или переключатели, чтобы включить переключение в соответствующих стилях.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Флажок 1 (установлен заранее)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Флажок 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Флажок 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Радио 1 (установлен заранее)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Радио 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Радио 3
  </label>
</div>

Методы

$().button('toggle')

Переключает состояние push. Придает кнопке вид, что она была активирована.

$().button('reset')

Сбрасывает состояние кнопки - заменяет текст исходным текстом. Этот метод является асинхронным и возвращается до фактического завершения сброса.

$().button(string)

Меняет текст на любое текстовое состояние, определенное данными.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // текст кнопки будет "готово!"
  })
</script>

Сворачивание collapse.js

Гибкий плагин, который использует несколько классов для легкого переключения поведения.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.in показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target.В обоих случаях требуется data-toggle="collapse".

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Ссылка с href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Кнопка с data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Пример аккордеона

Расширить поведение сворачивания по умолчанию, чтобы создать аккордеон с компонентом панели.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Сворачиваемый групповой элемент #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Сворачиваемый групповой элемент #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Сворачиваемый групповой элемент #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Также можно заменить .panel-body на .list-group.

Использование

Плагин коллапса использует несколько классов, чтобы справиться с тяжелой работой:

• .collapse скрывает содержимое
• .collapse.in показывает содержимое
• .collapsing добавляется при запуске перехода и удаляется при его завершении

Эти классы можно найти в component-animations.less.

Через data-атрибуты

Просто добавьте data-toggle="collapse" и data-target к элементу, чтобы автоматически назначить управление сворачиваемым элементом. Атрибут data-target принимает селектор CSS, к которому нужно применить свертывание. Обязательно добавьте класс collapse к сворачиваемому элементу. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс in.

Чтобы добавить управление группами в виде гармошки к сворачиваемому элементу управления, добавьте атрибут данных data-parent="#selector". Обратитесь к демонстрации, чтобы увидеть это в действии.

Через JavaScript

Включить вручную с помощью:

$('.collapse').collapse()

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-parent="".

Методы

.collapse(options)

Активирует ваш контент как сворачиваемый элемент. Принимает необязательные параметры object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Переключает сворачиваемый элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (то есть до того как произойдет событие shown.bs.collapse или hidden.bs.collapse).

.collapse('show')

Показывает сворачиваемый элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (то есть до того как произойдет событие shown.bs.collapse).

.collapse('hide')

Скрывает сворачиваемый элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически скрыт (то есть до того как произойдет событие hidden.bs.collapse).

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Карусель carousel.js

Компонент слайд-шоу для циклического просмотра элементов, например карусели. Вложенные карусели не поддерживаются.

Примеры

Предыдущий Следующий

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Предыдущий</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Следующий</span>
  </a>
</div>

Необязательные подписи

Легко добавляйте подписи к слайдам с помощью элемента .carousel-caption внутри любого .item. Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.

Метка первого слайда

Nulla vitae elit libero, a pharetra augue mollis interdum.

Метка второго слайда

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Метка третьего слайда

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Предыдущий Следующий

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Использование

Несколько каруселей

Карусели требуют использования id в самом внешнем контейнере (.carousel) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или изменении id карусели обязательно обновите соответствующие элементы управления.

Через data-атрибуты

Используйте атрибуты данных, чтобы легко контролировать положение карусели. data-slide принимает ключевые слова prev или next, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-to для передачи необработанного индекса слайда в карусель data-slide-to="2", которая сдвигает положение слайда на определенный индекс. начиная с 0.

Атрибут data-ride="carousel" используется для пометки карусели как анимированной, начиная с загрузки страницы. Его нельзя использовать в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели.

Через JavaScript

Вызов карусели вручную с помощью:

$('.carousel').carousel()

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-interval="".

Методы

.carousel(options)

Инициализирует карусель с дополнительным параметром object и начинает циклический просмотр элементов.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Перебирает элементы карусели слева направо.

.carousel('pause')

Не позволяет карусели перемещаться по элементам.

.carousel(number)

Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву).

.carousel('prev')

Переход к предыдущему элементу.

.carousel('next')

Переход к следующему элементу.

События

Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели.

Оба события имеют следующие дополнительные свойства:

• direction: Направление, в котором движется карусель ("left" или "right").
• relatedTarget: Элемент DOM, который вставляется на место как активный элемент.

Все события карусели запускаются в самой карусели (т. е. в <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Аффикс affix.js

Пример

Плагин affix включает и выключает position: fixed;, имитируя эффект, обнаруженный с помощью position: sticky;. Поднавигация справа - это живая демонстрация плагина аффиксов.

Использование

Используйте аффикс-плагин Через данные-атрибуты или вручную с вашим собственным JavaScript. В обеих ситуациях вы должны предоставить CSS для позиционирования и ширины вашего прикрепленного контента.

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

Позиционирование через CSS

Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние: .affix, .affix-top и .affix-bottom. Вы должны предоставить стили, за исключением position: fixed; в .affix, для этих классов самостоятельно (независимо от этого плагина) для обработки фактических позиций.

Вот как работает плагин affix:

1. Для начала плагин добавляет .affix-top, чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется.
2. Прокрутка мимо элемента, который вы хотите прикрепить, должна вызвать фактическое прикрепление. Здесь .affix заменяет .affix-top и устанавливает position: fixed; (предоставляется CSS Bootstrap).
3. Если задано нижнее смещение, прокрутка мимо него должна заменить .affix на .affix-bottom. Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае при необходимости добавьте position: absolute;. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда.

Выполните указанные выше действия, чтобы настроить CSS для любого из вариантов использования, указанных ниже.

Через data-атрибуты

Чтобы легко добавить поведение аффикса к любому элементу, просто добавьте data-spy="affix" к элементу, за которым вы хотите следить. Используйте смещения, чтобы определить, когда следует переключать закрепление элемента.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

Через JavaScript

Вызов плагина affix через JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

Параметры

Параметры можно передавать через data-атрибуты или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-offset-top="200".

Методы

.affix(options)

Активирует ваш контент как прикрепленный контент. Принимает необязательные параметры object.

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов. Классы .affix, .affix-top и .affix-bottom добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. . Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы гарантировать правильное позиционирование прикрепленного содержимого.

$('#myAffix').affix('checkPosition')

События

Плагин аффиксов Bootstrap предоставляет несколько событий для подключения к функциональности аффиксов.