На этом уроке мы рассмотрим различные варианты, с помощью которых Вы можете установить платформу Twitter Bootstrap 3 в свой веб-проект. Кроме этого познакомимся с процессом сборки платформы Twitter Bootstrap 3 с помощью Grunt.
Способы установки платформы Twitter Bootstrap 3
Устанавливать и управлять платформой Twitter Bootstrap 3 можно различными способами:
- вручную, посредством самостоятельного скачивания этой платформы (архива) с сайта 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
Bower - менеджер пакетов, который может использоваться для установки платформы Twitter Bootstrap 3 и сторонних библиотек, которые требуются для работы этой платформы. Он значительно упрощает установку этой платформы и избавляет веб-разработчика от выполнения многих рутинных операций, которые могут быть связаны: с посещением необходимых сайтов для скачивания с них архивов библиотек, с распаковкой этих архивов в директорию проекта, с обновлением версий библиотек и др.
Для установки bower необходимо ввести в "node.js" следующую команду:
npm install -g bower
Перечень библиотек и файлов, которые необходимо загрузить, находится в файле bower.json. Кроме самих библиотек в этом файле, также содержатся и требования к версиям этих библиотек.
Для установки Twitter Bootstrap 3 Необходимо ввести следующую команду:
bower install bootstrap
Bower кроме установки различных пакетов, может также использоваться, и для обновления этих пакетов.
Для обновления библиотек достаточно просто ввести команду:
bower update
Для вывода списка всех установленных пакетов можно воспользоваться командой:
bower list
Установка пакета с помощью npm
Менеджер пакетов npm
, также как и Bower, может использоваться для установки платформы Twitter Bootstrap 3 и библиотек, которые требуются для работы данной платформы. Отличается npm
от Bower подходом к установке необходимых библиотек. Если Bower загружает всё в одну специальную директорию, то npm
раскладывает всё по отдельным директориям в зависимости от зависимостей пакетов (библиотек) между собой.
Для установки Twitter Bootstrap 3 с помощью npm
необходимо ввести следующую команду:
npm install bootstrap
Сборка платформы Twitter Bootstrap 3 с помощью Grunt
Grunt (http://gruntjs.com) используется для процесса сборки платформы Twitter Bootstrap 3, который включает: компиляцию файлов LESS в CSS, минимизацию (сжатие) файлов CSS и JavaScript, запуск различных тестов (JSHint, QUnit) и многое другое.
Представляет собой Grunt npm-модуль в "node.js". Задачи, которые он выполняет, также осуществляются с помощью npm модулей.
Установка Grunt
Перед установкой Grunt Вам сначала необходимо скачать и установить "node.js" (http://nodejs.org/download/), который включает в себя менеджер пакетов npm
(node package modules). Данный менеджер будет использоваться как для установки самого Grunt, так и для установки и управления различными модулями, с помощью которых он выполняет свои задачи через "node.js".
Порядок действий при установке Grunt в командной строке:
- Установить
grunt-cli
с помощью команды:npm install -g grunt-cli
. - Перейти в корневую директорию
/bootstrap/
выбранного проекта и выполнить:npm install
. В результате выполнения этой команды менеджер пакетовnpm
прочитает файл "package.json" (https://github.com/twbs/bootstrap/blob/master/package.json), который содержит список зависимостей и автоматически установит их.
После завершения, вам будут доступны для запуска из командной строки различные команды Grunt.
Grunt команды
dist
. Т.е. данная команда заново создаёт директорию dist
, выполняет склеивание, компилирование и минимизирование файлов CSS и JavaScript, которые затем помещаются в эту директорию. Эта команда используется пользователями Twitter Bootstrap 3 наиболее часто.


grunt docs
выполняет сборку документации, а также выполняет тестирование CSS, JavaScript и других файлов этой документации, которые используются для её локального запуска через Jekyll serve.dist
), сборку документации и её проверку с помощью HTML5 валидатора, и многое другое./node_modules/
, созданную менеджером пакетов npm
. После этого повторно запустить команду: npm install
.Задание
- Установите платформу Twitter Bootstrap различными способами.
- Какой из способов установки платформы Twitter Bootstrap Вам понравился больше и почему?
- Установите Grunt и соберите с его помощью платформу Twitter Bootstrap.
Интересует такой вопрос. Какую версию 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?
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.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. Загадка да и только:)
А сам сайт делан на 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.
Я пока совсем ноль в кодинге. Неделя как начал обучаться, поэтому не понятно все) Сейчас устанавливаю Bootstrap на Mac.
Не понятна вот это — «Для установки bower необходимо ввести в „node.js“ следующую команду:»
Я установил node, но файла node.js не нахожу. Или команду надо вводить в терминале? Но тогда мне выдает кучу ошибок. Поясните плз
Набирать команды надо просто в терминале.
Проверьте есть ли у Вас в переменной $PATH путь /usr/local/bin
файл node я нашел
Что с ним дальше делать?)) Как запустить?
Создавайте каталог, переходите в него и запускайте команды. Данный каталог будет Вашим рабочим проектом.
Подумайте, может Вам лучше начать с самого просто, т.е. со скачивания готовой сборки этой платформы (архива) с сайта http://getbootstrap.com и библиотеки jQuery. А со временем, если Вам это будет необходимо, то перейдёте и на Bower.
А так, Grunt самый крутой способ. Только пока не устанавливал с помощью его. Мне нужно будет целый вечер посвятить, что-бы вникнуть.
Спасибо, поправил.
Да, с помощью Grunt проще всего работать с Bootstrap.
Спасибо за толкОвый цикл статей про bootstrap.
Вопрос по grunt docs. Команда выполняется, но доки локально нечитаемы.
Вроде бы нужно ещё шаманство… Проясните плиз (под Windows).
Пошаговая инструкция:
1. Скачать PortableJekyll со страницы https://github.com/madhur/PortableJekyll
2. Распаковать скаченный архив PortableJekyll-master.zip в любой каталог
3. Открыть файл setpath.cmd. Заменить "%~dp0" на путь к PortableJekyll
4. Запустить файл setpath.cmd
5. Открыть командную строку и перейти в каталог Bootstrap
6. Выполнить команду jekyll serve
7. Запуститься сервер
8. Открыть документацию в браузере
maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
С CDN будет подгружаться 3.4.4 (на данный момент актуальная версия)?
Данную возможность лучше не использовать, тем более что она актуальна только для jQeury.
В maxcdn получить, таким образом, последнюю версию Bootstrap не получиться.
Смысл бы такой, убрав последнюю цифру из пути (вместо 1.8.2 -> 1.8), вы получите последнюю версию jQuery в ветке 1.8.
Убрав последние цифры из пути (вместо 1.8.2 -> 1), вы получите последнюю версию jQuery в ветке 1.
А что бы использовать все эти технологии Grunt, Bower, npm, обязательно нужно ставить nodejs?
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 это тоже обязательно.
Пришлось помучится с ошибками, прежде чем это всё узнал.