—»     —»   Расширяем Twitter Bootstrap при помощи Javascript-плагинов
  Раздел: Java-Скрипты   Комментариев: 1  

Расширяем Twitter Bootstrap при помощи Javascript-плагинов



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

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

Twitter Bootstrap предоставляется со многими javascript-плагинами. Тем не менее, вы обнаружите, что большинство наиболее важных плагинов отсутствуют, как например datepicker. Сегодня мы решили собрать для вас более 10 javascript-плагинов для расширения функционала Twitter Bootstrap. Благодаря сообществу веб-разработки, у нас сегодня есть множество мощных и удобных js-плагинов, разработанных специально для Twitter Bootstrap.

Также следует отметить, что если вам не нравится стандартная тема оформления Twitter Bootstrap, вы можете перейти к этой записи, где рассказывается о полезностях для Twitter Bootstrap.

01. Fuel UX

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Fuel UX дополняет Twitter Bootstrap различными миниатюрными javascript-контроллерами. В этот набор включены различные удобные плагины вроде ComboBox, Datagrid, Pillbox, Search и Spinner.

02. BootMetro

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

BootMetro представляет собой нечто вроде отличной переработки Twitter Bootstrap. Он превращает Bootstrap в инструмент с пользовательским интерфейсом в стиле Microsoft Metro. К тому же, он предлагается с различными javascript-плагинами для поддержки функций Metro.

03. WYSIHTML5

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Красивый WYSIWYG-редактор HTML5. Здесь имеются довольно расширенные настройки и события, которые позволяют вам адаптировать инструмент под собственные нужды.

04. jqBootstrap Validation

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

В Bootstrap нам особенно нравится стандартный стиль формы. Здесь даже имеются стили валидации, а вам потребуется лишь javascript-плагин для того, чтобы все заработало.

05. ColorPicker

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

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

06. DatePicker

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

От разработчика color picker, Datepicker позволяет вам добавлять элемент выбора даты. Он также может быть использован в виде компонента, и поддерживает формат нескольких дат.

07. TimePicker

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Вы наверняка знакомы с элементом выбора даты, и вам определенно правится элемент выбора времени. Этот плагин позволяет вам выбирать время для текстового поля при помощи мыши или стрелок.

08. DateRange Picker

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Если вы используете Google Analytics, то этот javascript-плагин точно покажется вам знакомым. Отличный элемент выбора даты для Twitter Bootstrap. Плагин DateRange отлично подходит для генерации отчетов или сбора данных.

09. Bootbox JS

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Отличное расширение для Bootstrap, которое позволят вам создавать программируемые диалоговые окна при помощи существующих модальных окон в Twitter Boostrap. Несмотря на размер, bootbox представляет собой довольно мощное и гибкое диалоговое окно на javascript.

10. jQuery UI Bootstrap

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

На самом деле, это не Twitter Boostrap. Нельзя считать этот инструмент Twitter Boostrap только потому, что он при помощи jQuery оформлен как Boostrap. Он выглядит точно так же и, что более важно, если вам захочется интегрировать bootstrap и jQuery UI, этот шаблон позволит вам придать им более сплоченный вид. Таким образом, у вас в руках будет вся мощь javascript-плагинов при использовании jQuery UI.

11. jQuery File Upload

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Ajax-загрузчик файлов на HTML5. Честно говоря, ранее мы уже знакомились с этим инструментом, и его не так и просто внедрить в проект. Дабы быть честным, мы пытались настроить его различными способами. Но стоит отметить, что здесь представлена документация со многими примерами.

12. DataTables

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Эта сетка данных, в принципе, очень схожа с той, что мы видели в Fuel UX. Она добавляет таблице данных возможность сортировки, постраничного вывода, поиска и многих других удобных свойств.

13. Bootsnipp

Расширяем Twitter Bootstrap при помощи Javascript-плагинов

Bootsnipp сложно назвать обычным javascript-плагином. Он больше представляет собой набор сниппетов, которые вы можете копировать и вставлять. Здесь имеется коллекция основных элементов пользовательского интерфейса вроде экрана авторизации, мобильных окон, таблиц, навигационной панели и так далее. Если вас не смущает дизайн, вы можете хватать код и сразу же его использовать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, ajax, HTML 5, WYSIWYG
Опубликовал Design FactoRy   Прочитано (раз): 17404   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 декабря 2012 @ 17:53
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
не совсем понял что это за хрень! админ, можешь в 2-х словах объяснить, что за бутстрап? ;)

:) Всё, догнал! А классно!


--------------------
я дизайнер - http://imdesigner.ru
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930