15 jQuery плагинов для Bootstrap


Содержание

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

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

jQuery плагины Десятки плагинов от Bootstrap

Modals

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

Позволяет активировать выпадающие списки в Bootstrap. Bootstrap включает в себя выпадающие списки для навигационного меню (navbar), вкладок и кнопок.

Scrollspy

Scrollspy следит за перемещением пользователя по странице и автоматически обновляет класс ссылок в навигационном меню (navbar).

Togglable tabs

Активирует динамическое переключение между вкладками или навигационными кнопками (pills).

Tooltips

Всплывающие подсказки на основе плагина jQuery Tipsy. Подсказки используют CSS3 animation для анимации и атрибут data-attribute для текста.

Popovers *

Всплывающий контент (большие подсказки), в стиле интерфейса на iPad, применяется к любому элементу для расширения информативности.

* Для использования плагина необходим Tooltips плагин

Alert messages

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

Buttons

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

Collapse

Оживляет и делает динамическим стек вкладок или кнопок.

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

Typeahead

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

Transitions *

Создает простой эффект перехода, добавьте скрипт bootstrap-transition.js для применения к всплывающим окнам или сообщениям.

* Данный плагин включен по умолчанию для анимации в других плагинах

Modals bootstrap-modal.js

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

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

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

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

Заголовок

Тело и текст окна…

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

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

Заголовок

Текст в теле

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

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

При наведении на эту кнопку должен появиться всплывающий контент.

Всплывающая подсказка (Tooltips)

Контент превышающий высоту всплывающего окна

Мы выставили фиксированную высоту max-height для .modal-body . При превышении высоты всплывающего окна контентом появляется скроллбар, это видно на примере текста «lorem ipsum» ниже.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

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

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

Опции

Имя Тип Значение по умолчанию Описание
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 всплывающего окна, и при клике будет вызываться всплывающее окно.

Методы

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

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

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

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

События

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

Событие Описание
show Это событие срабатывает немедленно после вызова метода show .
shown Это событие срабатывает после отображения всплывающего элемента и окончания анимации.
hide Это событие срабатывает немедленно после вызова метода hide .
hidden Это событие срабатывает после скрытия всплывающего элемента и окончания анимации.

Выпадающие списки

Добавляйте выпадающие списки к любому элементу с помощью простого плагина от Bootstrap. Bootstrap поддерживает выпадающие списки для навигационного меню (navbar), вкладок и кнопок (pills).

Примеры

Протестируйте элементы с выпадающими списками ниже. В пример включены навигационное меню (navbar) и кнопки (pills)

Использование скрипта bootstrap-dropdown.js

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

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

Для избежания изменений в текущем URL, используйте атрибут data-target вместо href=»#» .

Методы

Программное api для активации и использования выпадающих списков.

ScrollSpy bootstrap-scrollspy.js

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

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

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

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

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

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

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

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

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

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

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

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

Методы

.scrollspy(‘refresh’)

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

Опции

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

События

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

Togglable tabs bootstrap-tab.js

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

Пример

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

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

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

Десять тысяч лет назад — так говорили вполне достоверные источники — с трудом можно было различить улыбку на лице ребенка за полтора шага. Теперь же всякий легко различал ее за целых три шага. Не было никакого сомнения, что через несколько миллионов лет небо засияет яркими огнями и на земле наступит царство вечного лучезарного света. Все терпеливо ждали блаженного времени и с надеждою на него умирали. Так долгие годы шла жизнь людей тихая и безмятежная и согревалась она кроткою верою в далекие звезды.

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

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

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

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

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

Методы

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

События

Событие Описание
show Это событие немедленно срабатывает при показе вкладки, но до фактического показа новой вкладки. Используйте event.target и event.relatedTarget для получения текущей активной вкладки и предыдущей активной вкладки соответственно.
shown Это событие немедленно срабатывает при показе вкладки, после окончания анимации и фактического отображения контента новой вкладки. Используйте event.target и event.relatedTarget для получения текущей активной вкладки и предыдущей активной вкладки соответственно.

Tooltips bootstrap-tooltip.js

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

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

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

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

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

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

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

Опции


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

Структура объекта: delay:

Методы

$().tooltip(options)

Добавляет подсказку к элементам.

.tooltip(‘show’)

Запускает показ подсказки.

.tooltip(‘hide’)

.tooltip(‘toggle’)

Показывает и скрывает подсказку.

Popovers bootstrap-popover.js

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

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

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

Пример

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

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

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

Опции

Имя Тип Значение по умолчанию Описание
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

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

Структура объекта: delay:

Методы

$().popover(options)

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

.popover(‘show’)

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

.popover(‘hide’)

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

.popover(‘toggle’)

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

Alert messages bootstrap-alert.js

О Сообщениях

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

Пример

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

Ошибка!

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

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

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

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

Методы

$().alert()

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

.alert(‘close’)

События

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

Имя Тип Значение по умолчанию Описание
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
Событие Описание
close Это событие срабатывает немедленно после вызова метода close .
closed Это событие срабатывает сразу после закрытия сообщения, включая время анимации.

Buttons bootstrap-button.js

О Кнопках

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

Примеры

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

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

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

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

Методы

$().button(‘toggle’)

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

$().button(‘loading’)

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

$().button(‘reset’)

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

$().button(string)

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

Collapse bootstrap-collapse.js

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

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

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

Пример

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

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

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

Опции

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

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

Методы

.collapse(options)

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

.collapse(‘toggle’)

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

.collapse(‘show’)

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

.collapse(‘hide’)

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

События

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

Событие Описание
show Срабатывает немедленно при вызове show метода.
shown Срабатывает немедленно после показа элемента и окончания анимации.
hide Срабатывает немедленно при вызове hide метода.
hidden Срабатывает немедленно после скрытия элемента и окончания анимации.

Карусель

Плагин для цикличного слайдинга между элементами.

Пример

Поиграйтесь с слайдшоу ниже.

Первый слайд

Принимаясь за дело, соберись с духом.

Второй слайд

Часами измеряется время, а временем жизнь человеческая; но чем, скажи, измеришь ты глубину Восточного океана?

Третий слайд

Многие вещи нам непонятны не потому, что наши понятия слабы; но потому, что сии вещи не входят в круг наших понятий.

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

Если на странице множество (более одной) карусели:

Опции

Имя Тип Значение по умолчанию Описание
interval number 5000 Количество миллисекунд между сменой слайдов. Если установить значение false , карусель не будет запущена автоматически.
pause string «hover» Ставит показ слайдов на паузу при фокусе карусельки и возобновляет показ при потере фокуса.

Дополнительные атрибуты используются для элементов контроля следующий/предыдущий. Смотрите пример кода ниже:

Методы

Инициализирует карусель с дополнительными опциями в object и запускает показ слайдов.

Запускает цикл слева направо.

Останавливает показ элементов.

Переход на указанный элемент (Начиная с 0, по аналогии с массивом).

Переход к предыдущему элементу.

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

События

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

Событие Описание
slide Срабатывает каждый раз при вызове метода slide .
slid Срабатывает при переходе от последнего элемента к элементу с индексом 0.

Дополнительные примеры Дополнение от переводчика

Инициализация множества каруселек с различным интервалом между сменой слайдов:


Такой способ мы использовали на главной странице VeliovGroup.com для снижения нагрузки на браузер, при одновременной смене слайдов.

Инициализация множества каруселек c заданными опциями:

Typeahead bootstrap-typeahead.js

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

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

Пример

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

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

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

Опции

Имя Тип Значение по умолчанию Описание
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 для инициализации скрипта по отношению к элементу.

Метод

.typeahead(options)

Designed and built with all the love in the world @twitter by @mdo and @fat.

Code licensed under the Apache License v2.0. Documentation licensed under CC BY 3.0.

Icons from Glyphicons Free, licensed under CC BY 3.0.

