Javascript плагины для Bootstrap

Bootstrap поставляется с 12-ю jQuery плагинами для оживления Вашего проекта.

Внимание! Все javascript плагины для работы требуют использование jQuery в последней версии.

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

Всплывающие окна на основе традиционного javascript.

Скачать скрипт

Статичный пример

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

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

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

Запустить пример всплывающего окна

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

Вызвать всплывабщее окно можно через javascript:

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

Опции

Имя Тип Значение по умолчанию Описание
backdrop boolean true Добавляет элемент modal-backdrop, темный задний фон. Дополнительно добавьте static к modal-backdrop для отмены закрытия всплывающего окна при клике на темный фон.
keyboard boolean true Закрывает всплывающее окно при нажатии на клавишу escape (эскейп)
show boolean true Запускает всплывающее окно.

Код

Вы можете активировать всплывающее окно без единой строчки javascript-кода. Просто добавьте атрибут data-toggle="modal" к вызвающему элементу и атрибут data-target="#foo" или href="#foo" который ссылается на id всплывающего окна, и при клике будет вызываться всплывающее окно.

<a class="btn" data-toggle="modal" href="#myModal" >Запустить пример всплывающего окна</a>
<div class="modal" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Заголовок</h3>
  </div>
  <div class="modal-body">
    <p>Текст…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Закрыть</a>
    <a href="#" class="btn btn-primary">Сохранить</a>
  </div>
</div>
Внимание! Если Вы хотите анимировать показ и скрытие всплывающего окна, просто добавьте класс .fade к элементу .modal. Не забудьте включить скрипт bootstrap-transition.js в свой проект для анимации.

Методы

.modal(options)

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

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

.modal('toggle')

Скрыть/показать элемент при вызове метода.

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

.modal('show')

Показать элемент при вызове метода.

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

.modal('hide')

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

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

События

Bootstrap поддерживает вызов событий для работы с всплывающими элементами.

Событие Описание
show Это событие срабатывает немедленно после вызова метода show.
shown Это событие срабатывает после отображения всплывающего элемента и окончания анимации.
hide Это событие срабатывает немедленно после вызова метода hide.
hidden Это событие срабатывает после скрытия всплывающего элемента и окончания анимации.
$('#myModal').on('hidden', function () {
  // код…
})

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

Download file

Пример навигационного меню (navbar) с использованием scrollspy

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

@fat

Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай. Иван Андреич Лаевский, молодой человек лег двадцати восьми, худощавый блондин, в фуражке министерства финансов и в туфлях, придя купаться, застал на берегу много знакомых и между ними своего приятеля, военного доктора Самойленко.

@mdo

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

Один

Со всеми в городе он был на "ты", всем давал деньги взаймы, всех лечил, сватал, мирил, устраивал пикники, на которых жарил шашлык и варил очень вкусную уху из кефалей; всегда он за кого-нибудь хлопотал и просил и всегда чему-нибудь радовался. По общему мнению, он был безгрешен, и водились за ним только две слабости: во-первых, он стыдился своей доброты и старался маскировать ее суровым взглядом и напускною грубостью, и, во-вторых, он любил, чтобы фельдшера и солдаты называли его вашим превосходительством, хотя был только статским советником.

Два

Я недавно читал у одного французского ученого, что львиная морда совсем не похожа на человеческий лик, как думают ученыи. И насщот этого мы поговорим. Приежжайте, сделайте милость. Приежжайте хоть завтра например. Мы теперь постное едим, но для Вас будим готовить скоромное. Дочь моя Наташенька просила Вас, чтоб Вы с собой какие нибудь умные книги привезли. Она у меня эманципе все у ней дураки только она одна умная. Молодеж теперь я Вам скажу, дает себя знать. Дай им бог! Через неделю ко мне прибудет брат мой Иван (Маиор), человек хороший но между нами сказать, Бурбон и наук не любит.

Три

Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера. Если же привезет его пожже, то побейте его по щекам, по профессорски, нечего с этим племенем церемонится. Если доставит пожже то значит в кабак анафема заходил. Обычай ездить к соседям не нами выдуман не нами и окончится, а потому непременно приежжайте с машинками и книгами. Я бы сам к Вам поехал, да конфузлив очень и смелости не хватает.

