Отдельные или собранные плагины

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

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

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

Однако в некоторых случаях может понадобиться отключить эту функциональность. Для этого можно отключить API атрибутов данных, отвязав все события с пространством имён 'data-api' на body:

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

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

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

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

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

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

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

$("#myModal").modal()                       // initialized with defaults
$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
$("#myModal").modal('show')                // initializes and invokes show immediately

Каждый плагин также предоставляет свой конструктор "Constructor" через свойство Constructor: $.fn.popover.Constructor. Если вы хотите получить экземпляр определённого плагина, извлеките его напрямую из элемента: $('[rel=popover]').data('popover').

Конфликты пространств имён

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality

События

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

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

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // stops modal from being shown
})

О переходах

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

Примеры использования

Несколько примеров использования плагина перехода:

• Слайдинг или затухание в модальных окнах
• Затухание вкладок
• Затухание оповещений
• Слайдинг панелей карусели

Примеры

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

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

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

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Живой пример

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

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

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

Через атрибуты данных

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Через JavaScript

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

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

Опции

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

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Методы

.modal(options)

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

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

.modal('toggle')

Вручную переключает модальное окно.

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

.modal('show')

Вручную открывает модальное окно.

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

.modal('hide')

Вручную скрывает модальное окно.

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

События

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

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

Примеры

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

В навигационной панели

В табах

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

Через атрибуты данных

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

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Через JavaScript

Вызовите выпадающие меню через JavaScript:

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

Опции

Нет

Методы

$().dropdown('toggle')

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

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

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

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

Через атрибуты данных

Чтобы легко добавить поведение ScrollSpy к вашей навигационной панели, просто добавьте data-spy="scroll" к элементу, который вы хотите отслеживать (обычно это будет body), и data-target=".navbar" для выбора, какую навигацию использовать. Вы будете использовать ScrollSpy с компонентом .nav.

<body data-spy="scroll" data-target=".navbar">...</body>

Через JavaScript

Вызовите ScrollSpy через JavaScript:

$('#navbar').scrollspy()

Методы

.scrollspy('refresh')

При использовании ScrollSpy в сочетании с добавлением или удалением элементов из DOM вам нужно будет вызвать метод refresh так:

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

Опции

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

События

Примеры

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

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

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

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

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

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

Разметка

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

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

Методы

$().tab

Активирует элемент вкладки и контейнер контента. Вкладка должна иметь либо data-target, либо href, указывающий на узел контейнера в DOM.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

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

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

События

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

Примеры

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

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

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

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

Подсказки в группах ввода

При использовании подсказок и всплывающих окон с группами ввода Bootstrap вам нужно будет установить опцию container (описанную ниже), чтобы избежать нежелательных побочных эффектов.

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

Вызовите подсказку через JavaScript:

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

Опции

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

Разметка

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>

Методы

$().tooltip(options)

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

.tooltip('show')

Показывает подсказку элемента.

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

.tooltip('hide')

Скрывает подсказку элемента.

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

.tooltip('toggle')

Переключает подсказку элемента.

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

.tooltip('destroy')

Скрывает и уничтожает подсказку элемента.

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

Примеры

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

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

Доступны четыре варианта: top, right, bottom, и left aligned.

Нет разметки, так как всплывающие окна генерируются из JavaScript и контента в атрибуте data.

Живой пример

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

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

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

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

Опции

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

Разметка

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

Методы

$().popover(options)

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

.popover('show')

Показывает всплывающее окно элемента.

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

.popover('hide')

Скрывает всплывающее окно элемента.

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

.popover('toggle')

Переключает всплывающее окно элемента.

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

.popover('destroy')

Скрывает и уничтожает всплывающее окно элемента.

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

Примеры

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

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

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

$(".alert").alert()

Разметка

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

<a class="close" data-dismiss="alert" href="#">&times;</a>

Методы

$().alert()

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

.alert('close')

Закрывает сообщение оповещения.

$(".alert").alert('close')

События

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

$('#my-alert').bind('closed', function () {
  // do something…
})

Примеры

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

Состояние

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

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

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

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

<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>

Чекбокс

Добавьте data-toggle="buttons-checkbox" для стиля переключения чекбокса на группе кнопок.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Радио

Добавьте data-toggle="buttons-radio" для стиля переключения радио на группе кнопок.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

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

Включите кнопки через JavaScript:

$('.nav-tabs').button()

Разметка

Атрибуты данных являются неотъемлемой частью плагина кнопок. Ознакомьтесь с примерами кода ниже для различных типов разметки.

Опции

Нет

Методы

$().button('toggle')

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

<button type="button" class="btn" data-toggle="button" >…</button>

$().button('loading')

Устанавливает состояние кнопки в состояние загрузки - отключает кнопку и меняет текст на текст загрузки. Текст загрузки должен быть определен на элементе кнопки с помощью атрибута данных data-loading-text.

<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>

$().button('reset')

Сбрасывает состояние кнопки - меняет текст на исходный текст.

$().button(string)

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

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

О Collapse

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

* Требуется плагин Transitions для включения.

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

Используя плагин collapse, мы создали простой виджет аккордеона:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

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

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  simple collapsible
</button>

<div id="demo" class="collapse in"> … </div>

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

Через атрибуты данных

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

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

Через JavaScript

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

$(".collapse").collapse()

Опции

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

Методы

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

Показывает схлопывающийся элемент.

.collapse('hide')

Скрывает схлопывающийся элемент.

События

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

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

Пример карусели

Ниже приведен пример универсального плагина и компонента для циклического прокручивания элементов, таких как карусель.

Первая миниатюра

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Вторая миниатюра

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Третья миниатюра

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

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

Через атрибуты данных

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

Через JavaScript

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

$('.carousel').carousel()

Опции

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

Методы

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

Останавливает цикл карусели через элементы.

.carousel(number)

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

.carousel('prev')

Циклически прокручивает на предыдущий элемент.

.carousel('next')

Циклически прокручивает на следующий элемент.

События

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

Пример

Базовый, легко расширяемый плагин для быстрого создания элегантных typeaheads с любым текстовым полем формы.

<input type="text" data-provide="typeahead">

Вы должны установить autocomplete="off", чтобы предотвратить появление стандартных меню браузера над выпадающим списком Bootstrap typeahead.

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

Через атрибуты данных

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

Через JavaScript

Вызовите typeahead вручную с помощью:

$('.typeahead').typeahead()

Опции

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

Методы

.typeahead(options)

Инициализирует поле ввода с typeahead.

Пример

Нижнее меню слева является живым примером плагина affix.

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

Через атрибуты данных

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

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

Через JavaScript

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

$('#navbar').affix()

Опции

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