Лучшие плагины для Twitter Bootstrap. Часть 1
Вы наверняка слышали о Twitter Bootstrap. Это один из самых популярных в мире CSS фреймворков. Twitter Bootstrap прост в освоении, имеет адаптивный дизайн, несколько встроенных jQuery плагинов, а так же набор иконок. Ну и, конечно, главным плюсом этого фреймворка является расширяемость. Я предлагаю небольшой обзор лучших и полезных плагинов для Twitter Bootstrap, которые должен иметь любой WEB разработчик, использующий этот фреймворк.
Как и следовало ожидать, для фреймворка такого уровня и с такой популярностью, будет много дополнений. Некоторые разработчики объединяют все свои наработки в одну сборку. Несколько таких сборок я и хочу представить.
++++
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.jpgJasny - еще одна коллекция полезных компонентов для Twitter Bootstrap. Здесь включены такие компоненты как:
Typeahead - обычный input, который поддерживает выпадающий AJAX список значений.
Input mask - поле ввода значения по маске.
Row link - делает строку таблицы кликабельной ссылкой.
File Upload - стилизованное под Twitter Bootstrap поле загрузки файла.
И еще много дополнительных компонентов, которые смотрите на официальном сайте Jasny.
Официальный сайт | Проект на Github
Конечно, на сайте можно использовать любую jQuery галерею. Но как насчёт галерей, которые сделаны специально под Twitter Bootstrap? Галереи, которые подключаются так же, как и все javascript компоненты Twitter Bootstrap. Т.е. необходимо просто добавить нужный HTML код на страницу и галерея будет работать.
++++
Bootstrap-Lightbox.jpgВ стандартной поставке Twitter Bootstrap есть встроенная карусель, но она не может показывать фотографии во всплывающем окне, используя lightbox. Вот здесь и поможет Bootstrap Lightbox. Всё что Вам нужно - это добавить HTML код на страницу и Вы получите отличный, резиновый lightbox.
Официальный сайт | Проект на Github
++++
Simple-Lightbox.jpgSimple Lightbox - еще один lightbox для Twitter Bootstrap, который еще проще чем Bootstrap Lightbox. Он требует всего лишь добавить data-атрибут к изображению и плагин будет работать!
Официальный сайт
++++
Bootstrap-Image-Gallery.jpgBootstrap Image Gallery - готовая галерея для Twitter Bootstrap. После подключения этой галереи, Вы получите сетку с изображениями, которые открываются в lighbox'е при клике. Так же может работать в полноэкранном режиме.
Официальный сайт | Проект на Github
В стандартной поставке Twitter Bootstrap есть отличное всплывающее окно. Все эти плагины позволяют усовершенствовать его.
++++
Bootbox.js_.jpgНебольшая javascript библиотека, которая автоматизирует процесс создания диалогов Twitter Bootstrap. Она создаст разметку, разные типы сообщений (ошибка, уведомление, поле ввода и т.д.).
Официальный сайт | Проект на Github
++++
Bootstrap-Modal.jpgBootstrap Modal расширяет стандартные модальные окна Twitter Bootstrap. Он делает их резиновыми и добавляет возможность загрузки контента в них по AJAX.
Еще мне очень понравилась одна мелочь, которую упускают большинство создателей всплывающих окон, в том числе и разработчики Twitter Bootstrap. Попробуйте вызвать окно и покрутить колёсиком мыши. Вы увидите, что крутится страница, находящаяся под этим самым всплывающим окном. И это, я Вам скажу, дико не удобно. А если во всплывающем окне тоже есть прокрутка, вы прокручиваете её колёсиком мыши, когда она доходим до конца, начинает прокручиваться страница. А если нам очень важно сохранить позицию прокрутки страницы после выхода из модального окна? В общем не продуманно. НО! Этот плагин решает эту проблему, и страница, на которой вызвали диалоговое окно, не прокручивается, пока окно активно.
Официальный сайт | Проект на Github
++++
Bootstrap-Growl.jpgBootstrap Growl - jQuery плагин, который позволяет создавать отличные всплывающие уведомления в стиле Twitter Bootstrap. Вы можете настроить их позицию, размер, тип сообщения и т.д.
Демо | Проект на Github
++++
Bootstrap-Notify.jpgBootstrap Notify - Еще одни jQuery всплывающие уведомления для Twitter Bootstrap. Отличие от Bootstrap Growl заключается в возможности более детальной кастомизации под себя.
Официальный сайт | Проект на Github