Этого не может быть, потому что этого не может быть никогда. Как Вы могли видеть на солнце пятны, если на солнце нельзя глядеть простыми человеческими глазами, и для чего на нем пятны, если и без них можно обойтиться? Из какого мокрого тела сделаны эти самые пятны, если они не сгорают? Может быть, по-вашему и рыбы живут на солнце? Извените меня дурмана ядовитого, что так глупо съострил! Ужасно я предан науке! Рубль сей парус девятнадцатого столетия для меня не имеет никакой цены, наука его затемнила у моих глаз своими дальнейшими крылами. Всякое открытие терзает меня как гвоздик в спине. Хотя я невежда и старосветский помещик, а все же таки негодник старый занимаюсь наукой и открытиями, которые собственными руками произвожу и наполняю свою нелепую головешку, свой дикий череп мыслями и комплектом величайших знаний. Матушка природа есть книга, которую надо читать и видеть.


Использование bootstrap-scrollspy.js

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

$('#navbar').scrollspy()

Код

Для дополнения вашего меню плагином scrollspy, просто добавьте атрибут data-spy="scroll" к элементу за прокруткой в котором необходимо следить (обычно это элемент body).

<body data-spy="scroll" >...</body>
Внимание! Ссылки в навигационном меню (Navbar) должны ссылаться на id элкментов. Например: <a href="#home">home</a> ссылается на DOM-элемент <div id="home"></div>.

Методы

.scrollspy('refresh')

Используйте при динамическом контенте который изменяет DOM, например через AJAX. Вам просто необходимо вызвать метод refresh для корректной работы плагина scrollspy:

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

Опции

Имя Тип Значение по умолчанию Описание
offset number 10 Отступ сверху в пискселях для расчета позиции прокрутки.

События

Событие Описание
activate Это событие срабатывает немедленно каждый раз при активации нового элемента в навигации.

Это плагин позволяет создать простые переключаемые вкладки.

Скачать скрипт

Пример

Покликайте на пример ниже для ознакомления с возможностями этого скрипта.

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

Люди, в одиночку сидевшие в темных, как погреба, жилищах, сходились на площадь и пели гимны Небу Отцы указывали детям на звезды и учили что в стремлении к ним жизнь и счастье человека. Юноши и девушки жадно вглядывались в небо и неслись к нему душою из давившего землю мрака. Звездам молились жрецы. Звезды воспевали поэты. Ученые изучили пути звезд их число величину и сделали важное открытие, оказалось, что звезды медленно но непрерывно приближаются к земле.


Использование bootstrap-tab.js

Активируйте функционал вкладок via javascript (каждая вклажка активируется отдельно):

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

Есть несколько способов активировать каждую вкладку:

$('#myTab a[href="#profile"]').tab('show'); // Выбор вкладки по имени
$('#myTab a:first').tab('show'); // Выбор первой вкладки
$('#myTab a:last').tab('show'); // Выбор последней вкладки
$('#myTab li:eq(2) a').tab('show'); // Выбор по номеру, в примере: третьей вкладки (Начиная с 0)

Код

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

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Главная</a></li>
  <li><a href="#profile" data-toggle="tab">Профиль</a></li>
  <li><a href="#messages" data-toggle="tab">Сообщения</a></li>
  <li><a href="#settings" data-toggle="tab">Настройки</a></li>
</ul>

Методы

$().tab

Метод активирует вкладку и ссылающийся контейнер. Вкладка должна ссылаться на id контейнера в DOM data-target или href.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Главная</a></li>
  <li><a href="#profile">Профиль</a></li>
  <li><a href="#messages">Сообщения</a></li>
  <li><a href="#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>

События

Событие Описание
show Это событие немедленно срабатывает при показе вкладки, но до фактического показа новой вкладки. Используйте event.target и event.relatedTarget для получения текущей активной вкладки и предыдущей активной вкладки соответственно.
shown Это событие немедленно срабатывает при показе вкладки, после окончания анимации и фактического отображения контента новой вкладки. Используйте event.target и event.relatedTarget для получения текущей активной вкладки и предыдущей активной вкладки соответственно.
$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // Активная вкладка
  e.relatedTarget // Предыдущая активная вкладка
})

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

Вдохновленные плагином jQuery.tipsy от Джейсона Фрейма (Jason Frame); Мы создали Tooltips обновленный и не основанный на картинках, мы использовали CSS3-animation, и атрибут data-attribute.

Скачать плагин

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

Наведите на ссылки для тестирования всплывающих подсказок в действии:

А небо светилось светлело. И вдруг над краем земли сверкнула слепяще-яркая точка - Звезда! Идет звезда! И в бурной радости побежали люди навстречу. Яркие, как день, лучи гнали перед собою гнилые туманы. Разорванные, взлохмаченные туманы метались и приникали к земле. А лучи били по ним, рвали на части и вгоняли в землю. Осветилась и очистилась даль земли. Люди увидели, как широка эта даль, сколько вольного простору на земле и сколько братьев их живет во все стороны от них. И в бурной радости бежали они навстречу свету. По дороге тихим шагом шел Адеил и высоко держал за луч сорванную с неба звезду. Он был один.