Original in English here.

Разработано с любовью ко всему миру в @twitter от @mdo и @fat.

Код распространяется по лицензии Apache License v2.0. Документация распространяется по лицензии CC BY 3.0.

Иконки нарисованы и предоставлены Glyphicons Free, по лицензии CC BY 3.0.

Лучшие плагины для Twitter Bootstrap. Часть 1

Вы наверняка слышали о Twitter Bootstrap. Это один из самых популярных в мире CSS фреймворков. Twitter Bootstrap прост в освоении, имеет адаптивный дизайн, несколько встроенных jQuery плагинов, а так же набор иконок. Ну и, конечно, главным плюсом этого фреймворка является расширяемость. Я предлагаю небольшой обзор лучших и полезных плагинов для Twitter Bootstrap, которые должен иметь любой WEB разработчик, использующий этот фреймворк.

Коллекция сборок Twitter Bootstrap

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

Fuel UX

Сборка, включающая в себя дополнительные Javascript компоненты, такие как:

  • Checkbox — стилизованный под Twitter Bootstrap стандартный компонент checkbox. Имеет javascript методы включения, переключения и т.д.
  • Combobox — стилизованный под Twitter Bootstrap выпадающий список, имеющий в себе так же несколько полезных javascript методов, упрощающих использование этого компонента. Например, есть выбор текущего активного пункта выпадающего списка по нескольким параметрам: по индексу, по тексту, по селектору или по значению атрибута value.
  • Datagrid — готовая таблица, с постраничным навигатором, сортировкой по столбцам, поиском и фильтрами. И всё это так же стилизованно под Bootstrap. Полезный плагин, позволяющий делать отличные юзабильные таблицы для, например, административной части сайта.
  • Pillbox — с помощью этого компонента Вы без проблем сможете сделать на сайте, например, поле для ввода тегов для статьи.
  • Radiobox, Search, Selectbox, Spinner, Tree, Wizard — всё это дополнительные компоненты, включенные в поставку Fuel UX. Все их описывать здесь нет смысла, т.к. они прекрасно документированы на официальном сайте Fuel UX.

Jasny

Jasny — еще одна коллекция полезных компонентов для Twitter Bootstrap. Здесь включены такие компоненты как:

Typeahead — обычный input, который поддерживает выпадающий AJAX список значений.

Input mask — поле ввода значения по маске.

Row link — делает строку таблицы кликабельной ссылкой.

File Upload — стилизованное под Twitter Bootstrap поле загрузки файла.

И еще много дополнительных компонентов, которые смотрите на официальном сайте Jasny.

Галереи

Конечно, на сайте можно использовать любую jQuery галерею. Но как насчёт галерей, которые сделаны специально под Twitter Bootstrap? Галереи, которые подключаются так же, как и все javascript компоненты Twitter Bootstrap. Т.е. необходимо просто добавить нужный HTML код на страницу и галерея будет работать.

Bootstrap Lightbox

В стандартной поставке Twitter Bootstrap есть встроенная карусель, но она не может показывать фотографии во всплывающем окне, используя lightbox. Вот здесь и поможет Bootstrap Lightbox. Всё что Вам нужно — это добавить HTML код на страницу и Вы получите отличный, резиновый lightbox.

Simple Lightbox

Simple Lightbox — еще один lightbox для Twitter Bootstrap, который еще проще чем Bootstrap Lightbox. Он требует всего лишь добавить data-атрибут к изображению и плагин будет работать!

Bootstrap Image Gallery — готовая галерея для Twitter Bootstrap. После подключения этой галереи, Вы получите сетку с изображениями, которые открываются в lighbox’е при клике. Так же может работать в полноэкранном режиме.

Диалоги и уведомления

В стандартной поставке Twitter Bootstrap есть отличное всплывающее окно. Все эти плагины позволяют усовершенствовать его.

Bootbox.js

Небольшая javascript библиотека, которая автоматизирует процесс создания диалогов Twitter Bootstrap. Она создаст разметку, разные типы сообщений (ошибка, уведомление, поле ввода и т.д.).

Bootstrap Modal

Bootstrap Modal расширяет стандартные модальные окна Twitter Bootstrap. Он делает их резиновыми и добавляет возможность загрузки контента в них по AJAX.

Еще мне очень понравилась одна мелочь, которую упускают большинство создателей всплывающих окон, в том числе и разработчики Twitter Bootstrap. Попробуйте вызвать окно и покрутить колёсиком мыши. Вы увидите, что крутится страница, находящаяся под этим самым всплывающим окном. И это, я Вам скажу, дико не удобно. А если во всплывающем окне тоже есть прокрутка, вы прокручиваете её колёсиком мыши, когда она доходим до конца, начинает прокручиваться страница. А если нам очень важно сохранить позицию прокрутки страницы после выхода из модального окна? В общем не продуманно. НО! Этот плагин решает эту проблему, и страница, на которой вызвали диалоговое окно, не прокручивается, пока окно активно.

Bootstrap Growl

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

Bootstrap Notify

Bootstrap Notify — Еще одни jQuery всплывающие уведомления для Twitter Bootstrap. Отличие от Bootstrap Growl заключается в возможности более детальной кастомизации под себя.

JavaScript

Сайты на Bootstrap легко оживить с помощью готовых плагинов jQuery.

Обзор

Индивидуально или сборником

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

Используя скомпилированный JavaScript

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

Компоненты и атрибуты данных

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

Зависимость плагина

Некоторые плагины и CSS и их компоненты имеют зависимость от других плагинов. Если вы включаете плагины отдельно, просмотрите их документацию, чтобы убедиться, что вы учли их зависимость. Также заметьте, что все плагины зависят от jQuery (это означает, что jQuery должен подключаться перед файлами плагинов). Просмотрите наш файл bower.json , чтобы узнать какая версия jQuery поддерживается.

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

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

Тем не менее, в некоторых ситуациях может быть желанным отключения этой функции. Таким образом, мы также предоставляем возможность отключить API-атрибуты, через отвязке всех событий в пространстве имен (namespaced) документа, при помощи data api . Это выглядит примерно так:

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

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

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

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

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

Без конфликта

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

События

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

По состоянию на 3.0.0, все события Bootstrap с именованными пространствами.

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

Библиотеки третьих сторон

Bootstrap неофициально поддерживает библиотеки JavaScript третьих сторон, такие как Prototype или jQuery UI. Несмотря на то, что мы предоставляем .noConflict и события с именованными пространствами, все равно могут быть проблемы совместимости, которые вам придется исправлять собственноручно.

Переходы transition.js

О переходах

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

Что внутри

Transition.js является базовым помощником для событий transitionEnd , и для эмулятора переходов CSS. Он используется другими плагинами для проверки поддержки переходов CSS и для восстановления висячих переходов.

Модальные окна modal.js

Примеры

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

Перекрытия модали не поддерживается

Убедитесь, что вы не открываете модали в то время, когда другая модаль все еще видимая. Отображение более, чем одной модали одновременно, требует пользовательского кода.

Модальные размещения разметки

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

Оговорки в отношении мобильных устройств

Есть определенные предостережения относительно использования модальных окон на мобильных устройствах. Просмотрите наши документы относительно поддержки браузеров для уточнений.

Пример статического окна

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

Название модали

Живое демо

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

Заголовок модали

Текст модали

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Информационная панель в модали

Эта кнопка должна вызвать popover на клик.

Подсказки в модали

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

Переполнение текстом, чтобы показать поведение с прокруткой

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Сделайте модали доступными

Убедитесь, что добавили role=»dialog» — .modal , атрибут aria-labelledby=»myModalLabel» для ссылки на название модали, и aria-h для оповещения assistive technologies (вспомогательных технологий), чтобы пропускали DOM-элементы модальных окон.

Кроме этого, вы можете предоставить описание диалоговой модали при помощи aria-describedby , .modal .

