Вы наверняка слышали о 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.
Официальный сайт | Проект на Github
Jasny
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
В стандартной поставке Twitter Bootstrap есть встроенная карусель, но она не может показывать фотографии во всплывающем окне, используя lightbox. Вот здесь и поможет Bootstrap Lightbox. Всё что Вам нужно - это добавить HTML код на страницу и Вы получите отличный, резиновый lightbox.
Официальный сайт | Проект на Github
Simple Lightbox
Simple Lightbox - еще один lightbox для Twitter Bootstrap, который еще проще чем Bootstrap Lightbox. Он требует всего лишь добавить data-атрибут к изображению и плагин будет работать!
Bootstrap Image Gallery
Bootstrap Image Gallery - готовая галерея для Twitter Bootstrap. После подключения этой галереи, Вы получите сетку с изображениями, которые открываются в lighbox'е при клике. Так же может работать в полноэкранном режиме.
Официальный сайт | Проект на Github
Диалоги и уведомления
В стандартной поставке Twitter Bootstrap есть отличное всплывающее окно. Все эти плагины позволяют усовершенствовать его.
Bootbox.js
Небольшая javascript библиотека, которая автоматизирует процесс создания диалогов Twitter Bootstrap. Она создаст разметку, разные типы сообщений (ошибка, уведомление, поле ввода и т.д.).
Официальный сайт | Проект на Github
Bootstrap Modal
Bootstrap Modal расширяет стандартные модальные окна Twitter Bootstrap. Он делает их резиновыми и добавляет возможность загрузки контента в них по AJAX.
Еще мне очень понравилась одна мелочь, которую упускают большинство создателей всплывающих окон, в том числе и разработчики Twitter Bootstrap. Попробуйте вызвать окно и покрутить колёсиком мыши. Вы увидите, что крутится страница, находящаяся под этим самым всплывающим окном. И это, я Вам скажу, дико не удобно. А если во всплывающем окне тоже есть прокрутка, вы прокручиваете её колёсиком мыши, когда она доходим до конца, начинает прокручиваться страница. А если нам очень важно сохранить позицию прокрутки страницы после выхода из модального окна? В общем не продуманно. НО! Этот плагин решает эту проблему, и страница, на которой вызвали диалоговое окно, не прокручивается, пока окно активно.
Официальный сайт | Проект на Github
Bootstrap Growl
Bootstrap Growl - jQuery плагин, который позволяет создавать отличные всплывающие уведомления в стиле Twitter Bootstrap. Вы можете настроить их позицию, размер, тип сообщения и т.д.
Bootstrap Notify
Bootstrap Notify - Еще одни jQuery всплывающие уведомления для Twitter Bootstrap. Отличие от Bootstrap Growl заключается в возможности более детальной кастомизации под себя.