Использование bootstrap-tooltip.js

Вызов подсказки через javascript:

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

Опции

Имя Тип Значение по умолчанию Описание
animation boolean true Добавляет "всплывающую" анимацию при показе/скрытии подсказки
placement string|function 'top' Позиционирование подсказки - top | bottom | left | right
selector string false Задает цель для подсказки.
title string | function '' Значение подсказки по умолчанию если тег `title` не явно указан
trigger string 'hover' Задает тип события при котором происходит показ/скрытие подсказки - hover | focus | manual
delay number | object 0

Задержка перед показом/скрытием подсказки в миллисекундах (ms) - не применяется для trigger с типом manual

Структура объекта: delay: { show: 500, hide: 100 }

Внимание! Опции для самописных и нестандартных подсказок могут быть заданы через data-атрибуты.

Код

<a href="#" rel="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')

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

Добавляет всплывающий контент в элементам в стиле интерфейса на iPad.

* Для работы требуется установленный плагин Tooltip

Скачать плагин

Пример

Наведите курсор на кнопку для теста всплывающего контента.


Использование bootstrap-popover.js

Активация всплывающего контента через javascript:

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

Опции

Имя Тип Значение по умолчанию Описание
animation boolean true Добавляет "всплывающую" анимацию при показе/скрытии подсказки
placement string|function 'top' Позиционирование подсказки - top | bottom | left | right
selector string false Задает цель для подсказки.
trigger string 'hover' Задает тип события при котором происходит показ/скрытие подсказки - hover | focus | manual
title string | function '' Значение подсказки по умолчанию если тег `title` не явно указан
content string | function '' Значение контента по умолчанию если атрибут `data-content` не явно указан
delay number | object 0

Задержка перед показом/скрытием подсказки в миллисекундах (ms) - не применяется для trigger с типом manual

Структура объекта: delay: { show: 500, hide: 100 }

Внимание! Опции для самописного и нестандартного всплывающего контента могут быть заданы через data-атрибуты.

Код

Методы

$().popover(options)

Добавляет всплывающий контент к элементам.

.popover('show')

Запускает показ всплывающего контента.

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

.popover('hide')

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

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

.popover('toggle')

Запускает показ/скрытие всплывающего контента.

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

О Сообщениях

Плагин сообщений это JS-class, который просто добавляет функционал скрытия сообщению.

Скачать скрипт

Пример

Плагин работает как с обычными сообщениями так и с блочнымиs.

Внимание! Текст сообщения.

Ошибка!

Измените данные в полях ввода и попробуйте отправить форму повторно. Яркие, как день, лучи гнали перед собою гнилые туманы. Разорванные, взлохмаченные туманы метались и приникали к земле.

Отменить Повторить


Использование bootstrap-alert.js

Активируйте плагин через javascript:

$(".alert").alert()

Код

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

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

Методы

$().alert()

Добавляет функционал скрипта ко всем сообщениям на странице. Для анимации ваших сообщений добавьте к ним класс .fade и .in.

.alert('close')

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

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

События

Bootstrap имеет несколько событий при закрытии сообщения.

Событие Описание
close Это событие срабатывает немедленно после вызова метода close.
closed Это событие срабатывает сразу после закрытия сообщения, включая время анимации.
$('#my-alert').bind('closed', function () {
  // Ваш код/функция
})

О Кнопках

Расширьте функционал кнопок при помощи этого плагина. Контролируйте состояние кнопок или создавайте группы кнопок.

Скачать скрипт

Примеры

Контроль состояния кнопок.

Статус
Залипание
Множественное залипание
Тумблер

Использование bootstrap-button.js

Активация функционала через javascript:

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

Код

Используйте атрибуты "data-attribute" для управления плагином. Изучите пример ниже с несколькими вариантами.

<!-- Добавьте data-toggle="button" для эффекта залипания -->
<button class="btn" data-toggle="button">Нажми и я залипну</button>

<!-- Добавьте data-toggle="buttons-checkbox" для множественного залипания к элементу с классом btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Левая</button>
  <button class="btn">Середина</button>
  <button class="btn">Правая</button>
</div>

<!-- Добавьте data-toggle="buttons-radio" для создания тумблера из группы кнопок к элементу с классом btn-group -->
<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">Левая</button>
  <button class="btn">Середина</button>
  <button class="btn">Правая</button>
</div>