Дополнительные размеры

Модали имеют два дополнительных размера, доступные через модификаторы классов, которые будут размещены на .modal-dialog .

Большая модаль

Малая модаль


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

Модальный плагин переключает ваш скрытый контент по запросу, через атрибуты данных или JavaScript. Он также добавляет .modal-open к для изменения поведения прокрутки по умолчанию и генерирует .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

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

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

Через JavaScript

Вызывайте модаль с помощью id myModal с лаконичной записью на JavaScript:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. В случае передачи через атрибуты данных, добавьте приставку с названием параметра data , как в примере: data-backdrop=»» .

Если предоставлен удаленный URL, содержимое будет загружаться через jQuery’s load и вставлятись в корневой элемент модали .modal-content . Если вы используете data api, вы можете еще использовать атрибут href для определения удаленного ресурса. Пример такого варианта показан ниже:

Методы

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

Ручное переключение модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal или hidden.bs.modal ).

Ручное отображения модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий shown.bs.modal ).

Ручное сокрытие модали. Возвращается к инициатору перед фактическим показом или сокрытием модали (то есть, перед запуском событий hidden.bs.modal ).

События

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

Название Тип По умолчанию Описание
backdrop логический или строковый ‘static’ true Включает элемент modal-backdrop. Можно также указать static для обстановке, который не закрывается при нажатии на модаль.
keyboard логический true Закрытие модали при клике на клавишу escape.
show логический true Показывает модаль при инициализации.
remote путь false
Тип События Описание
show.bs.modal Это событие срабатывает во время вызова метода show . Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget .
shown.bs.modal Эта подействует срабатывает, когда модаль будет отражена для пользователя (при этом ожидается завершение навигации CSS). Если вызов происходит за клик, то элемент, на котором был этот клик, доступный как свойство события relatedTarget .
hide.bs.modal Это событие срабатывает во время вызова метода hide .
hidden.bs.modal Это событие срабатывает, когда модаль завершит скрытие от пользователя (при этом ожидается завершение навигации CSS).
loaded.bs.modal Это событие генерируется, когда модаль загружена контент использует дистанционный вариант.

Выпадающее меню dropdown.js

Примеры

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

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

Внутри навигационных кнопок

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

Через атрибуты данных или JavaScript, плагин ниспадающего меню переключает скрытый контент (пункты ниспадающего меню) с помощью класса .open на родительском элементе списка. Когда меню раскрыто, плагин добавляет .dropdown-в обстановке , чтобы предоставить область за пределами ниспадающего меню, при клики по которой, отменяется отображение меню. Note: The data-toggle=dropdown attribute is relied on for closing dropdown menus at an application level, so it’s a good idea to always use it.

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

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

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

Через JavaScript

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

data-toggle=»dropdown» still required

Независимо от того, вызываете вы выпадающий эффект через JavaScript или вместо этого использовуете, data-api, data-toggle=»dropdown» всегда должен присутствовать на пусковом элементе в выпадающем окне.

Параметры

Методы

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

События

Все выпадающие события сгорают при .dropdown-menu родительского элемента.

Тип События Описание
show.bs.dropdown Это событие срабатывает при вызове метода show. The toggling anchor element is available as the relatedTarget property of the event.
shown.bs.dropdown Это событие срабатывает, когда выпадающее меню будет отображаться для пользователя (при этом ожидается завершение навигации CSS). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdown Это событие срабатывает во время вызова метода hide. The toggling anchor element is available as the relatedTarget property of the event.
hidden.bs.dropdown Это событие срабатывает, когда выпадающее меню завершит скрытие пунктов меню от пользователя (при этом ожидается завершение навигации CSS). The toggling anchor element is available as the relatedTarget property of the event.

Отслеживание прокрукти scrollspy.js

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

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

Здесь произвольный текст. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Здесь произвольный текст. Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney’s vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney’s quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

Здесь произвольный текст. Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in sustainable delectus consectetur fanny pack iphone.

Здесь произвольный текст. In incididunt echo park, officia deserunt mcsweeney’s proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven’t heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

Здесь произвольный текст. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven’t heard of them consequat hoodie gluten free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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

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

Чтобы легко добавить поведение Отслеживающей Прокрутки (ScrollSpy) к вашей верхней навигационной панели, добавьте data-spy=»scroll» элемента, по которому вы хотите следить (наиболее типично — это будет ). Затем добавьте атрибут data-target с ID или классом родительского элемента, любого компонента Bootstrap с классом .nav .

Через JavaScript

Вызывайте Отслеживание Прокрутки с помощью JavaScript:

Необходимо соответствие между ID и его линку

Навигационная панель должна иметь соответствие между ID и его ссылке. Например, home должен иметь соответствие в DOM с

Методы

.scrollspy(‘refresh’)

При использовании Отслеживание прокрутки в сочетании с добавлением или удалением элементов из DOM, вам нужно вызвать обновляющий метод, как в примере:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data , как в примере: data offset=»» .

Название Тип По умолчанию Описание
offset числовой 10 Пиксели для смещения от верха, при исчислении позиции прокрутки.

События

Тип События Описание
activate.bs.scrollspy Это событие срабатывает каждый раз, когда новый элемент активируется при прокрутке.

Переход по вкладкам tab.js

Пример вкладок

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

Здесь произвольный текст. Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate qui nisi.

Здесь произвольный текст. Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Здесь произвольный текст. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney’s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven’t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Здесь произвольный текст. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Расширение навигационных вкладок

Этот плагин расширяет компонент навигационных вкладок, добавляя область переходов.

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

Включение области навигации, вкладок через JavaScript (каждая вкладка требует индивидуальной активации):

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

Разметка

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

Эффект угасания

Чтобы создать эффект плавного отображения вкладок, добавьте .fade каждый .tab-pane . Первая панель вкладки должна также иметь .in для правильного плавного отображения содержимого.

Методы

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

События

Тип События Описание
show.bs.tab Это событие срабатывает на отображение вкладки, но перед тем, как новая вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно — на активную вкладку и предыдущую активную вкладку (при наличии).
shown.bs.tab Это событие срабатывает на отображение вкладки, после того, как вкладка будет отражена. Используйте event.target и event.relatedTarget для таргетинга соответственно — на активную вкладку и предыдущую активную вкладку (при наличии).

Подсказки tooltip.js

Примеры

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

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

Здесь приведены произвольный текст для примера. Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

Подсказки в группах кнопок и группах форм ввода требуют специальных настроек

При использовании подсказок внутри элементов .btn-group или .input-group , вы должны определить параметр container: ‘body’ (документация ниже), чтобы избежать нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов, при вызове подсказок или информеров).

Подсказки на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled , вставьте элемент внутрь

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

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

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

Разметка

Необходимые для пометки подсказок только атрибут data и title HTML-элементе, на котором вы хотите иметь подсказку. Сгенерированный макет подсказок, довольно проста, хотя и требует позиционирования (по умолчанию установлено top через плагин).

Многолинейные ссылки

Иногда вы хотите добавить всплывающую подсказку к гиперссылке, который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data , как в примере: data-animation=»» .

задержка показа и сокрытия подсказок (ms) — не применяется для ручного типа вызова

Если указывается число, задержка применяется и для сокрытия, и для отображения

Такая Структура объекта: delay:

Отмечается элемент, к которому будет добавленную подсказку. Например: container: ‘body’

Атрибуты данных для индивидуальных подсказок

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

Методы

$().tooltip(параметры)

Закрепите обработчик подсказки по набору элементов.

.tooltip(‘show’)

Отображает всплывающую подсказку элемента.

.tooltip(‘hide’)

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

.tooltip(‘toggle’)

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


.tooltip(‘destroy’)

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

События

