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

Если Вы скачали последнюю версию 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 примененим к всплывающим окнам или сообщениям. Данный плагин включен по умолчанию для анимации в других плагинах.

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

• Анимированное открытие и скрытие всплывающих окон
• Смена вкладок
• Скрытие сообщений
• Каруселька

Всплывающее окно

Простые в использовании и легкие в настройке - всплывающие окна для Вашего проекта.

Пример

Ниже Вы видите пример статичного всплывающего окна.

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

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

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

<-- Button to trigger modal -->
<ahref="#myModal"role="button"class="btn"data-toggle="modal">Launch demo modal</a>
 
<-- Modal -->
<divclass="modal"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h3id="myModalLabel">Modal header</h3>
</div>
<divclass="modal-body">
<p>One fine body…</p>
</div>
<divclass="modal-footer">
<buttonclass="btn"data-dismiss="modal"aria-hidden="true">Close</button>
<buttonclass="btn btn-primary">Save changes</button>
</div>
</div>

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

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

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

<buttontype="button"data-toggle="modal"data-target="#myModal">Открыть модальное окно</button>

Через JavaScript

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

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

Опции

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

<adata-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" к ссылке или кнопке для вызова выпадающего меню.

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

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

<divclass="dropdown">
<aclass="dropdown-toggle"id="dLabel"role="button"data-toggle="dropdown"data-target="#"href="/page.html">
 Dropdown
<bclass="caret"></b>
</a>
<ulclass="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" для ассоциации с элементом навигации.

<bodydata-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, мы создали простой пример из группы горизонтальных вкладок:

<divclass="accordion"id="accordion2">
<divclass="accordion-group">
<divclass="accordion-heading">
<aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapseOne">
 Меню #1
</a>
</div>
<divid="collapseOne"class="accordion-body collapse in">
<divclass="accordion-inner">
 Жизнь нашу можно удобно...
</div>
</div>
</div>
<divclass="accordion-group">
<divclass="accordion-heading">
<aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapseTwo">
 Меню #2
</a>
</div>
<divid="collapseTwo"class="accordion-body collapse">
<divclass="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.

<buttontype="button"class="btn btn-danger"data-toggle="collapse"data-target="#demo">
 simple collapsible
</button>
 
<divid="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

‹›

<divid="myCarousel"class="carousel slide">
<!-- Carousel items -->
<divclass="carousel-inner">
<divclass="active item">…</div>
<divclass="item">…</div>
<divclass="item">…</div>
</div>
<!-- Carousel nav -->
<aclass="carousel-control left"href="#myCarousel"data-slide="prev">&lsaquo;</a>
<aclass="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 имеет два события:

Пример

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

<inputtype="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" для контроля отступа.

<divdata-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".