Методы

$().button('toggle')

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

Внимание! Для активации залипания без написания JS просто добавьте атрибут data-toggle.
<button class="btn" data-toggle="button" >…</button>

$().button('loading')

Переводит кнопку в состояние загрузки - делает кнопку недоступной и изменяет текст на содержимое атрибута data-loading-text. Текст отображаемый при нажатии кнопки должен быть в атрибуте data-loading-text у элемента button.

<button class="btn" data-loading-text="Загружаю…" >Нажми и загрузи</button>
Внимание! Firefox сохраняет недоступное состояние кнопки после выполнения скрипта. Для решения проблемы используйте autocomplete="off".

$().button('reset')

Возвращает кнопкам изначальное состояние.

$().button(string)

Возвращает кнопкам изначальное состояние - при этом изменяя текст кнопки на заданное значение.

<button class="btn" data-complete-text="Загружено!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Анимация и функционал горизонтальных вкладок

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

Скачать скрипт

* Для работы необходим плагин Transitions.

Пример

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

Жизнь нашу можно удобно сравнивать со своенравною рекою, на поверхности которой плавает чёлн, иногда укачиваемый тихоструйною волною, нередко же задержанный в своём движении мелью и разбиваемый о подводный камень. - Нужно ли упоминать, что сей утлый чёлн на рынке скоропреходящего времени есть не кто иной, как сам человек?
Нет столь великой вещи, которую не превзошла бы величиною ещё большая. Нет вещи столь малой, в которую не вместилась бы ещё меньшая.
Если бы тени предметов зависели не от величины сих последних, а имели бы свой произвольный рост, то, может быть, вскоре не осталось бы на всём земном шаре ни одного светлого места.
"Зачем, - говорит эгоист, - стану я работать для потомства, когда оно ровно ничего для меня не сделало?" - Несправедлив ты, безумец! Потомство сделало для тебя уже то, что ты, сближая прошедшее с настоящим и будущим, можешь по произволу считать себя: младенцем, юношей и старцем.
Три дела, однажды начавши, трудно кончить: а) вкушать хорошую пищу; б) беседовать с возвратившимся из похода другом и в) чесать, где чешется.
Если у тебя спрошено будет: что полезнее, солнце или месяц? - ответствуй: месяц. Ибо солнце светит днём, когда и без того светло; а месяц - ночью.

Использование bootstrap-collapse.js

Активация через javascript:

$(".collapse").collapse()

Опции

Имя Тип Значение по умолчанию Описание
parent selector false Селектор элемента который будет отображаться в случае скрытия всех child элементов. (По принципу работы аккордеона)
toggle boolean true Переключение элемента при событии по умолчанию

Код

Добавьте атрибут data-toggle="collapse" и data-target к элементу для автоматической активации плагина. Атрибут data-target в качестве значения принимает css-селектор. Не забудьте добавить класс collapse к элементам с отображаемым контентом. Для создания по умолчанию раскрытого элемента добавьте дополнительный класс in.

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

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

<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>
Внимание! Для управления группой элементов как в примере выше, добавьте атрибут с селектором родительского элемента data-parent="#selector". Рассмотрите пример выше для примера в действии.

Методы

.collapse(options)

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

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

.collapse('toggle')

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

.collapse('show')

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

.collapse('hide')

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

События

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

Событие Описание
show Срабатывает немедленно при вызове show метода.
shown Срабатывает немедленно после показа элемента и окончания анимации.
hide Срабатывает немедленно при вызове hide метода.
hidden Срабатывает немедленно после скрытия элемента и окончания анимации.
$('#myCollapsible').on('hidden', function () {
  // Ваш код или функция
})

Вспомогательное меню для input поля

Плагин для создания вспомогательного выпадающего меню для input полей, а-ля Google поиск.

Скачать скрипт

Пример

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


Использование bootstrap-typeahead.js

Вызов через javascript:

$('.typeahead').typeahead()

Опции

Имя Тип Значение по умолчанию Описание
source array [ ] Источник с искомыми значениями.
items number 8 Максимальное количество показываемых значений в выпадающем меню.
matcher function case insensitive Метод поиска совпадений. Принимает только одно значение item. Доступ к текущему запросу можно получить через this.query. Возвращает true при совпадении.
sorter function exact match,
case sensitive,
case insensitive
Метод сортировки совпадающих значений. Принимает только одно значение items. Доступ к текущему запросу можно получить через this.query.
highlighter function highlights all default matches Метод выделения совпавших значений. Принимает только одно значение item. Возвращает html.

Код

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

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

Метод

.typeahead(options)

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