Название Тип По умолчанию Описание
animation логический true применяет CSS для плавного перехода к подсказки
html логический false Вставляет HTML в подсказку. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
placement строковый | функция ‘top’ как позиционировать подсказку — top | bottom | left | right | auto.
При указании «auto», подсказка будет динамично переориентироваться. Например, если местоположение указано как «auto left», подсказка будет отображаться слева, если это возможно, и справа — в противном случае.
selector строковый false Если селектор предоставлено, объект подсказки будет делегировано для указанной цели.
title строковый | функция » название по умолчанию, если атрибут title не указано
trigger строковый ‘hover focus’ как вызвать подсказку — click | hover | focus | manual. Вы можете передавать несколько параметров, разделенных пробелами.
delay числовой | объект
container строковый | false false
Тип События Описание
show.bs.tooltip Это событие срабатывает во время вызова метода show .
shown.bs.tooltip Это событие срабатывает, когда подсказка будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.tooltip Это событие срабатывает во время вызова метода hide .
hidden.bs.tooltip Это событие срабатывает, когда сокрытие элемента для пользователя завершится (при этом ожидается завершение навигации CSS).

Информеры popover.js

Примеры

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

Зависимость от плагинов

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

Неавтоматическая функциональность

Для улучшения производительности, дата-интерфейсы Подсказок и Информеров (Tooltip and Popover) неавтоматические, то есть вы должны инициализировать их собственноручно.

Информеры в группах кнопок и группах ввода требуют специальных настроек

При использовании информеров внутри элементов .btn-group или .input-group , вы должны указывать параметры container: ‘body’ (документация ниже), чтобы избежать нежелательных побочных эффектов (например, когда элемент становится шире и/или когда теряется закругленння углов, при вызове информеров).

Информеры на заблокированных элементах нуждаются обертывание

Чтобы добавить подсказку элемента disabled или .disabled , вставьте элемент внутрь

Статические информеры

Доступны четыре варианта информеров: вверху, справа, внизу, и слева.

Информер вверху

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер справа

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер внизу

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Информер слева

Здесь произвольный текст. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Живое демо

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

Многолинейные ссылки

Иногда вы хотите добавить информер к гиперссылке, в который заключается несколько строк. По умолчанию плагина подсказка появляется в центре по горизонтали и вертикали. Добавьте white-space: nowrap; для якорей, чтобы избежать этого.

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

Включите информеры через JavaScript:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием атрибута в data , как в примере: data-animation=»» .

задержка показа и отображения информеров (ms) — не применяется для ручного типа вызова

Если указывается число, задержка применяется и для сокрытия, и для отображения

Такая Структура объекта: delay:

Добавляет popover на конкретный элемент. Пример: container: ‘body’ . Эта опция особенно полезна тем, что позволяет позиционировать popover в потоке документа возле пускового элемента — который будет препятствовать popover от плавающей пускового элемента во время изменении размера окна.

Атрибуты данных для индивидуальных информеров

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

Методы

$().popover(параметры)

Инициализация информеров для набора элементов.

.popover(‘show’)

Отображение информера элемента.

.popover(‘hide’)

Сокрытие информера элемента.

.popover(‘toggle’)

Переключение информера элемента.

.popover(‘destroy’)

Скрытие и удаление информера элемента.

События

Название Тип По умолчанию Описание
animation логический true применяет CSS для плавного перехода к информера
html логический false Вставляет в HTML информер. При значении false, будет использоваться метод jQuery text для вставки содержимого в DOM. Используйте текст, если побоютесь XSS атаки.
placement строковый | функция ‘right’ как позиционировать информер — top | bottom | left | right | auto.
При указании «auto», информер будет динамично переориентироваться. Например, если местоположение указано как «auto left», информер будет отображаться слева, если это возможно, и справа — в противном случае.
selector строковый false если селектор предоставлено, объект подсказки будет делегировано для указанной цели. На практике это используется для добавления информеров при включении динамического содержимого HTML. Просмотрите вот и информативный пример.
trigger строковый ‘click’ как информеры будут привлекаться — click | hover | focus | manual
title строковый | функция » название по умолчанию, если атрибут title не указано
content строковый | функция » значение содержимого по умолчанию, если атрибут data-content не указано
delay числовой | объект
container строковый | false false
Тип События Описание
show.bs.popover Это событие срабатывает во время вызова метода show .
shown.bs.popover Это событие срабатывает, когда информер будет отображаться для пользователя (при этом ожидается завершение навигации CSS).
hide.bs.popover Это событие срабатывает во время вызова метода hide .
hidden.bs.popover Это событие срабатывает, когда будет скрыто информер для пользователя (при этом ожидается завершение навигации CSS).

Уведомления alert.js

Пример уведомлений

Добавьте возможность закрывать все уведомления с данным плагином.

Что же такое?! Вы получили ошибку!

Попробуйте немного изменить и подтвердите снова. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Выполнить это действие Или сделайте это

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

Включите возможность закрытия уведомлений через JavaScript:

Разметка

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

Методы

$().alert()

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

.alert(‘close’)

События

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

Тип События Описание
close.bs.alert Это событие срабатывает во время вызова метода close .
closed.bs.alert Это событие срабатывает, когда уведомление будет закрыто (при этом ожидается завершение навигации CSS).

Кнопки button.js

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

Настройте дополнительно кнопки. Контролируйте состояния кнопок, или создавайте группы кнопок увеличивая количество компонентов, как в панели инструментов.

Состояние загрузки

Добавьте data-loading-text=»Загружается. » , чтобы использовать состояние загрузки на кнопке.

Единичное переключение

Добавьте data-toggle=»button» , чтобы активировать переключение на единичном кнопке.

Галочки

Добавьте data-toggle=»buttons» группы галочек, для их стилизации в виде кнопок.

Переключатели

Добавьте data-toggle=»buttons» группы переключателей, для их стилизации в виде кнопок.

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

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

Разметка

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

Параметры

Методы

$().button(‘toggle’)

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

Автоматическое переключение

Вы можете включать автоматическое переключение кнопок, используя атрибут data-toggle .

$().button(‘loading’)

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

Кросс-браузерная совместимость

$().button(‘reset’)

Сброс состояния кнопки — изменение текста на первоначальный текст.

$().button(string)

Сброс состояния кнопки — изменение текста на любой указанный текст состояния.

Сворачивание collapse.js

Ознакомление

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

Зависимость от плагинов

Сворачивание нуждается подключенного в вашей версии Bootstrap плагина transitions.

Пример свертывания

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

Пункт Группы Свертывания #1

Пункт Группы Свертывания #2

Пункт Группы Свертывания #3

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

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

Плагин свертывания использует несколько классов для обеспечения плавного подъема:

  • .collapse сокрытие содержимого
  • .collapse.in отображение содержимого
  • .collapsing добавляется в начале перехода, и удаляется после его завершения

Эти классы можно найти в component-animations.less .

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

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

Чтобы до группы элементов, которые могут сворачиваться, добавить управления, похоже на аккордеон, добавьте атрибут данных data-parent=»#selector» . Посмотрите демонстрацию (выше), чтобы увидеть это в действии.

Через JavaScript

Ручное включение с:

Параметры

параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку названия параметра data , как в примере: data-parent=»» .

Название Тип По умолчанию Описание
parent selector false Если в качестве параметра передается selector, то все элементы под указанным родительским селектором будут закрыты, в то время как сам пункт с этим селектором — откроется (похоже на традиционное поведение акордиона; существует зависимость от класса panel )
toggle логический true При вызове переключает складной элемент

Методы

.collapse(параметры)


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

.collapse(‘toggle’)

Переключает складной элемент, чтобы его отобразить или скрыть.

.collapse(‘show’)

Отражает складной элемент.

.collapse(‘hide’)

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

События

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

