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

Если Вы скачали последнюю версию Bootstrap, оба bootstrap.js и bootstrap.min.js все плагины перечисленные на этой странице.

Дата атрибуты

Вы можете использовать все js-плагины Bootstrap'а через API-разметку без написания и единой строчки на JavaScript.

Не смотря на удобность в некоторых ситуациях Вам может потребоваться отключить связку дата-атрибутов с bootstrap.js. Для отвязки всех эвентов от элемента body используйте следующий код:

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

Альтернативно для отключения конкретного плагина, добавьте имя плагина:

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

Программируемое API

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

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

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

$("#myModal").modal()                      // Инициализация настроек по умолчанию
$("#myModal").modal({ keyboard: false })   // Инициализация с параметрами (без клавиатуры)
$("#myModal").modal('show')                // Инициализация и вызов немедленно

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

Эвенты

Для контроля плагинов Bootstrap предоставляет свои уникальные эвенты. В основе они определяют состояние отработки плагина - во время старта (прим. show) эвент сообщает о запуске, а по окончании (прим. shown) эвент сообщает об окончании.

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

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // Закрытие модального окна (точнее предотвращение его открытия)
})

Плавный переход

Создает простой эффект перехода, bootstrap-transition.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>

Всплывающее окно в действии

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

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

<-- Modal -->
<div class="modal" id="myModal" 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">Открыть модальное окно</button>

Через JavaScript

Вызов модального окна с id myModal через JavaScript:

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

Опции

Опции (параметры) могут быть переданы через data attributes или 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 () {
  // код…
})

Пример

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

Добавление к navbar (навигационный бар)

Добавление ко вкладкам (tabs)

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

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

Добавьте атрибут 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

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

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

Опции

нет

Методы

$().dropdown()

Пример в navbar

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

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

Via data attributes

Для добавления функционала плагина scrollspy к вашему навигационному бару (navbar) добавьте атрибут data-spy="scroll" к элементу внутри которого необходимо отслеживать прокрутку (скроллинг) (обычно это элемент body). И атрибут data-target=".navbar" для ассоциации с элементом навигации.

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

Через JavaScript

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

$('#navbar').scrollspy()

Методы

.scrollspy('refresh')

При изменнии DOM'а Вам необходимо обновить плагин:

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

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-offset="".

События

About

Анимация и функционал горизонтальных вкладок.
Анимация и функционал горизонтальных вкладок для группы элементов. Например, навигации или контента.

* Для работы необходим плагин 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">
        Меню #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Жизнь нашу можно удобно...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Меню #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Если бы тени предметов зависели не...
      </div>
    </div>
  </div>
</div>
...

You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

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

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-parent="".

Методы

.collapse(options)

Активирует скрипт по отношению к элементам. Принимает дополнительные опции в виде object.

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

.collapse('toggle')

Переключает показ/скрытие элемента.

.collapse('show')

Показывает (раскрывает) элемент.

.collapse('hide')

Скрывает элемент.

События

Плагин collapse от Bootstrap имеет ряд доступных событий.

$('#myCollapsible').on('hidden', function () {
  // Ваш код или функция…
})

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

Карусель это простой плагин для создания слайдшоу. Смотрите пример ниже.

Заголовок

Текст или описание слайда

Заголовок 2

Текст или описание слайда 2

Заголовок 3

Текст или описание слайда 3

‹ ›

<div id="myCarousel" class="carousel slide">
  <!-- 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>

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

Через 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')

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

События

Каруселька от Bootstrap имеет два события:

Пример

Начните вводить имя города или штата в поле ниже для теста:

<input type="text" data-provide="typeahead" data-items="4" data-source='[...]'>

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

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

Добавьте атрибут data-provide для инициализации скрипта по отношению к элементу. Как в примере выше.

Через JavaScript

Вызов через метод typeahead():

$('.typeahead').typeahead()

Опции

Опции (параметры) могут быть переданы через data attributes или JavaScript. Для дата-атрибутов, препишите имя опции к data-, пример: data-source="".

Методы

.typeahead(options)

Инициализация скрипта.

Пример

Суб-навигация справа в этой документации - живой пример плагина affix.

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

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

Добавбте к элементу атрибут data-spy="affix". Затем data-offset-top="200" для контроля отступа.

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

Через JavaScript

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

$('#navbar').affix()

Методы

.affix('refresh')

При изменении DOM, Вам может потребоваться метод для обновления:

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

Опции

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