Технологический консалтинг и разработка ПО
109,05
рейтинг
19 мая 2015 в 14:26

Разработка → 50+ лучших дополнений к Bootstrap



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

Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».

Наборы компонентов


Fuel UX


1

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

Website
Github

X-editable


2

Думаю, это незаменимый набор компонентов для инлайн-редактирования. Поддерживает различные версии Bootstrap и отлично работает без него (на jQuery).

Website
Github

Jasny


3

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

Website
Github

Bootstrap Form Helper


4

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

Website
Github

Leapstrap


5

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

Website
Github

Отдельные компоненты


jQuery Bootpag


6

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

Website
Github

Tocify


7

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

Website
Github

Bootstrap Link Preview


8

Небольшой и очень простой в использовании компонент для предпросмотра контента по ссылке (наподобие Facebook-предпросмотра).

Website
Github

Flippant.js


9

Небольшой скрипт для создания «двусторонних» блоков. Идеально для создания форм, карточек портфолио и т. п.

Website
Github

Bootstrap Tour


10

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

http://bootstraptour.com/
https://github.com/sorich87/bootstrap-tour

Bootstro.js


o

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

Website
GitHub

Yet Another MegaMenu (YAMM)


j

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

Website
GitHub

Dropdown Menus Enhancement


12

Дополнение к стандартному меню Bootstrap. Включает такие возможности, как позиционирование меню, вывод в меню радио- и чекбокс-инпутов и многое другое.

Website
Github

Bootstrap Tree View


gg

Простое решение для отображения древовидной структуры. Данный компонент поддерживает стандартные Glyph-иконки.

Github

GTreeTable


ll

Еще одно дополнение, позволяющее создавать древовидную структуру. Отличается обилием функционала: Drag&Drop, редактирование и т. п.

Website
Github

Bootstrap Star Rating


str

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

Website
Github

Gridmanager.js


;;k

Редактор контента, основанный на строках и колонках Bootstrap-фреймворка. Пока не нашел, как применить на практике. Выложил больше, как пример реализации.

Website
GitHub

Компоненты Для Форм


Bootstrap Tags


tags

Компонент для простого создания тегов. Очень прост в использовании и тоже легко кастомизируется. Работает со всеми версиями Bootstrap.

Website
Github

Bootstrap Switch


v3

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

Website
Github

Bootstrap Maxlength


max

Неплохой «ограничитель» для текстовых полей ввода. Прост в использовании, иногда бывает просто незаменимым дополнением.

Website
Github

Bootstrap Select


sel

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

Website
Github

Chosen


chos
Очень простой скрипт для значительного улучшения поля со списком. Поддерживает множество опций и вариаций для использования этого поля.

Website
Github

Bootstrap Multiselect


mult
Еще один вариант расширения поля списка. Данный скрипт обрабатывает события при открытии / закрытии / выборе и т. п. Никогда ведь не знаешь, что попросит клиент…

Website
Github

Bootstrap Validator


valodator

Незаменимый компонент при работе с формами в Bootstrap-фреймворке. Экономит очень много времени: кроме проверки, содержит уже готовое оформление полей формы.

Website
Github

jqBootstrapValidation


jqvalidator

Еще один компонент (вариант) для валидации форм на Bootstrap-фреймворке. Содержит большое количество опций для создания проверки введенных пользователем данных.

Website
Github

jQuery File Upload


jqfail

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

Websit
Github

Bootstrap Tag Autocomplete


btag

Компонент для простого создания автодополнения. Очень простой в использовании и легкий (по весу) скрипт. Думаю, заслуживает добавления в копилку инструментов.

Website
Github

Tag Manager


tagman

Готовый скрипт (компонент) для создания тегов. Очень много опций и, соответственно, возможностей использования.

Website
Github

Typeahead


type

Компонент для авто дополнения с текстовом поле. Используются два скрипта (для поиска и отображения), которые можно использовать и вместе, и отдельно.

Website
Github

Slider for Bootstrap


slider

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

Website

Tokenfield for Bootstrap


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

Website
Github

Label in Place


label

Легкий скрипт для создания необычного эффекта объединения label-элемента с полем ввода. Имеет множество опций. Иногда даже может пригодиться :).

Website
Github

Strength Meter


meter
Компонент для определения сложности введенного пароля. Простое решение для распространенной проблемы. Включает много опций и готовое оформление.

Website
Github

Bootstrap File Input


input

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

Website
Github

Ladda UI for Bootstrap 3


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

Website
Github

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

Date & Time Pickers


Daterangepicker

Website
Github

Bootstrap Timepicker

Website
Github

Clockface

Website
Github

Bootstrap Datetime

Website
Github

Bic_Calendar

Website
Github

Сolor Pickers


Pick a Color

Website
Github

Colorpicker for Bootstrap

Website
Github

Color Palette

Website
Github

Editors


Bootstrap Markdown

Website
Github

Bootstrap WYSIHTML5

Website
Github

Summernote

Website
Github

Tables


Tablecloth

Website
Github

Bootstrap Table

Website
Github

Media & Galleries


Bootstrap Lightbox

Website
Github

Bootstrap Image Gallery

Website
Github

Bootstrap Icon Picker

Website
Github

Dialogs & Notifications


Bootbox.js

Website
Github

Bootstrap Modal

Website
Github

Bootstrap Notify

Website
Github

Bootstrap Confirmation