Тип События Описание
show.bs.collapse Это событие срабатывает во время вызова метода show .
shown.bs.collapse Это событие срабатывает, когда этот элемент отображается пользователю (при этом ожидается завершение навигации CSS).
hide.bs.collapse Это событие срабатывает во время вызова метода hide .
hidden.bs.collapse Это событие срабатывает, когда развернутый элемент защищен от пользователя (при этом ожидается завершение навигации CSS).

Примеры

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

Анимация переходов не поддерживается в Internet Explorer 8 и 9

Bootstrap для этой анимации использует исключительно CSS3, но Internet Explorer 8 и 9 не поддерживают необходимых свойств CSS. Таким образом, в этих браузерах нет плавных переходов и анимации. Мы сознательно решили не включать основанных на jQuery fallbacks для переходов.

Дополнительная подпись

Добавлять подпись в ваших слайдов становится легким делом благодаря элементу .carousel-caption внутри любых .item . Это место почти для любого дополнительного HTML, причем содержимое будет автоматически выровнен и форматовано.

Ярлык первого слайда

Здесь произвольный текст. Nulla vitae elit libero, a pharetra augue mollis interdum.

Ярлык второго слайда

Здесь произвольный текст. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ярлык третьего слайда

Здесь произвольный текст. Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Проблема доступности

Компонент карусели в основном не совместим со стандартами доступности. Если вам нужна совместимость, рассмотрите пожалуйста другие параметры для презентации вашего содержания.

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

Несколько каруселей

Карусели требуют использования id на самой внешнем контейнере, .carousel , для ее управления, и функционости. При добавлении нескольких каруселей, или при изменении карусели id , не забудьте обновить соответствующие элементы управления.

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

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

Атрибут data-r используется для обозначения карусели как анимации, в начале загрузки страницы.

Через JavaScript

Вызывайте карусель вручную с:

Параметры

параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data , как в примере: data-interval=»» .

Название Тип По умолчанию Описание
interval числовой 5000 Количество миллисекунд для задержки между автоматическим зацикливанием элементов. Если в качестве параметра передается false, карусель не будет автоматически зацикливаться.
pause строковый «hover» Пауза в прокрутке карусели при наведении курсора (mouseenter) и продолжения прокрутки, когда курсор мыши забирают (mouseleave) с карусели.
wrap логический true Должна карусель зациклено прокручиваться, должна жестко остановиться.

Методы

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

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

Прекращения прокрутки элементов карусели.

Прокрутки карусели до определенного кадра (начиная с 0, подобно массиву).

Перейти к предыдущему элементу.

Перейти к следующему элементу.

События

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

Тип События Описание
slide.bs.carousel Это событие срабатывает во время вызова метода slide .
slid.bs.carousel Это событие срабатывает, когда карусель завершит переход к слайду.

Позиционирование Affix affix.js

Пример

Субнавигация справа является живым примером работы плагина affix.

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

Используйте плагин affix с помощью атрибутов данных, или напишите свой собственный JavaScript. В обоих случаях вы должны предоставить CSS для позиционирования содержимого.

Позиционирование через CSS

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

Вот как работает плагин affix:

  1. Сначала, плагин добавляет .affix-top для обозначения элемента, находящегося выше. На данный момент позиционирования через CSS не требуется.
  2. Прокрутки мимо элемент, который вы хотите закрепить, должно актуализировать закрепления. Это тот момент, когда .affix заменяет .affix-top и устанавливает position: fixed; (обеспеченное кодом Bootstrap CSS).
  3. Если нижнее смещение определено, прокрутки вниз должен заменить .affix , .affix-bottom . Поскольку смещение является необязательным, вам необходимо установить соответствующие CSS. В данном случае, добавьте position: absolute; , когда это необходимо. Плагин использует атрибуты данных или параметры JavaScript для определения позиции элемента.

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

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

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

Через JavaScript

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

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, добавьте приставку с названием параметра data , как в примере: data offset-top=»200″ .

Название Тип По умолчанию Описание
offset числовой | функция | объект 10 Пиксели для сдвига экрана, при исчислении позиции прокрутки. Если предоставлено единичное число, сдвиг будет применяться и вверху, и внизу. Чтобы придать уникальности сдвига снизу и сверху, просто предоставьте такой объект offset: < top: 10 >или такой offset: < top: 10, bottom: 5 >. Используйте функцию, когда вам нужно динамически вычислять сдвиг.

События

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

Bootstrap jquery plugins

I’m trying to learn about Bootstrap. I used to use jquery and I saw you can choose which jquery plugins should be included, for instance: Carousel functionality, Dropdowns, Modals, Togglable tabs, so on.

My question is if I want to include another jquery plugin, let’s say http://jqueryval >

Thanks in advance

1 Answer 1

Bootstrap.js is dependent on jQuery, and is essentially a library of jQuery plugins for various page components. Similar in regard to jQueryUI being a library of plugins also.

The javascript components within bootstrap can be self initialized on page load by using data- attributes specified for each component, or using same initialization concept as the majority of jQuery plugins, creating a configuration object argument of the plugin method and assigning it to a selector.

Using the data- attributes, on page load, bootsrap.js will look for all these in the page so it can create configuration objects used to do the atomatic initialization.

Simplified jQuery parsing of data- in order to intialize each componnent type plugin ( done transparently by bootstrap.js)

Now visualize this being done for all the various component types within the library. As you can see, behind the scenes bootsrap is basically doing what you do when you manually code initialization of a plugin.

You don’t have to set the data- attributes either and are free to use your own code to initialize them by passing in the proper config object.

45 Free Plugins & Components for Extending Bootstrap

Bootstrap is already pre-packaged with a huge selection of useful tools, extensions and components, and is more than enough to kick-start most web design or web application projects. But there will be times when the bundled basic components are not quite enough for what you need. That is where this post comes in. We have assembled 45 extensions, plugins, addons and components that will allow you to extend Bootstrap even further.

Rather than group the extensions and components into relevant categories, as we usually would, we have instead opted to create an A-Z listing, which should make it much easier for you to find the particular addon you are looking for.

Everything you could need is included below, from buttons, breadcrumbs, and calendars, to tree menus, video players, and WYSIWYG editors. If you feel we have missed anything, please do include it in the comments below.

Accessibility

Accessibility Plugin – This plugin adds accessibility mark-up to the default components of Bootstrap. Components include: Alert, Tooltip, Popover, Modal Dialog, Dropdown Menu, Tab Panel, Collapse and Carousel.

Bootstrap-Breadcrumb – A Bootstrap JavaScript plugin that allows you to programmatically manipulate breadcrumb navigation.

Calendar

Bootstrap Modal Carousel – A collection of plugins for displaying a carousel in fullscreen modal window.

Checkbox

prettyCheckable – A jQuery plugin for replacing the default checkboxes and radio inputs.

Color Picker

Simple Color Picker – A very simple and lightweight (200 lines of JavaScript and 100 lines of CSS) jQuery color picker for Bootstrap.

Combobox

Bootstrap Combobox – A combobox plugin that integrates well with Bootstrap.

Contact Form

Bootstrap-Contact – A simple PHP contact form using Bootstrap and the jQuery validation plugin.

jQuery Gridform – A jQuery plugin for creating complex table-based forms with Bootstrap.

Datepicker

Datepicker – A plugin for adding a datepicker field to any element.

Date Range Picker – This date range picker component creates a drop-down from which you can select a range of dates.

ClockPicker – A unique clock-style timepicker for Bootstrap.

Dialog Boxes & Alerts

Bootbox.js – A small JS library that allows you to create programmatic dialog boxes using Bootstrap’s modals.

Bootstrap Prompts – An plugin to replace the alert() , prompt() , confirm() notifications on the browser when using Twitter Bootstrap with modals.

Bootstrap Confirmation – A plugin that replaces popovers with confirmation dialogs.

File Upload

jQuery File Upload – A file upload widget which features multiple file selection, drag & drop, progress bars, validation and preview images.

