Bootstrap 3 - Установка и сборка платформы

На этом уроке мы рассмотрим различные варианты, с помощью которых Вы можете установить платформу Twitter Bootstrap 3 в свой веб-проект. Кроме этого познакомимся с процессом сборки платформы Twitter Bootstrap 3 с помощью Grunt.

Устанавливать и управлять платформой Twitter Bootstrap 3 можно различными способами:

Bootstrap - способы установки

  • вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. Данный способ является наиболее трудоёмким, так как Вам придётся выполнять все действия связанные с установкой и последующим обновлением платформы вручную.
  • с помощью указания файлов, находящихся на серверах CDN. Данный способ имеет некоторые преимущества, перед предыдущим способом, а именно:
    • уменьшает нагрузку на Ваш сервер, т.к. загрузка файлов происходит с CDN;
    • увеличивает скорость загрузки веб-страницы, т.к. необходимые файлы берутся из кэша браузера. Это происходит только в том случае, если до этого (т.е. на других сайтах) эти файлы загружались аналогичным образом, т.е. из этого же CDN.
    • <!-- Последняя версия компилированного и минимизированного файла CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <!-- Тема (не обязательна) -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
      <!-- ... -->
      <!-- Последняя версия компилированного и минимизированного файла JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      
  • с помощью Bower (http://bower.io);
  • с помощью npm (http://www.npmjs.com).

Bower - менеджер пакетов, который может использоваться для установки платформы Twitter Bootstrap 3 и сторонних библиотек, которые требуются для работы этой платформы. Он значительно упрощает установку этой платформы и избавляет веб-разработчика от выполнения многих рутинных операций, которые могут быть связаны: с посещением необходимых сайтов для скачивания с них архивов библиотек, с распаковкой этих архивов в директорию проекта, с обновлением версий библиотек и др.

Bootstrap - логотип Bower

Для установки bower необходимо ввести в "node.js" следующую команду:

npm install -g bower

Bootstrap - установка Bower

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

Внимание: для работы Bower необходим Git, который можно скачать с сайта https://git-scm.com/.

Bootstrap - Git

Для установки Twitter Bootstrap 3 Необходимо ввести следующую команду:

bower install bootstrap

Установка Twitter Bootstrap с помощью Bower

Bower кроме установки различных пакетов, может также использоваться, и для обновления этих пакетов.

Для обновления библиотек достаточно просто ввести команду:

bower update

Обновление Twitter Bootstrap и пакетов от которых он зависит с помощью Bower

Для вывода списка всех установленных пакетов можно воспользоваться командой:

bower list

Bower - получение списка установленных пакетов

Менеджер пакетов npm, также как и Bower, может использоваться для установки платформы Twitter Bootstrap 3 и библиотек, которые требуются для работы данной платформы. Отличается npm от Bower подходом к установке необходимых библиотек. Если Bower загружает всё в одну специальную директорию, то npm раскладывает всё по отдельным директориям в зависимости от зависимостей пакетов (библиотек) между собой.

Bootstrap - логотип npm

Для установки Twitter Bootstrap 3 с помощью npm необходимо ввести следующую команду:

npm install bootstrap

Установка Twitter Bootstrap с помощью npm

Bootstrap - логотип Grunt

Grunt (http://gruntjs.com) используется для процесса сборки платформы Twitter Bootstrap 3, который включает: компиляцию файлов LESS в CSS, минимизацию (сжатие) файлов CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.

Представляет собой Grunt npm-модуль в "node.js". Задачи, которые он выполняет, также осуществляются с помощью npm модулей.

Перед установкой Grunt Вам сначала необходимо скачать и установить "node.js" (http://nodejs.org/download/), который включает в себя менеджер пакетов npm (node package modules). Данный менеджер будет использоваться как для установки самого Grunt, так и для установки и управления различными модулями, с помощью которых он выполняет свои задачи через "node.js".

Порядок действий при установке Grunt в командной строке:

  1. Установить grunt-cli с помощью команды: npm install -g grunt-cli. Bootstrap - установка Grunt
  2. Перейти в корневую директорию /bootstrap/ выбранного проекта и выполнить: npm install. В результате выполнения этой команды менеджер пакетов npm прочитает файл "package.json" (https://github.com/twbs/bootstrap/blob/master/package.json), который содержит список зависимостей и автоматически установит их. Bootstrap - установить пакеты, необходимые для работы команд Grunt

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

  • grunt dist (компилирует и минимизирует файлы CSS и JavaScript). Эта команда выполняет создание готовых файлов платформы, которые после этого располагаются в папке dist. Т.е. данная команда заново создаёт директорию dist, выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто. Bootstrap - результат выполнение команды grunt dist
  • grunt watch (наблюдает за изменениями в less файлах). Данная команда используется для наблюдения за исходными файлами less и запускает задачу на автоматическую компиляцию их в CSS всякий раз, когда Вы сохраняете изменения в этих файлах. Bootstrap - результат выполнение команды grunt watch
  • grunt test (тестирования платформы). Запускает инструмент JSHint (http://jshint.com) и unit-тесты, написанные с помощью библиотеки QUnit (http://qunitjs.com), для проверки кода JavaScript платформы Twitter Bootstrap 3 в PhantomJS (http://phantomjs.org), который представляет собой веб-браузер без графического пользовательского интерфейса.
  • grunt docs (сборка и тестирование документации). Команда grunt docs выполняет сборку документации, а также выполняет тестирование CSS, JavaScript и других файлов этой документации, которые используются для её локального запуска через Jekyll serve.
  • grunt (полная сборка платформы Twitter Bootstrap и её тестирование). Данная команда выполняет компиляцию и минимизирование файлов CSS и JavaScript (директория dist), сборку документации и её проверку с помощью HTML5 валидатора, и многое другое.
  • Если у Вас возникли проблемы с установкой зависимостей или запуском команд Grunt, то первым делом удалите директорию /node_modules/, созданную менеджером пакетов npm. После этого повторно запустить команду: npm install.
    1. Установите платформу Twitter Bootstrap различными способами.
    2. Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?
    3. Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.


       Bootstrap 0    7791 0

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

    1. Дамир # 0
      Привет отличная статья :)
      А что бы использовать все эти технологии Grunt, Bower, npm, обязательно нужно ставить nodejs?
      1. Александр Мальцев # 0
        Привет, спасибо.
        node.js ставить нужно обязательно.
        1. Олег # 0
          А еще помимо node.js нужно обязательно:
          1) установить Git для Windows (если у вас Windows, git-for-windows.github.io/), при установке выбрать — «Run Git from the Windows Command Prompt»
          2) прописать/добавить пути в к нему в «системной переменной» Path — (;C:\Users\UserName\AppData\Local\Programs\Git\bin;C:\Users\UserName\AppData\Local\Programs\Git\cmd) у вас путь до установки может выглядеть иначе.

          И без этого всё что написано выше работать не будет или будет но с ошибками. Примем это нужно не только для Bower, для установки с помощью npm install bootstrap это тоже обязательно.

          Пришлось помучится с ошибками, прежде чем это всё узнал.
      2. Егор # 0
        Здравствуйте, то-есть если я установлю версию, к примеру
        maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
        С CDN будет подгружаться 3.4.4 (на данный момент актуальная версия)?
        1. Александр Мальцев # 0
          Привет, Егор.
          Данную возможность лучше не использовать, тем более что она актуальна только для jQeury.
          В maxcdn получить, таким образом, последнюю версию Bootstrap не получиться.
          Смысл бы такой, убрав последнюю цифру из пути (вместо 1.8.2 -> 1.8), вы получите последнюю версию jQuery в ветке 1.8.
          https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
          
          Убрав последние цифры из пути (вместо 1.8.2 -> 1), вы получите последнюю версию jQuery в ветке 1.
          https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js.
          
        2. Виктор # 0
          Приветствую.
          Спасибо за толкОвый цикл статей про bootstrap.
          Вопрос по grunt docs. Команда выполняется, но доки локально нечитаемы.
          Вроде бы нужно ещё шаманство… Проясните плиз (под Windows).
          1. Александр Мальцев # 0
            Привет, Виктор.
            Пошаговая инструкция:
            1. Скачать PortableJekyll со страницы https://github.com/madhur/PortableJekyll
            2. Распаковать скаченный архив PortableJekyll-master.zip в любой каталог
            3. Открыть файл setpath.cmd. Заменить "%~dp0" на путь к PortableJekyll
            4. Запустить файл setpath.cmd
            5. Открыть командную строку и перейти в каталог Bootstrap
            6. Выполнить команду jekyll serve
            Bootstrap 3 - jekyll serve
            7. Запуститься сервер
            8. Открыть документацию в браузере
            Bootstrap 3 - документация
          2. Виктор # 0
            Попробую. Спасибо.
            1. Егор # 0
              Здравствуйте, там в тексте синтаксическая ошибка.
              nmp install bootstrap
              npm
              А так, Grunt самый крутой способ. Только пока не устанавливал с помощью его. Мне нужно будет целый вечер посвятить, что-бы вникнуть.
              1. Александр Мальцев # 0
                Привет, Егор.
                Спасибо, поправил.
                Да, с помощью Grunt проще всего работать с Bootstrap.
              2. Евгений # 0
                Добрый день!
                Я пока совсем ноль в кодинге. Неделя как начал обучаться, поэтому не понятно все) Сейчас устанавливаю Bootstrap на Mac.
                Не понятна вот это — «Для установки bower необходимо ввести в „node.js“ следующую команду:»
                Я установил node, но файла node.js не нахожу. Или команду надо вводить в терминале? Но тогда мне выдает кучу ошибок. Поясните плз
                1. Евгений # 0
                  Update
                  файл node я нашел
                  Что с ним дальше делать?)) Как запустить?
                  1. Александр Мальцев # 0
                    Файл node запускать не надо.
                    Создавайте каталог, переходите в него и запускайте команды. Данный каталог будет Вашим рабочим проектом.

                    Подумайте, может Вам лучше начать с самого просто, т.е. со скачивания готовой сборки этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. А со временем, если Вам это будет необходимо, то перейдёте и на Bower.
                  2. Александр Мальцев # 0
                    Здравствуйте!
                    Набирать команды надо просто в терминале.
                    Проверьте есть ли у Вас в переменной $PATH путь /usr/local/bin
                  3. Владимир # 0
                    Добрый день!
                    Интересует такой вопрос. Какую версию jquery следует подключать для bootstap 3?
                    Вроде как, по логике получается, что последнюю версию jquery 1.11.3
                    Но в одном из уроков по bootstap (на просторе интернета) автор этого урока подключает версию 1.9.1, сказав при этом только: «Так bootstap поддерживается с версии 1.9.0 и выше я подключу 1.9.1».
                    Дальше никаких объяснений не последовало почему именно эта версия 1.9.1 а не последняя.

                    Хотелось бы услышать мнение разбирающегося человека в данном вопросе. Плюсы и минусы использования последней версии jquery или 1.9.1?
                    1. Александр Мальцев # 0
                      Доброго времени, Владимир!
                      Bootstrap 3 требует для своей работы, а точнее файл bootstrap.js версию jquery не ниже 1.9.1 или 2.
                      Лучше конечно всего использовать последнюю версию jQuery. На текущий момент их две: 1.11.3 (если Вам нужна поддержка IE 8) и 2.1.4 (если Вам не нужна поддержка IE8).
                      Минусы это навряд ли, а вот плюсы есть. Это более высокое быстродействие и отсутствие огромного багажа ошибок по сравнению с версией 1.9.1. Ведь разработчики не даром трудятся и стараются сделать свой продукт лучше. На своём сайте (http://jquery.com/) они всегда публикуют в момент выхода релиза какие ошибки они исправили, какие методы получили более высокое быстродействие и т.д. Если Вам интересно, то перейдите на сайт разработчиков jQuery и почитайте об этом в разделе Blog.
                      1. Владимир # 0
                        Спасибо за ответ!

                        Т.е. получается, что в том уроке, о котором я написал в первом сообщении автору следовало просто уточнить что версия 1.9.1 подключается для того чтобы обеспечить поддержку старых IE. А версию 1.9.1 а не последнюю он выбрал потому (я предполагаю), что она для него проверена(железно будет работать) и у него не было времени(или просто лень) разузнать о свойствах последней версии.

                        И выходит, что лучше все же на данный момент использовать версию jquery 1.11.3 для bootstap 3 (и при этом поддержка старых IE сохраниться).

                        Ну, вроде немного стало яснее с версиями jquery для bootstrap. Но вот я наткнулся еще на одну статью, где рассказывается, как подключить только jquery к сайту (уже вне контекста jquery+bootstap).
                        И чтобы вы думали я увидел уже в этом примере, «та-да» опять jquery 1.9.1!

                        Ссылка на статью прилагается:
                        hi-blog.ru/web/jquery/podklyuchaem-biblioteku-jquery-k-vashemu-sajta/

                        В статье рекомендуют подключить последнюю версию jquery и тут же прописывают 1.9.1. Загадка да и только:)
                        1. Александр Мальцев # 0
                          Думаю, что там опечатка. Потому что пишут про одно версию, а подключают другую.

                          А сам сайт делан на CMS WordPress и использует Bootstrap 2.3.2 и jQuery 1.11.3.

                          Не думаю что поддержка старых версий IE в настоящий момент столь актуальна. Если брать статистику, то версией IE8 и ниже пользуются меньше 1,3% пользователей во Всём мире (http://caniuse.com/usage-table). А если брать статистику сайтов, то эта цифра достигает лишь 0,14% от всех пользователей. Тем более что на подходе уже jQuery 3.
                          Да и Bootstrap 4 уже не будет поддерживать старые версии IE <= 8.
                    2. Владимир # 0
                      Еще раз спасибо за доходчивый ответ!

                      Вы должны авторизоваться, чтобы оставлять комментарии.