![](https://habrastorage.org/files/b0e/df7/aea/b0edf7aea47449d8b80fd71f52380abc.png)
Благодаря популярности CSS фреймворка Bootstrap, для него разработали массу различных дополнений. Даже сейчас вы можете использовать Bootstrap практически для любой задачи при разработке и оформлении вебсайта.
Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».
Наборы компонентов
Fuel UX
![1](https://habrastorage.org/getpro/habr/post_images/353/730/1a3/3537301a3d5c65b0a664dc5068d1ab02.png)
Отличный набор дополнительных контролов, которые зачастую не хватает при работе с Bootstrap. В него входят такие модули как деревья, шаблоны, датапикеры, визарды и т. п.
Website
Github
X-editable
![2](https://habrastorage.org/getpro/habr/post_images/ae8/55c/8bb/ae855c8bbd285f5db89933ae665149bb.png)
Думаю, это незаменимый набор компонентов для инлайн-редактирования. Поддерживает различные версии Bootstrap и отлично работает без него (на jQuery).
Website
Github
Jasny
![3](https://habrastorage.org/getpro/habr/post_images/a77/839/568/a77839568d1e11507a3403e2aaa131d8.png)
Небольшой набор дополнительных элементов к Bootstrap. В него включены как боковое меню, функциональные кнопки, маски для инпутов и т. п.
Website
Github
Bootstrap Form Helper
![4](https://habrastorage.org/getpro/habr/post_images/248/3c3/a46/2483c3a46a482084666c0079efe5c760.png)
Еще один интересный набор элементов. В премиум версию входят такие элементы, как инпуты для выбора валют, стран, временных зон, языков и т. п.
Website
Github
Leapstrap
![5](https://habrastorage.org/getpro/habr/post_images/bad/413/8aa/bad4138aa8809ddc60e19e18d4f1b9b2.png)
Набор элементов для поддержки плагина Leapstrap контроллера. Это довольно-таки необычная вещица, поэтому включаю ее в этот список.
Website
Github
Отдельные компоненты
jQuery Bootpag
![6](https://habrastorage.org/getpro/habr/post_images/6d1/ab6/72d/6d1ab672dfa4dee011de3e8728452d56.png)
Дополнительный компонент, которого зачастую не хватает в стандартном комплекте Bootstrap — Pagination. Особенностью является возможность динамической обработки.
Website
Github
Tocify
![7](https://habrastorage.org/getpro/habr/post_images/2f2/d6a/457/2f2d6a457e8173a0671b78605300d20e.png)
Компонент для отслеживания содержания страницы. Очень часто не хватает именно этого компонента для создания современных вебсайтов.
Website
Github
Bootstrap Link Preview
![8](https://habrastorage.org/getpro/habr/post_images/988/1e7/970/9881e79703a12be9854f5ce8167cd936.png)
Небольшой и очень простой в использовании компонент для предпросмотра контента по ссылке (наподобие Facebook-предпросмотра).
Website
Github
Flippant.js
![9](https://habrastorage.org/getpro/habr/post_images/b26/348/8c2/b263488c2645cc0af95d4f5edccf8509.png)
Небольшой скрипт для создания «двусторонних» блоков. Идеально для создания форм, карточек портфолио и т. п.
Website
Github
Bootstrap Tour
![10](https://habrastorage.org/getpro/habr/post_images/08f/ddb/2eb/08fddb2ebdb2ed527d9b11a7f60e73ed.png)
Отличное дополнение к Bootstrap, которое позволяет создавать пошаговый тур для новых посетителей вашего сайта.
http://bootstraptour.com/
https://github.com/sorich87/bootstrap-tour
Bootstro.js
![o](https://habrastorage.org/getpro/habr/post_images/08b/330/70c/08b33070c374cefcb2ded7a3ea05741f.png)
Вариант предыдущего инструмента. Предназначен также для создания пошагового тура для вашего сайта или веб приложения.
Website
GitHub
Yet Another MegaMenu (YAMM)
![j](https://habrastorage.org/getpro/habr/post_images/557/24e/794/55724e794a4b344eff939858b07913f0.png)
Компонент, необходимый практически любому современного сайта. Позволяет создать главное меню навигации практически любой сложности.
Website
GitHub
Dropdown Menus Enhancement
![12](https://habrastorage.org/getpro/habr/post_images/c1b/df1/19d/c1bdf119dea80072c4689db77e985dc5.png)
Дополнение к стандартному меню Bootstrap. Включает такие возможности, как позиционирование меню, вывод в меню радио- и чекбокс-инпутов и многое другое.
Website
Github
Bootstrap Tree View
![gg](https://habrastorage.org/getpro/habr/post_images/8dd/ff5/460/8ddff54608ad826649bd77497277659d.png)
Простое решение для отображения древовидной структуры. Данный компонент поддерживает стандартные Glyph-иконки.
Github
GTreeTable
![ll](https://habrastorage.org/getpro/habr/post_images/51a/0b2/adc/51a0b2adcb7c572ed9570859945525df.png)
Еще одно дополнение, позволяющее создавать древовидную структуру. Отличается обилием функционала: Drag&Drop, редактирование и т. п.
Website
Github
Bootstrap Star Rating
![str](https://habrastorage.org/getpro/habr/post_images/b69/0a0/7c7/b690a07c7a3dcf98d2a2053022830dfb.png)
Компонент для простого создания рейтинга, легко кастомизируется. По опыту могу сказать: очень часто приходится искать подобный компонент.
Website
Github
Gridmanager.js
![;;k](https://habrastorage.org/getpro/habr/post_images/da1/4bc/f6a/da14bcf6a0bf7eaba6e3c00daa72ab57.png)
Редактор контента, основанный на строках и колонках Bootstrap-фреймворка. Пока не нашел, как применить на практике. Выложил больше, как пример реализации.
Website
GitHub
Компоненты Для Форм
Bootstrap Tags
![tags](https://habrastorage.org/getpro/habr/post_images/704/ec6/4b6/704ec64b6b71c16c11d0d88e1aef991e.png)
Компонент для простого создания тегов. Очень прост в использовании и тоже легко кастомизируется. Работает со всеми версиями Bootstrap.
Website
Github
Bootstrap Switch
![v3](https://habrastorage.org/getpro/habr/post_images/5c5/c73/90f/5c5c7390ff5fbff03039c5373226abde.png)
Компонент для создания аккуратных переключателей. Подойдет для любого дизайна сайта, к тому же тут легко настраиваются все параметры: размеры, анимация, цвет и т. п.
Website
Github
Bootstrap Maxlength
![max](https://habrastorage.org/getpro/habr/post_images/127/370/b6d/127370b6dc2fe79e6b327ad1e1b26594.png)
Неплохой «ограничитель» для текстовых полей ввода. Прост в использовании, иногда бывает просто незаменимым дополнением.
Website
Github
Bootstrap Select
![sel](https://habrastorage.org/getpro/habr/post_images/f6c/7c0/dba/f6c7c0dba4a86cbe30845ae0796f8e7c.png)
Очень легкий компонент, позволяющий значительно расширить функционал обычного списка. Пройдите по ссылке ниже, чтобы увидеть все примеры использования.
Website
Github
Chosen
![chos](https://habrastorage.org/getpro/habr/post_images/820/e6d/88f/820e6d88f9d8e82bfbdd0ecc825a4eed.png)
Очень простой скрипт для значительного улучшения поля со списком. Поддерживает множество опций и вариаций для использования этого поля.
Website
Github
Bootstrap Multiselect
![mult](https://habrastorage.org/getpro/habr/post_images/727/5ea/be6/7275eabe669c728295dbb9326eef21fb.png)
Еще один вариант расширения поля списка. Данный скрипт обрабатывает события при открытии / закрытии / выборе и т. п. Никогда ведь не знаешь, что попросит клиент…
Website
Github
Bootstrap Validator
![valodator](https://habrastorage.org/getpro/habr/post_images/d9a/001/440/d9a001440809108d391a8bc0b8af43a6.png)
Незаменимый компонент при работе с формами в Bootstrap-фреймворке. Экономит очень много времени: кроме проверки, содержит уже готовое оформление полей формы.
Website
Github
jqBootstrapValidation
![jqvalidator](https://habrastorage.org/getpro/habr/post_images/b67/d8e/0c0/b67d8e0c05d93b8ae7e1ffc43160152f.png)
Еще один компонент (вариант) для валидации форм на Bootstrap-фреймворке. Содержит большое количество опций для создания проверки введенных пользователем данных.
Website
Github
jQuery File Upload
![jqfail](https://habrastorage.org/getpro/habr/post_images/ee9/c21/733/ee9c21733a38b6959fddbf731beedd40.png)
Неплохой компонент, позволяющий значительно сэкономить время, если необходимо добавить поле для загрузки файлов. Поддерживает множество серверных платформ.
Websit
Github
Bootstrap Tag Autocomplete
![btag](https://habrastorage.org/getpro/habr/post_images/f92/df0/fc9/f92df0fc966f3630e9d60d09d73a8351.png)
Компонент для простого создания автодополнения. Очень простой в использовании и легкий (по весу) скрипт. Думаю, заслуживает добавления в копилку инструментов.
Website
Github
Tag Manager
![tagman](https://habrastorage.org/getpro/habr/post_images/f6f/9e8/6d6/f6f9e86d677eb0305951a4862a93e737.png)
Готовый скрипт (компонент) для создания тегов. Очень много опций и, соответственно, возможностей использования.
Website
Github
Typeahead
![type](https://habrastorage.org/getpro/habr/post_images/54e/183/74a/54e18374a0a7c5cae1501c99509d91a5.png)
Компонент для авто дополнения с текстовом поле. Используются два скрипта (для поиска и отображения), которые можно использовать и вместе, и отдельно.
Website
Github
Slider for Bootstrap
![slider](https://habrastorage.org/getpro/habr/post_images/3ff/04d/48e/3ff04d48ea7518c73e541409b18da9a4.png)
Еще один элемент, помогающий пользователю сэкономить кучу времени. Вместо ввода данных вручную — просто перетянуть слайдер. Много опций, полностью стилизируется.
Website
Tokenfield for Bootstrap
![toke](https://habrastorage.org/getpro/habr/post_images/965/c56/098/965c56098b815bb31de5bcf37debd2c5.png)
Компонент для простого создания тегов. Полностью стилизирован, имеет много опций. Поддерживает ввод и с клавиатуры, и из буфера обмена.
Website
Github
Label in Place
![label](https://habrastorage.org/getpro/habr/post_images/533/b7e/e7f/533b7ee7fb2296857b980e68e68e3312.png)
Легкий скрипт для создания необычного эффекта объединения label-элемента с полем ввода. Имеет множество опций. Иногда даже может пригодиться :).
Website
Github
Strength Meter
![meter](https://habrastorage.org/getpro/habr/post_images/3cf/5f9/813/3cf5f9813b7687689d3b013c9524e2ed.png)
Компонент для определения сложности введенного пароля. Простое решение для распространенной проблемы. Включает много опций и готовое оформление.
Website
Github
Bootstrap File Input
![input](https://habrastorage.org/getpro/habr/post_images/ed5/082/000/ed5082000c0864d94cbed3c2c22d429d.png)
Компонент для загрузки файлов. Поддерживает мультизагрузку и предпросмотр иллюстраций. Пройдите по ссылке ниже, чтобы увидеть примеры реализации.
Website
Github
Ladda UI for Bootstrap 3
![ladda](https://habrastorage.org/getpro/habr/post_images/fc6/1c8/642/fc61c86427aa962c5fdb10918a35bfe1.png)
Довольно интересная задумка с использованием индикаторов загрузки прямо на кнопках.
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-фреймворком. Они помогут значительно сэкономить время в том или ином проекте.
Надеюсь, вам понравилась моя коллекция. Если пользуетесь другими дополнениями и хотели бы включить их в этот список, опишите их в комментариях, мне (и, думаю, большинству читателей) они тоже могут оказаться полезны.
![](https://habrastorage.org/files/1dc/860/8a8/1dc8608a858e49009eb291b1f067eef7.jpg)
Дмитрий Кабаков
WordPress Developer