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 79,85
    Технологический консалтинг и разработка ПО
    Поделиться публикацией
    Комментарии 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
                        • +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 порадовал, много чего хотел использовать, но самому делать было некогда.

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

                                Самое читаемое