Form Validation

BootstrapValidator – A jQuery plugin for vaildating forms within Bootstrap.

jqBootstrapValidation – Another jQuery validation framework for Bootstrap forms.

Validator – A simple and user-friendly form validator plugin for Bootstrap.

HTML Tables

Tablecloth.js – Building off Bootstrap, this is is a jQuery plugin that helps you easily style HTML tables.

Navigable Table – A Bootstrap plugin for smooth navigation across table inputs.

Image Gallery – This plugin shows images and videos in the modal dialog of the Bootstrap. It features swipe, mouse & keyboard navigation, transition effects, fullscreen support and on-demand content loading.

In-Place Editing

X-editable – A library that allows you to create editable elements on your Bootstrap page.

Layout Grid


jQDrawBootstrapGrid – A simple jQuery plugin that draws grid columns to a Bootstrap enabled layout.

Magnify

Magnify – A JS plugin for adding a magnifying glass to images on mouseover.

Bootstrap Modal – This plugin extends Bootstrap’s native modals to provide additional functionality (responsive, stackable, Ajax…).

Bootstrap Scroll Modal – A modification of the Bootstrap Modal plugin that allows for unlimited modal height with full page scrolling.

Pagination

bootpag – A jQuery plugin helps you create dynamic pagination with Bootstrap.

Progress Bars

Bootstrap Progressbar – A multi-color progress bar component for Bootstrap.

Ratings

Bootstrap Star Rating – A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Social Buttons

Selects

bselect – A plugin for styling the element in Bootstrap.

Bootstrap Multiselect – A jQuery based plugin for using select inputs with the multiple attributes.

MultiSuggest – A useful plugin that extends the default Bootstrap Typeahead component.

Bootstrap Tags – A jQuery plugin for adding tagging functionality Bootstrap.

Tokenfield – An advanced tagging jQuery plugin for Bootstrap with its focus on keyboard navigation and copy/paste support.

Table of Contents

Tocify – A jQuery plugin that dynamically generates a table of contents. It can be optionally styled with Bootstrap or jQueryUI Themeroller.

Tabcordion.js – A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion.

tabcollapse – A plugin that switches the Bootstrap Tabs component to collapse for small screens.

Tree Menu

EasyTree – A very basic tree-view jQuery plugin for Bootstrap.

BootstrapTreeNav – A Javascript plugin for Bootstrap for creating tree navigation menus.

Video Player

Website Tour

Bootstrap Tour – A quick and easy way to build your product tours with Bootstrap Popovers.

WYSIWYG

bootstrap-wysihtml5 – A Javascript plugin that makes it easy to create simple WYSIWYG editors.

Summernote – A simple WYSIWYG editor for Bootstrap.

Bootstrap

tabler – Free and Open Source Dashboard Template Built on Bootstrap

Tabler is a premium, free and open source dashboard template with responsive and high quality UI. Tabler is built on Bootstrap.

Bootprompt – Alert, Confirm and Dialog Boxes with Bootstrap

Bootprompt is an alert, confirm and flexible dialog boxes for Bootstrap. Bootprompt supports the same range of browsers as Bootstrap 4.

Bootstrap Input Spinner

Input Spinner is a jQuery plugin to create input spinner elements for number input by using Bootstrap 4.

jQuery Bootstrap Year Calendar

A simple and customizable year calendar with jQuery and Bootstrap. It has range picker functionality and multi language support.

BsMultiSelect – Lightweight Multiselect Plugin for Bootstrap 4

BsMultiSelect is a lightweight multiselect plugin for Bootstrap 4. It converts multi-select list into dropdown with checkboxes.

Bootstrap Session Timeout

Session timeout and keep-alive control with a nice Bootstrap warning dialog.

After a set amount of idle time, a Bootstrap warning dialog is shown to the user with the option to either log out, or stay connected.

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Dropdown Tree is a dynamic dropdown menu, based on Bootstrap and jQuery with click handlers, data handlers. You can select single or multi items, and can bind remote data with ajax request.

ax5ui-menu – jQuery Context Menu

ax5ui-menu is a simple context menu with jQuery. It can easily and powerfully use in subMenu of menuBar or ContextMenu.

File Upload with Preview

A simple file-upload utility that shows a preview of the uploaded image. Written in pure JavaScript. No dependencies. Works well with Bootstrap 4 or without a framework.

Yamm – MegaMenu for Bootstrap 3

Yamm is a lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 3.

This is Bootstrap Carousel slider with touch enables dragging slide with beautiful text animation. You can use All text animation from animate.css. Automatically drag the slider left right easily.

jQuery Smart Wizard – jQuery Step Wizard Plugin with Bootstrap Support

Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc.

jQuery Tree Plugin with Bootstrap and Material Design

jQuery Tree plugin allows you to create tree structure using Bootstrap or Material Design styles. Free open source plugin distributed under MIT License.

Bootstrap File Input – Standardize File Input Button for All Browsers

Bootstrap File Input plugin standardizes the file input field to look like a Bootstrap button in all browsers.

Подключение фреймворка Bootstrap к сайту

На этом уроке узнаем, как скачать и подключить фреймворк Bootstrap (версию 3 или 4) к сайту.

Набор инструментов для изучения Bootstrap

Минимальный набор инструментов (программ) для создания веб-проектов на фреймворке Bootstrap:

  • текстовый редактор для работы с кодом («Блокнот», «Brackets», «Notepad++» или др.);
  • браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.).

Загрузка фреймворка Bootstrap

Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами. Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации.

Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье.

Наиболее просто выполнить загрузку – это воспользоваться ссылкой. На сайте Bootstrap присутствуют 2 ссылки.

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

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

Распаковка архива Bootstrap

После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.

Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):

В каталоге css находятся стили фреймворка Bootstrap, а в js — плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).

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

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

Кроме этих файлов, в данный архив ещё входит иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff ).

Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.

Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3. Основное его отличие в том, что он не содержит шрифт «Glyphicons». Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome, Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией.

Кроме этого архив Bootstrap 4 содержит ещё файлы bootstrap-grid.css и bootstrap-reboot.css . Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.

Первый файл ( bootstrap-grid.css ) содержит сетку Bootstrap, а второй ( bootstrap-reboot.css ) — нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