Website
Github

Bootstrap Growl

Website
Github

На данный момент эти дополнения мне показались наиболее полезными в работе с Bootstrap-фреймворком. Они помогут значительно сэкономить время в том или ином проекте.

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


Дмитрий Кабаков
WordPress Developer
Автор: @DataArt
DataArt
рейтинг 109,05
Технологический консалтинг и разработка ПО

Комментарии (25)

  • +1
    Спасибо. Есть действительно интересные дополнения.
  • +3
    Надеюсь, вам понравилась моя коллекция

    Туу и надеяться нечего :) Огромное тебе спасибо человек за эту подборку. Однозначно в закладки. Очень много интересных плагинов. Отдельное спасибо за Gridmanager. Вот давно искал нечто подобное. Выглядит достаточно заманчиво. Если еще и работать гладко будет, цены ему нет.
    • НЛО прилетело и опубликовало эту надпись здесь
  • +6
    Рядом с Chosen можно указать и select2.github.io
    • +1
      И selectize.js (http://brianreavis.github.io/selectize.js/)

      Могу также порекомендовать bootflat (http://bootflat.github.io/)
  • +2
    Я бы ещё добавил TouchSpin — www.virtuosoft.eu/code/bootstrap-touchspingithub.com/istvan-ujjmeszaros/bootstrap-touchspin — наверное один из лучших инструментов этого класса (и для мобильных и для десктопов, понимает + и -, валидирует данные, позволяет выводить префиксы и постфиксы).

    Но если так перечислять инструменты, то их будет бесконечно много.
  • +1
    Отличная подборка!
    Может, ещё добавить ссылки на шаблоны (bootswatch.com, wrapbootstrap.com и пр)?
  • –8
    Хабрахабр — не место для копипастеров. Размещение полностью скопированного контента с других сайтов запрещено — даже при использовании гиперссылки на источник. Мы за авторские материалы.

    www.dataart.ru/blog/2015/02/50-luchshih-dopolnenij-k-bootstrap
    • +12
      Использовать материалы из собственного корпоративного блога разрешается.
      Решили поделиться хорошим, по нашему мнению, материалом с более широкой аудиторией.
      • +1
        я бы ваш блог вряд ли бы нашел, а на Хабре подобная подборка вполне уместна. Bootstrap действительно есть чем дополнять, с другой стороны правильно, что из него не делают комбайн по принципу «включим в сборку, все, что можно включить».

        Спасибо за интересные решения
    • +1
      В корпоративный блог можно мусорить чем угодно :) Ну почти :)

      ps; за подборку спасибо…
    • +2
      Вот мне интересно. Вы на этот блог подписаны или специально гуглили откуда копипаст?
  • 0
    Ох, не хотел я раньше времени представлять наш велосипед, но раз пошла такая пьянка: UCA JS UI
    Это пока версия 0.0.0+! Как только доберёмся хотя бы до 0.1.0 – сделаю обзор.
    Из дополнительных плюсов: возможность подключить Angular (пример есть в ComboBox’е).
    • +1
      Для Angular уже есть:

      1) mgcrea.github.io/angular-strap
      2) angular-ui.github.io/bootstrap
      • +1
        Angular-UI смотрел. Понял, что нам нужно нечто другое: нужны jQuery plugin'ы с возможность быстро и легко привязать к ним модель, а не полностью строит элементы на Angular’е. Так и родился велосипед. За наводку на Angular-Strap – спасибо!
        • 0
          Мы сейчас используем Angular-Strap как раз. Он на какой-то функциональности при тестах лучше себя показал. Но сложностей с ним тоже хватает. Возможно будем переходить на Angular-UI.

          Использовать jQuery pluginы… Это не круто, конечно. Хотя с расширениями на Angular беда, да.
          • 0
            Использовать jQuery pluginы… Это не круто, конечно. Хотя с расширениями на Angular беда, да.

            Вот тут немного не понял!
            • 0
              Зачем вам jQuery pluginы, если вы используете Angular?
              • +1
                Ну, это что-то типа битвы парадигм. Есть коллега, который настаивал, что Angular – это крайне круто и все надо делать на нем. Однако, когда попробовали и столкнулись с кучей проблем с рекурсией шаблонов, поняли, что кроме модели в Angular нам больше ничего и не нужно пока.
                Плюс, есть разработчики, которые Angular не приемлют ни в каком виде. В таком случае, они спокойно смогут использовать framework и без него!
                • 0
                  Вот и я о том же, что в Angular сталкиваешься с некоторыми неочевидностями. Порой эти неочевидности накапливаются с каждым добавляемым публичным модулем. Но все же jQuery там кажется лишней, так как прямое манипулирование DOM может создать еще больше неочевидностей.
  • 0
    Было не туда!
  • 0
    Спасибо. Есть интересные вкусности о которых я раньше не слышал.
  • 0
    Спасибо за gridmanager. Три месяца назад просто замучился настраивать форму с 50-ю полями для ввода (внутрикорпоративная форма резюме). Тогда так и не смог найти внятного инструмента, теперь есть. А впереди интеграция с 1С…
  • 0
    Для использования в формах symfony2 есть классный бандл: bootstrap.braincrafted.com
  • +1
    Восхительно. Отдельно спасибо за Bootstrap Markdown и Tocify, уйдут в работу на следующей неделе.

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

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

Самое читаемое Разработка