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

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

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

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

Fuel UX

Fuel-UX.jpg

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

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

Официальный сайт | Проект на Github

Jasny

Jasny.jpg

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

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

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

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

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

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

Официальный сайт | Проект на Github

Галереи

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

Bootstrap Lightbox

Bootstrap-Lightbox.jpg

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

Официальный сайт | Проект на Github

Simple Lightbox

Simple-Lightbox.jpg

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

Официальный сайт

Bootstrap Image Gallery

Bootstrap-Image-Gallery.jpg

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

Официальный сайт | Проект на Github

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

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

Bootbox.js

Bootbox.js_.jpg

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

Официальный сайт | Проект на Github

Bootstrap Modal

Bootstrap-Modal.jpg

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

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

Официальный сайт | Проект на Github

Bootstrap Growl

Bootstrap-Growl.jpg

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

Демо | Проект на Github

Bootstrap Notify

Bootstrap-Notify.jpg

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

Официальный сайт | Проект на Github