Bootstrap поставляется с 12-ю jQuery плагинами для оживления Вашего проекта.
Ниже Вы видите пример статичного всплывающего окна.
Тело и текст окна…
Запустите всплывающие окно, нажав на кнопку ниже. Всплывающее окно плавно появится сверху и становится в середине окна браузера.
Запустить пример всплывающего окнаВызвать всплывабщее окно можно через 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 в свой проект для анимации.
Активирует контент как всплывающее окно. Поддерживает дополнительные опции object
.
$('#myModal').modal({ keyboard: false })
Скрыть/показать элемент при вызове метода.
$('#myModal').modal('toggle')
Показать элемент при вызове метода.
$('#myModal').modal('show')
Скрыть элемент при вызове метода.
$('#myModal').modal('hide')
Bootstrap поддерживает вызов событий для работы с всплывающими элементами.
Событие | Описание |
---|---|
show | Это событие срабатывает немедленно после вызова метода show . |
shown | Это событие срабатывает после отображения всплывающего элемента и окончания анимации. |
hide | Это событие срабатывает немедленно после вызова метода hide . |
hidden | Это событие срабатывает после скрытия всплывающего элемента и окончания анимации. |
$('#myModal').on('hidden', function () { // код… })
Добавляйте выпадающие списки к любому элементу с помощью простого плагина от Bootstrap. Bootstrap поддерживает выпадающие списки для навигационного меню (navbar), вкладок и кнопок (pills).
Скачать скриптПротестируйте элементы с выпадающими списками ниже. В пример включены навигационное меню (navbar) и кнопки (pills)
Вызов через javascript:
$('.dropdown-toggle').dropdown()
Для быстрого добавления выпадающего списка к элементу просто добавьте атрибут data-toggle="dropdown"
и выпадающий список будет автоматически применен в случае корректной разметки.
data-target="#menu1"
или href="#menu1"
в зависимости от элемента.
<ul class="nav nav-pills"> <li class="active"><a href="#">Ссылка</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Меню <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu"> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Ссылка</a></li> <li class="divider"></li> <li><a href="#">Отделенная ссылка</a></li> </ul> </li> </ul>
Для избежания изменений в текущем URL, используйте атрибут data-target
вместо href="#"
.
<ul class="nav nav-pills"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"> Меню <b class="caret"></b> </a> <ul class="dropdown-menu"> ... </ul> </li> </ul>
Программное api для активации и использования выпадающих списков.
Плагин ScrollSpy следит за прокруткой внутри элемента или страницы и автоматически обновляет классы навигационных элементов.
Download fileПрокрутите текст внутри элемента ниже, для демонстрации работы плагина. Элементы включенные в выпадающий список так же обновляются.
Было восемь часов утра - время, когда офицеры, чиновники и приезжие обыкновенно после жаркой, душной ночи купались в море и потом шли в павильон пить кофе или чай. Иван Андреич Лаевский, молодой человек лег двадцати восьми, худощавый блондин, в фуражке министерства финансов и в туфлях, придя купаться, застал на берегу много знакомых и между ними своего приятеля, военного доктора Самойленко.
С большой стриженой головой, без шеи, красный, носастый, с мохнатыми черными бровями и с седыми бакенами, толстый, обрюзглый, да еще вдобавок с хриплым армейским басом, этот Самойленко на всякого вновь приезжавшего производил неприятное впечатление бурбона и хрипуна, но проходило два-три дня после первого знакомств, и лицо его начинало казаться необыкновенна добрым, милым и даже красивым. Несмотря на свою неуклюжесть и грубоватый тон. эго был человек смирный, безгранично добрый, благодушный и обязательный.
Со всеми в городе он был на "ты", всем давал деньги взаймы, всех лечил, сватал, мирил, устраивал пикники, на которых жарил шашлык и варил очень вкусную уху из кефалей; всегда он за кого-нибудь хлопотал и просил и всегда чему-нибудь радовался. По общему мнению, он был безгрешен, и водились за ним только две слабости: во-первых, он стыдился своей доброты и старался маскировать ее суровым взглядом и напускною грубостью, и, во-вторых, он любил, чтобы фельдшера и солдаты называли его вашим превосходительством, хотя был только статским советником.
Я недавно читал у одного французского ученого, что львиная морда совсем не похожа на человеческий лик, как думают ученыи. И насщот этого мы поговорим. Приежжайте, сделайте милость. Приежжайте хоть завтра например. Мы теперь постное едим, но для Вас будим готовить скоромное. Дочь моя Наташенька просила Вас, чтоб Вы с собой какие нибудь умные книги привезли. Она у меня эманципе все у ней дураки только она одна умная. Молодеж теперь я Вам скажу, дает себя знать. Дай им бог! Через неделю ко мне прибудет брат мой Иван (Маиор), человек хороший но между нами сказать, Бурбон и наук не любит.
Это письмо должен Вам доставить мой ключник Трофим ровно в 8 часов вечера. Если же привезет его пожже, то побейте его по щекам, по профессорски, нечего с этим племенем церемонится. Если доставит пожже то значит в кабак анафема заходил. Обычай ездить к соседям не нами выдуман не нами и окончится, а потому непременно приежжайте с машинками и книгами. Я бы сам к Вам поехал, да конфузлив очень и смелости не хватает.
Этого не может быть, потому что этого не может быть никогда. Как Вы могли видеть на солнце пятны, если на солнце нельзя глядеть простыми человеческими глазами, и для чего на нем пятны, если и без них можно обойтиться? Из какого мокрого тела сделаны эти самые пятны, если они не сгорают? Может быть, по-вашему и рыбы живут на солнце? Извените меня дурмана ядовитого, что так глупо съострил! Ужасно я предан науке! Рубль сей парус девятнадцатого столетия для меня не имеет никакой цены, наука его затемнила у моих глаз своими дальнейшими крылами. Всякое открытие терзает меня как гвоздик в спине. Хотя я невежда и старосветский помещик, а все же таки негодник старый занимаюсь наукой и открытиями, которые собственными руками произвожу и наполняю свою нелепую головешку, свой дикий череп мыслями и комплектом величайших знаний. Матушка природа есть книга, которую надо читать и видеть.
Вызов плагина через javascript:
$('#navbar').scrollspy()
Для дополнения вашего меню плагином scrollspy, просто добавьте атрибут data-spy="scroll"
к элементу за прокруткой в котором необходимо следить (обычно это элемент body).
<body data-spy="scroll" >...</body>
<a href="#home">home</a>
ссылается на DOM-элемент <div id="home"></div>
.
Используйте при динамическом контенте который изменяет DOM, например через AJAX. Вам просто необходимо вызвать метод refresh для корректной работы плагина scrollspy:
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') });
Имя | Тип | Значение по умолчанию | Описание |
---|---|---|---|
offset | number | 10 | Отступ сверху в пискселях для расчета позиции прокрутки. |
Событие | Описание |
---|---|
activate | Это событие срабатывает немедленно каждый раз при активации нового элемента в навигации. |
Это плагин позволяет создать простые переключаемые вкладки.
Скачать скриптПокликайте на пример ниже для ознакомления с возможностями этого скрипта.
Это случилось в давние времена, в далеком, неведомом краю. Над краем царила вечная, черная ночь. Гнилые туманы поднимались над болотистой землею и стлались в воздухе. Люди рождались, росли, любили и умирали в сыром мраке. Но иногда дыхание ветра разгоняло тяжелые испарения земли. Тогда с далекого неба на людей смотрели яркие звезды. Наступал всеобщий праздник.
Люди, в одиночку сидевшие в темных, как погреба, жилищах, сходились на площадь и пели гимны Небу Отцы указывали детям на звезды и учили что в стремлении к ним жизнь и счастье человека. Юноши и девушки жадно вглядывались в небо и неслись к нему душою из давившего землю мрака. Звездам молились жрецы. Звезды воспевали поэты. Ученые изучили пути звезд их число величину и сделали важное открытие, оказалось, что звезды медленно но непрерывно приближаются к земле.
Десять тысяч лет назад - так говорили вполне достоверные источники - с трудом можно было различить улыбку на лице ребенка за полтора шага. Теперь же всякий легко различал ее за целых три шага. Не было никакого сомнения, что через несколько миллионов лет небо засияет яркими огнями и на земле наступит царство вечного лучезарного света. Все терпеливо ждали блаженного времени и с надеждою на него умирали. Так долгие годы шла жизнь людей тихая и безмятежная и согревалась она кроткою верою в далекие звезды.
А небо светилось светлело. И вдруг над краем земли сверкнула слепяще-яркая точка - Звезда! Идет звезда! И в бурной радости побежали люди навстречу. Яркие, как день, лучи гнали перед собою гнилые туманы. Разорванные, взлохмаченные туманы метались и приникали к земле. А лучи били по ним, рвали на части и вгоняли в землю. Осветилась и очистилась даль земли. Люди увидели, как широка эта даль, сколько вольного простору на земле и сколько братьев их живет во все стороны от них. И в бурной радости бежали они навстречу свету. По дороге тихим шагом шел Адеил и высоко держал за луч сорванную с неба звезду. Он был один.
Активируйте функционал вкладок 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>
Метод активирует вкладку и ссылающийся контейнер. Вкладка должна ссылаться на 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.
Скачать плагинНаведите на ссылки для тестирования всплывающих подсказок в действии:
А небо светилось светлело. И вдруг над краем земли сверкнула слепяще-яркая точка - Звезда! Идет звезда! И в бурной радости побежали люди навстречу. Яркие, как день, лучи гнали перед собою гнилые туманы. Разорванные, взлохмаченные туманы метались и приникали к земле. А лучи били по ним, рвали на части и вгоняли в землю. Осветилась и очистилась даль земли. Люди увидели, как широка эта даль, сколько вольного простору на земле и сколько братьев их живет во все стороны от них. И в бурной радости бежали они навстречу свету. По дороге тихим шагом шел Адеил и высоко держал за луч сорванную с неба звезду. Он был один.
Вызов подсказки через 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 Структура объекта: |
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
Добавляет подсказку к элементам.
Запускает показ подсказки.
$('#element').tooltip('show')
Скрывает подсказку.
$('#element').tooltip('hide')
Показывает и скрывает подсказку.
$('#element').tooltip('toggle')
Добавляет всплывающий контент в элементам в стиле интерфейса на iPad.
* Для работы требуется установленный плагин Tooltip
Скачать плагинНаведите курсор на кнопку для теста всплывающего контента.
Активация всплывающего контента через 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 Структура объекта: |
Добавляет всплывающий контент к элементам.
Запускает показ всплывающего контента.
$('#element').popover('show')
Скрывает элемент с всплывающим контентом
$('#element').popover('hide')
Запускает показ/скрытие всплывающего контента.
$('#element').popover('toggle')
Плагин сообщений это JS-class, который просто добавляет функционал скрытия сообщению.
Скачать скриптПлагин работает как с обычными сообщениями так и с блочнымиs.
Измените данные в полях ввода и попробуйте отправить форму повторно. Яркие, как день, лучи гнали перед собою гнилые туманы. Разорванные, взлохмаченные туманы метались и приникали к земле.
Активируйте плагин через javascript:
$(".alert").alert()
Просто добавьте атрибут data-dismiss="alert"
к элементу, для простого добавления функционала закрытия окна сообщения.
<a class="close" data-dismiss="alert" href="#">×</a>
Добавляет функционал скрипта ко всем сообщениям на странице. Для анимации ваших сообщений добавьте к ним класс .fade
и .in
.
Закрывает сообщение.
$(".alert").alert('close')
Bootstrap имеет несколько событий при закрытии сообщения.
Событие | Описание |
---|---|
close | Это событие срабатывает немедленно после вызова метода close . |
closed | Это событие срабатывает сразу после закрытия сообщения, включая время анимации. |
$('#my-alert').bind('closed', function () { // Ваш код/функция })
Анимация и функционал горизонтальных вкладок для группы элементов. Например навигации или контента.
Скачать скрипт* Для работы необходим плагин Transitions.
Используя плагин collapse, мы создали простой пример из группы горизонтальных вкладок:
Активация через 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"
. Рассмотрите пример выше для примера в действии.
Активирует скрипт по отношению к элементам. Принимает дополнительные опции в виде object
.
$('#myCollapsible').collapse({ toggle: false })
Переключает показ/скрытие элемента.
Показывает (раскрывает) все элементы.
Скрывает все элементы.
Плагин collapse от Bootstrap имеет ряд доступных событий.
Событие | Описание |
---|---|
show | Срабатывает немедленно при вызове show метода. |
shown | Срабатывает немедленно после показа элемента и окончания анимации. |
hide |
Срабатывает немедленно при вызове hide метода.
|
hidden | Срабатывает немедленно после скрытия элемента и окончания анимации. |
$('#myCollapsible').on('hidden', function () { // Ваш код или функция })
Поиграйтесь с слайдшоу ниже.
Вызов через javascript:
$('.carousel').carousel()Если на странице множество (более одной) карусели:
$('div[class^=carousel]').carousel()
Имя | Тип | Значение по умолчанию | Описание |
---|---|---|---|
interval | number | 5000 | Количество миллисекунд между сменой слайдов. Если установить значение false , карусель не будет запущена автоматически. |
pause | string | "hover" | Ставит показ слайдов на паузу при фокусе карусельки и возобновляет показ при потере фокуса. |
Дополнительные атрибуты используются для элементов контроля следующий/предыдущий. Смотрите пример кода ниже:
<div id="myCarousel" class="carousel"> <!-- Картинки в карусельке --> <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> <!-- Навигационные элементы --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
Инициализирует карусель с дополнительными опциями в object
и запускает показ слайдов.
$('.carousel').carousel({ interval: 2000 })
Запускает цикл слева направо.
Останавливает показ элементов.
Переход на указанный элемент (Начиная с 0, по аналогии с массивом).
Переход к предыдущему элементу.
Переход к следующему элементу.
Каруселька от Bootstrap имеет два события:
Событие | Описание |
---|---|
slide | Срабатывает каждый раз при вызове метода slide . |
slid | Срабатывает при переходе от последнего элемента к элементу с индексом 0. |
Инициализация множества каруселек с различным интервалом между сменой слайдов:
//Math.random() * (max - min) + min //Случайное значение, аналог md_rand(min, max) в PHP $('.carousel').each(function(){ $(this).carousel({ interval: Math.random()*(12000-4000)+4000 }); });
Инициализация множества каруселек c заданными опциями:
$('div[class^=carousel]').carousel() interval: 5000 });
Плагин для создания вспомогательного выпадающего меню для input полей, а-ля Google поиск.
Скачать скриптНачните писать в поле ниже для теста:
Вызов через 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">
Инициализация скрипта.