Подключение Bootstrap к HTML странице

Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:

  1. Bootstrap CSS ( bootstrap.min.css );
  2. Последней версии библиотеки jQuery (необходима для работы JS плагинов Bootstrap);
  3. Bootstrap JavaScript ( bootstrap.min.js ).

Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (

Javascript плагины

Bootstrap поставляется с 13 настраиваемыми плагинами jQuery для ваших проектов.

  • Обзор
  • Transitions
  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse
  • Carousel
  • Typeahead
  • Affix

JavaScript и Bootstrap

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

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

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

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

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

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

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

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

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

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


Эвенты

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

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

Transitions bootstrap-transition.js

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

Создает простой эффект перехода, bootstrap-transition.js примененим к всплывающим окнам или сообщениям. Данный плагин включен по умолчанию для анимации в других плагинах.

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

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

Modals bootstrap-modal.js

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

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

Пример

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

Заголовок

Тело и текст окна…

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

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

Заголовок

Текст в теле

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

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

При наведении на эту кнопку должен появиться всплывающий контент.

Всплывающая подсказка (Tooltips)

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

Контент превышающий высоту всплывающего окна

Мы выставили фиксированную высоту max-height для .modal-body . При превышении высоты всплывающего окна контентом появляется скроллбар, это видно на примере текста «lorem ipsum» ниже.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

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

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

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

Через JavaScript

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

Опции

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

Исли указан url — jQuery’s подгрузит его через метод load и вставит ответ в элемент с классом .modal-body . При использовании data api, Вы можете указать url в теге href см. пример ниже:

Методы

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

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

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

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

События

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

Имя Тип Значение по умолчанию Описание
backdrop boolean true Включает элемент modal-backdrop. Опционально, укажите static для backdrop (задний темный фон) который не вызовет закрытие модального окна
keyboard boolean true Закрытие модального через кнопку esc (эскейп)
show boolean true Открытие модального окна после инициализации.
remote path false
Событие Описание
show Это событие срабатывает немедленно после вызова метода show .
shown Это событие срабатывает после отображения всплывающего элемента и окончания анимации.
hide Это событие срабатывает немедленно после вызова метода hide .
hidden Это событие срабатывает после скрытия всплывающего элемента и окончания анимации.

Выпадающие списки

Пример

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

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

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

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

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

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

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

Через JavaScript

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

Опции

Методы

ScrollSpy bootstrap-scrollspy.js

Пример в navbar

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

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

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

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

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

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

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

Via data attributes

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

Через JavaScript

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

Методы

.scrollspy(‘refresh’)

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

Опции

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

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

События

Событие Описание
activate Срабатывает в момент активации элемента навигации плагином scrollspy.

Togglable tabs bootstrap-tab.js

Example tabs

Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.

Raw denim you probably haven’t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney’s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney’s organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven’t heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

You can activate individual tabs in several ways:

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle=»tab» or data-toggle=»pill» on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

Methods

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

Events

Event Description
show This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.

Tooltips bootstrap-tooltip.js

Examples

Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don’t rely on images, use CSS3 for animations, and data-attributes for local title storage.

Hover over the links below to see tooltips:

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

Usage

Trigger the tooltip via JavaScript:

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-animation=»» .

delay showing and hiding the tooltip (ms) — does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay:

Markup


For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().tooltip(options)

Attaches a tooltip handler to an element collection.

.tooltip(‘show’)

Reveals an element’s tooltip.

.tooltip(‘hide’)

Hides an element’s tooltip.

.tooltip(‘toggle’)

Toggles an element’s tooltip.

.tooltip(‘destroy’)

Hides and destroys an element’s tooltip.

Popovers bootstrap-popover.js

Examples

Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.

Static popover

Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

No markup shown as popovers are generated from JavaScript and content within a data attribute.

Live demo

Usage

Enable popovers via JavaScript:

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-animation=»» .

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the tooltip. If false, jquery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement string|function ‘top’ how to position the tooltip — top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function » default title value if `title` tag isn’t present
trigger string ‘hover’ how tooltip is triggered — click | hover | focus | manual
delay number | object

delay showing and hiding the popover (ms) — does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay:

Markup

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover(‘show’)

Reveals an elements popover.

.popover(‘hide’)

Hides an elements popover.

.popover(‘toggle’)

Toggles an elements popover.

.popover(‘destroy’)

Hides and destroys an element’s popover.

Alert messages bootstrap-alert.js

Example alerts

Add dismiss functionality to all alert messages with this plugin.

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Usage

Enable dismissal of an alert via JavaScript:

Markup

Just add data-dismiss=»alert» to your close button to automatically give an alert close functionality.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert(‘close’)

Closes an alert.

Events

Bootstrap’s alert class exposes a few events for hooking into alert functionality.

Name type default description
animation boolean true apply a css fade transition to the tooltip
html boolean true Insert html into the popover. If false, jquery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement string|function ‘right’ how to position the popover — top | bottom | left | right
selector string false if a selector is provided, tooltip objects will be delegated to the specified targets
trigger string ‘click’ how popover is triggered — click | hover | focus | manual
title string | function » default title value if `title` attribute isn’t present
content string | function » default content value if `data-content` attribute isn’t present
delay number | object
Event Description
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed (will wait for css transitions to complete).

Buttons bootstrap-button.js

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text=»Loading. » to use a loading state on a button.

Single toggle

Add data-toggle=»button» to activate toggling on a single button.

Checkbox

Add data-toggle=»buttons-checkbox» for checkbox style toggling on btn-group.

Radio

Add data-toggle=»buttons-radio» for radio style toggling on btn-group.

Usage

Enable buttons via JavaScript:

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

Methods

$().button(‘toggle’)

Toggles push state. Gives the button the appearance that it has been activated.

$().button(‘loading’)

Sets button state to loading — disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text .

$().button(‘reset’)

Resets button state — swaps text to original text.

$().button(string)

Resets button state — swaps text to any data defined text state.

Collapse bootstrap-collapse.js

About

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

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

Пример

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

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

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

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

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

Для создания эффекта аккордиона, добавьте атрибут data-parent=»#selector» . Смотрите демо выше для демонстрации.

Через JavaScript

Опции

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

Имя Тип Значение по умолчанию Описание
parent selector false Если указан селектор — то при открытии вкладки все остальные вкладки в пределах родительского будут срыты. (эффект аккордиона)
toggle boolean true Включает складной элемент при вызове

Методы

.collapse(options)

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

.collapse(‘toggle’)

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

.collapse(‘show’)

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

.collapse(‘hide’)

События

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

Событие Описание
show Срабатывает немедленно при вызове метода show .
shown Срабатывает немедленно после показа элемента и окончания анимации.
hide Срабатывает немедленно при вызове метода hide .
hidden Срабатывает немедленно после скрытия элемента и окончания анимации.

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

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

JavaScript для Bootstrap

Используйте компоненты Bootstrap с 13-ю обычными плагинами jQuery.

  • Обзор
  • Переходы
  • Модальные элементы

  • Выпадающие элементы
  • Слежение за перемещением по странице
  • Вкладки
  • Всплывающие подсказки
  • Всплывающие информационные блоки
  • Сообщения
  • Кнопки
  • Сворачивание
  • Элемент «Карусель»
  • Опережающий ввод с клавиатуры
  • Аффикс

JavaScript в Bootstrap

Индивидуальный или компилированный

Если вы загрузили последнюю версию Bootstrap, оба файла bootstrap.js и bootstrap.min.js содержат все плагины, перечисленные на странице.

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

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

Это говорит о том, что в некоторых ситуациях желательно выключить полную функциональность. По этой причине мы также предоставляем возможность отключить атрибут данных API путем отсоединения всех событий`’data-api’`. Это выглядит подобным образом:

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

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

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

  1. $ ( «.btn.danger» ). button ( «toggle» ). addClass ( «fat» )

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

  1. $ ( «#myModal» ). modal () // инициализированный по умолчанию
  2. $ ( «#myModal» ). modal (< keyboard : false >) // инициализированный без клавиатуры
  3. $ ( «#myModal» ). modal ( ‘show’ ) // инициализированный, и немедленно запускает показ

В каждом плагине можно увидеть конструктор необработанных данных. Это вы найдете в свойствах конструктора. $.fn.popover.Constructor . Если вы хотите вызвать какой-либо определенный плагин, извлеките его прямо из элемента: $(‘[rel=popover]’).data(‘popover’) .

События

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

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

  1. $ ( ‘#myModal’ ). on ( ‘show’ , функция ( e ) <
  2. if (! данные ) return e . Отменить функции по умолчанию () // Отменить показ
  3. >)

Переходы bootstrap-transition.js

О переходах

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

Варианты использования

Немного примеров плагина перехода:

  • Скольжение или затенение модальных элементов
  • Затенение вкладок
  • Затенение сообщений
  • Скольжение элементов «Карусели»

Модальные элементы bootstrap-modal.js

Примеры

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

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

Модальный элемент отображается с заголовком, телом, и набором действий в нижнем колонтитуле.

Заголовок модального элемента

Некое изящное тело…

Заголовок модального элемента

Некое изящное тело……

Демонстрация

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

Заголовки модальных элементов

Текст в модальном элементе

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.

Информационный блок

Эта кнопка должна запустить информационный блок при наведении курсора.

Всплывающие подсказки в модальных элементах.

Эта ссылка и та ссылка должны показывать всплывающую подсказку при наведении курсора..

При вводе слишком большого фрагмента текста появляется полоса прокрутки.

Мы установили максимальную высоту в .modal-body . Текст, который мы добавили, оказался слишком большим. lorem ipsum text we’ve included.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

id = «myModalLabel» > Заголовок модального элемента

Некое изящное тело…

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

Как атрибут данных

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

  1. type = «button» переключение данных = «modal» data-target = «#myModal» > Запустить модальный элемент

С помощью JavaScript

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

Опции

Опции могут быть заданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, присоедините название опции к data- , как в data-backdrop=»» .

Название Тип По умолчанию Описание
фон boolean true Включает элемент modal-backdrop. Кроме того, указывает на статичность отмены закрытия окна при клике на задний фон.
клавиатура boolean true Выбирает модальный элемент посредством нажатой клавиши «escape»
показ boolean true Показывает инициализируемый модальный элемент.
удаленный path false Если поддерживается удаленный URL, содержимое загружается с помощью элемента jQuery загрузки и вставляется в .modal-body . Если вы используете api, вы также можете использовать тег href для указания удаленного источника. Ниже показан пример:

Методы

Активирует содержимое как модальный элемент. Допускает применение дополнительной опции object .

Позволяет переключать модальный элемент вручную.

Позволяет открыть модальный элемент вручную.

Позволяет скрыть модальный элемент вручную.

События

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

Событие Описание
show Это событие срабатывает немедленно после вызова метода show .
shown Это событие срабатывает после отображения всплывающего элемента и окончания анимации.
hide Это событие срабатывает немедленно после вызова метода hide .
hidden Это событие срабатывает после скрытия всплывающего элемента и окончания анимации.
  1. $ ( ‘#myModal’ ). on ( ‘hidden’ , функция () <
  2. // Сделайте что-нибудь…
  3. >)

Выпадающие списки меню bootstrap-dropdown.js

Примеры

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

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

Во вкладках

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

С помощью атрибутов данных

Добавьте data-toggle=»dropdown» к ссылке или кнопке, чтобы переключить выпадающий список.

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

С помощью JavaScript

Вызовите выпадающий список при помощи JavaScript:

  1. $ ( ‘.dropdown-toggle’ ). Выпадающий список ()

Опции

Методы

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

Слежение за перемещением по странице bootstrap-scrollspy.js

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

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

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney’s vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney’s quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

In incididunt echo park, officia deserunt mcsweeney’s proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven’t heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney’s photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven’t heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven’t heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

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

С помощью атрибутов данных

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

    data-spy = «scroll» data-target = «.navbar» > …

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Создаем красивые HTML таблицы (часть 2)

Здравствуйте, продолжаем изучать лучшие скрипты и коды, которые позволят нам создать красивые HTML таблицы.
Скачать исходники для статьи можно ниже

11. Jquery плагин jExcel

jExcel-это легкий jQuery плагин, который позволяет вставлять на веб-страничку таблицы, совместимые с Excel.
Плагин помогает также создавать таблицы, похожие на Excel, позволяя редактировать данные таблицы: перемещать, копировать, вставлять и др.

12. jQuery плагин DataTables

Супер гибкий jQuery плагин для создания таблиц.
Позволяет добавлять дополнительные элементы управления к любой HTML-таблице. Можно добавить пагинацию, функцию поиска, есть темы оформления и т.д.
Кроме того, он предоставляет большое количество расширений для добавления ещё большего функционала к таблице.

13. jQuery плагин Bootgrid

jQuery Bootgrid представляет собой интуитивно понятный плагин для создания таблиц.
Он предоставляет такие функции, как поиск, разбиение на страницы, и др.
Так же есть настраиваемые шаблоны.

14. Плагин jQuery-Tabledit

jQuery-Tabledit – это онлайн-редактор для Bootstrap совместимых HTML таблиц, который позволяет пользователям редактировать данные в таблицах.
Вы можете создать кнопки для переключения между обычным режимом и режимом редактирования, кнопки удаление и восстановление, а также настраивать таблицы с помощью CSS.

15. Плагин jsGrid

jsGrid-это легкий jQuery плагин, который помогает создавать и управлять данными таблицы.
Он поддерживает различные операции с данными таблицы, например: фильтрация, разбиение по страницам, сортировка и т.д.
Он также позволяет настраивать внешний вид таблицы.

16. Библиотека Smart-table

Библиотека Smart-table поможет вам преобразовать любую HTML-таблицу в смарт-таблицу, путем добавления следующих функций: поиск, сортировка, разбивка на страницы и т.д.

17. Библиотека HighchartTable

HighchartTable автоматически преобразует HTML-таблиц в графики и диаграммы.

18. Библиотека TableExport

TableExport – это простая библиотека для экспорта HTML-таблицы в CSV, txt или Excel.

19. Плагин Tabulator

Tabulator – это jQuery плагин для создания интерактивных таблиц из HTML-таблиц. Он поддерживает почти все стандартные функции интерактивной таблицы, такие как поиск, сортировка, фильтрация данных, а также предлагает множество других функций:

20. FancyGrid

FancyGrid – это JavaScript-библиотека для рендеринга таблиц с функцией построения диаграмм и графиков, а также обменом данными с сервером. Есть плагины для AngularJS и jQuery.
FancyGrid поддерживает большое количество функции:

21. Библиотека KingTable

KingTable поставляется с большим количеством отличных функций, включая поиск на стороне клиента или сервера, сортировку, фильтрацию и более общие функции. Вы можете настроить внешний вид таблицы, добавляя пользовательские фильтры, а также экспортировать данные в различные форматы, таких как CSV, json и в Excel.

22. Плагин stacktable.js

Этот jQuery плагин позволяет конвертировать любые широкие таблицы в 2 колоночные (типа ключ/значение). Идеально разрешение для показа больших таблиц на малых экранах, например для мобильных устройств. Кроме того, можно складывать строки или столбцы по мере необходимости.

23. Tabella.js

Tabella.js поможет создать вам адаптивные таблицы с фиксированными заголовками и прокручиваемыми данными (есть даже горизонтальная прокрутка).

24. Wordpreds плагин TablePress

TablePress – это фантастический плагин для WordPress, который позволяет Вам создавать и вставлять таблицы в посты, страницы и виджеты, используя шорткод. Есть такие функции, как поиск и сортировка, а также экспорт данных в различные форматы.

25. WordPress плагин Data Tables Generator by Supsystic

Плагин Data Tables Generator by Supsystic помогает в создании и управлении таблицами непосредственно из панели администратора с помощью редактора таблиц frontend.
Вы также можете добовлять диаграммы и графики в таблицы.
Таблицы также можно экспортировать в форматы CSV, Excel или PDF.

26. WordPress плагин Pricing Table by Supsystic

Плагин Pricing Table by Supsystic позволяет создавать таблицы цен без особых усилий. Вы можете выбрать шаблон, отредактировать контент и опубликовать готовую таблицу цен на своём WordPress сайте.
Кроме того, таблицы, созданные с помощью этого плагина, являются адаптивными и отлично выглядять на любых устройствах.

27.Wordpress плагин Magic Liquidizer Responsive Table

Плагин Magic Liquidizer Responsive Table создаёт адаптивные таблицы, которые отлично выглядят даже на очень маленьких экранах. Вы можете вставлять в таблицы изображения, тексты и т.д.

28. Расширение для браузера Google Chrome – Copytables

Copytables – это расширение для Google Chrome, которое позволяет копировать таблицы с веб-страниц. Вы можете выбрать таблицу ( или отдельные ячееки, строк, столбцы) и копировать их непосредственно как форматированный текст с разделителями CSV или HTML, чтобы далее использовать их по мере необходимости.

Цукерберг рекомендует:  Какой mime тип использовать для mp3
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих