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    9222 0

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

    1. Дамир 17 июня 2015, 06:39 # 0
      Привет отличная статья :)
      А что бы использовать все эти технологии Grunt, Bower, npm, обязательно нужно ставить nodejs?
      1. Александр Мальцев 17 июня 2015, 13:57 # 0
        Привет, спасибо.
        node.js ставить нужно обязательно.
        1. Олег 22 ноября 2015, 16:29 # 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. Егор 10 июля 2015, 03:47 # 0
        Здравствуйте, то-есть если я установлю версию, к примеру
        maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
        С CDN будет подгружаться 3.4.4 (на данный момент актуальная версия)?
        1. Александр Мальцев 10 июля 2015, 17:37 # 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. Виктор 16 июля 2015, 10:13 # 0
          Приветствую.
          Спасибо за толкОвый цикл статей про bootstrap.
          Вопрос по grunt docs. Команда выполняется, но доки локально нечитаемы.
          Вроде бы нужно ещё шаманство… Проясните плиз (под Windows).
          1. Александр Мальцев 17 июля 2015, 13:33 # 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. Виктор 17 июля 2015, 19:59 # 0
            Попробую. Спасибо.
            1. Егор 31 июля 2015, 21:59 # 0
              Здравствуйте, там в тексте синтаксическая ошибка.
              nmp install bootstrap
              npm
              А так, Grunt самый крутой способ. Только пока не устанавливал с помощью его. Мне нужно будет целый вечер посвятить, что-бы вникнуть.
              1. Александр Мальцев 02 августа 2015, 13:50 # 0
                Привет, Егор.
                Спасибо, поправил.
                Да, с помощью Grunt проще всего работать с Bootstrap.
              2. Евгений 20 ноября 2015, 12:06 # 0
                Добрый день!
                Я пока совсем ноль в кодинге. Неделя как начал обучаться, поэтому не понятно все) Сейчас устанавливаю Bootstrap на Mac.
                Не понятна вот это — «Для установки bower необходимо ввести в „node.js“ следующую команду:»
                Я установил node, но файла node.js не нахожу. Или команду надо вводить в терминале? Но тогда мне выдает кучу ошибок. Поясните плз
                1. Евгений 20 ноября 2015, 14:41 # 0
                  Update
                  файл node я нашел
                  Что с ним дальше делать?)) Как запустить?
                  1. Александр Мальцев 20 ноября 2015, 16:32 # 0
                    Файл node запускать не надо.
                    Создавайте каталог, переходите в него и запускайте команды. Данный каталог будет Вашим рабочим проектом.

                    Подумайте, может Вам лучше начать с самого просто, т.е. со скачивания готовой сборки этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. А со временем, если Вам это будет необходимо, то перейдёте и на Bower.
                  2. Александр Мальцев 20 ноября 2015, 16:20 # 0
                    Здравствуйте!
                    Набирать команды надо просто в терминале.
                    Проверьте есть ли у Вас в переменной $PATH путь /usr/local/bin
                  3. Владимир 02 декабря 2015, 06:07 # 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. Александр Мальцев 02 декабря 2015, 12:43 # 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. Владимир 02 декабря 2015, 14:34 # 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. Александр Мальцев 02 декабря 2015, 15:11 # 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. Владимир 02 декабря 2015, 15:46 # 0
                      Еще раз спасибо за доходчивый ответ!

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