Подключение фреймворка Bootstrap к сайту

В этой статье мы разберём как скачать и подключить фреймворк Bootstrap (3 и 4 версий) к сайту.
Минимальный набор инструментов для разработки на Bootstrap
Для создания веб-проектов на фреймворке Bootstrap необходимо иметь:
- текстовый редактор для работы с кодом (Visual Studio Code, Sublime Text, Atom или др.) или IDE (WebStorm, NetBeans или др.);
- браузер (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge или др.).
Загрузка фреймворка Bootstrap
Создание веб-проекта, в основу дизайна которого положен фреймворк Bootstrap всегда начинают с его загрузки. Загрузить фреймворк Bootstrap можно различными способами. Например, посредством ссылки, расположенной на сайте getbootstrap.com или с помощью пакетного менеджера npm, Composer, Bower или др. Способ как это осуществить зависит от вашего опыта или конкретной ситуации.
Как установить фреймворк Bootstrap с помощью пакетных менеджеров, а также как осуществить его сборку посредством Grunt, можно почитать в этой статье.
Наиболее просто выполнить загрузку – это воспользоваться ссылкой. На сайте Bootstrap присутствуют 2 ссылки.
Первая ссылка содержит готовые к использованию файлы CSS и JavaScript. Эту сборку в основном используют для изучения фреймворка или для использования в проектах, дизайн которых может быть выполнен в стилях заложенных авторами по умолчанию.
Скачать Bootstrap 3.4.1 Скачать Bootstrap 4.5.3Вторая ссылка содержит фреймворк в исходных кодах. Эта версия более удобна для разработки сайтов, т.к. позволяет очень просто изменить стили, цветовую гамму компонентов, выполнить их настройку и др. Но эти исходные файлы, перед тем как использовать на странице, нужно будет скомпилировать и минимизировать. Данный процесс обычно автоматизируют, например, с помощью Gulp.
Исходные коды Bootstrap 3.4.1 Исходные коды Bootstrap 4.5.3Распаковка архива Bootstrap
После скачивания архива (с готовыми к применению CSS и JavaScript файлами), его необходимо распаковать в каталог вашего веб-проекта.
Если рассмотреть архив, то можно заметить, что он имеет следующее содержимое (на примере Bootstrap 3.4.1):
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
В каталоге css
находятся стили фреймворка Bootstrap, а в js
- плагины для обеспечения работы некоторых компонентов. Плагины написаны с использованием функций библиотеки jQuery. Поэтому перед Bootstrap JS необходимо подключить библиотеку jQuery.
Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, т.е. с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).
В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.
Не минимизированные версии более удобно использовать при разработке, а также для изучения.
Кроме этих файлов, в данный архив ещё входит иконочный шрифт "Glyphicons". Шрифт "Glyphicons" насчитывает более 250 иконок из набора "Glyphicon Halflings". Шрифт представлен с помощью 4 файлов: glyphicons-halflings-regular.eot
, glyphicons-halflings-regular.svg
, glyphicons-halflings-regular.ttf
, glyphicons-halflings-regular.woff
).
Скачать Glyphicons (Bootstrap 3.4.1)
Такое разнообразие форматов одного и того же шрифта необходимо для того чтобы обеспечить его отображение во всех браузерах.
Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.
Архив фреймворка Bootstrap 4 практически ничем ни отличается от Bootstrap 3. Основное его отличие в том, что он не содержит шрифт "Glyphicons". Если вам нужны шрифтовые иконки, то их необходимо будет подключить самостоятельно. Например, воспользовавшись одним из следующих наборов: FontAwesome, Octicons, Glyphicons, IcoMoon или др. Если же вы не хотите использовать готовый шрифт, а создать свой, который будет состоять только из нужных значков, то воспользуйтесь этой информацией.
Кроме этого архив Bootstrap 4 содержит ещё файлы «bootstrap-grid.css»
и «bootstrap-reboot.css»
. Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.
Первый файл («bootstrap-grid.css»
) содержит сетку Bootstrap, а второй (bootstrap-reboot.css
) - нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.
Подключение Bootstrap к HTML странице
Процесс установки фреймворка Bootstrap 3 состоит из подключения следующих файлов к HTML 5 странице:
- Bootstrap CSS (
bootstrap.min.css
); - jQuery (необходима для работы JS плагинов Bootstrap, рекомендуется использовать последнюю на текущий момент версию);
- Bootstrap JS (
bootstrap.min.js
).
Примечание: Файлы JavaScript лучше подключать перед закрывающим тегом body (</body>), так как это обеспечит более быструю загрузку и отображение основного контента веб-страницы.
<!doctype html> <html lang="ru"> <head> <!-- Кодировка веб-страницы --> <meta charset="utf-8"> <!-- Настройка viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Подключаем Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css" > </head> <body> <!-- Контент страницы --> ... <!-- Подключаем jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Подключаем Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Подключение фреймворка Bootstrap 4 осуществляется так:
<!doctype html> <html lang="ru"> <head> <!-- Кодировка веб-страницы --> <meta charset="utf-8"> <!-- Настройка viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Подключаем Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css" > </head> <body> <!-- Контент страницы --> ... <!-- Подключаем jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Подключаем плагин Popper (необходим для работы компонента Dropdown и др.) --> <script src="js/popper.min.js"></script> <!-- Подключаем Bootstrap JS --> <script src="js/bootstrap.min.js"></script> </body> </html>
Вместо подключения Popper JS и Bootstrap JS можно просто подключить Bootstrap Bundle JS:
<!-- Подключаем Bootstrap Bundle JS (включает в себя Popper JS) --> <script src="js/bootstrap.bundle.min.js"></script>
Подключить Bootstrap 4 можно также с помощью CDN (при этом скачивать Bootstrap в проект не нужно):
<!doctype html> <html lang="ru"> <head> <!-- Кодировка веб-страницы --> <meta charset="utf-8"> <!-- Настройка viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Подключаем Bootstrap CSS с CDN--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <!-- Контент страницы --> ... <!-- Подключаем jQuery с CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Подключаем Bootstrap Bundle JS с CDN --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
Подключение «Bootstrap 3.4.1» с CDN:
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- Дополнительные стили (не обязательно) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- Подключаем jQuery (необходим для Bootstrap JS) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Bootstrap JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
Для проверки работоспособности фреймворка, создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.
<button type="button" class="btn btn-primary" data-toggle="popover" title="Сообщение" data-content="Ура, Bootstrap 4 работает">Поднеси ко мне курсор</button> <!-- После подключения jQuery, Popper и Bootstrap JS --> <script> $(function () { $('[data-toggle="popover"]').popover({trigger:'hover'}); }); </script>

Подскажите пожалуйста, в скаченной папке Bootstrap 4.2.1 нет jquery.min.js, popper.min.js. Где их можно скачать?
Второй вопрос. Если скачать jquery.min.js, popper.min.js и подключить, то дополнительное подключение с помощью CDN:
Так возможно? Конфликтов не будет? Это влечет только увеличение кода?
Это ссылки на официальные релизы. Поэтому в них нет сторонних библиотек. Библиотеку jQuery можно загрузить с «jquery.com». Минимизированную версию отсюда, а не минимизированную отсюда.
Если нужно «bootstrap.min.js» и «popper.min.js», то можно просто подключить «bootstrap.bundle.min.js».
Если по каким-то причинам вам всё таки его нужно подключить отдельно, то загрузить его можно со страницы этого проекта на Github. Осуществляется это на вкладке «Релизы».
Подключать и то и другое не нужно, т.к. вы замедлите загрузку страницы. У вас к странице будут подгружены 2 файла с одинаковым содержимым. Выберите что-то одно.
У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить ещё jquery-ui.js, то никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет?
Заранее спасибо за ответ!
Да, т.к. некоторые компоненты jQuery UI имеют такие же названия, что и компоненты Bootstrap. Например, tooltip и button.
Чтобы этого избежать, можно, например, сделать так:
К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты.
Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать…
Спасибо Вам за отзывчивость. Очень полезный сайт.
У меня 2 вопроса:
1. Как ускорить скорость загрузки сайта? Можно ли в файле bootstrap.min.css оставить только те стили, которые я использую, а остальные удалить?
2. Обязательно ли подключить шрифты, если я их не использую?
Наиболее просто это сделать на странице getbootstrap.com/customize/. Данная страница специально предназначена для создания сборки, в которую можно включить только необходимые стили и скрипты.
Для этого необходимо отметить галочками только используемые модули.
Например, если Вам не нужны шрифты, то отключаем Glyphicons. Т.е. выбирайте только то, что используете.
После этого переходим в конец страницы и нажимаем на кнопку «Compile and Download». Получаем сборку Bootstrap 3 и подключаем её (или заменяем существующие файлы). После этого Ваш сайт будет загружаться быстрее…
Начал знакомиться с Bootstrap 3.3.5. Пока на базе подключения.
Возникли вопросы:
- Почему js подключаете в body, а не в header?
- Расскажите подробно, как подключить свой css файл (и переопределять стили bootstrap.css). Чтобы при выходе новой версии — обновить без проблем.
- Распишите подробно, пожалуйста, о файле bootstrap-theme.css (для чего он нужен, как его подключить и как его использовать).
- Как Вы подключаете шрифты?
Я шрифт подключаю так:Использую так:
На сколько верно это?
1. В разделе head правильно подключать только те сущности, которые используются для отображения самой страницы. Например, стили CSS. А файл bootstrap.min.js для отображения самой страницы не нужен, и его желательно помещать в самый конец. Это приведёт к тому, что пользователь быстрее сможет увидеть контент вашей страницы, т.к. скрипты будут грузиться в самом конце.
Давайте по-другому… Скрипты обычно выполняют некоторые действия. А чтобы это осуществить необходимо, чтобы страница (DOM-дерево) была загружена. Поэтому нет смысла помещать скрипты в раздел head, когда ещё страница не загружена и мы не можем обратиться к её элементам. Т.е. более корректно размещать их перед закрывающим тегом body.
При этом необходимо обратить внимание на очерёдность подключения js файлов: jQuery -> Bootstrap -> Ваши скрипты.
2. Свой CSS файл необходимо подключать после файла bootstrap.min.css. Это необходимо чтобы ваши стили были последними и переопределяли Bootstrap. В некоторых случаях нужно добавить к значению CSS свойства !important.
3. Файл bootstrap-theme.css содержит некоторые дополнительные эффекты (анимацию) для компонентов. Его необходимо подключить после основного файла Bootstrap CSS. Этот файл не обязательный.
4. Иконочные шрифты (glyphicons-halflings) подключать не надо, они и так уже подключены в файле bootstrap.min.css.
1. Скорее всего, вы неправильно указываете пути к файлам. Проверить это очень легко, клавиша F12 в браузере (инструменты разработчика). Там есть всё что нужно.
2. Что тут можно сказать, вы что-то неверно прописали в своём файле.
Тут всё очень просто. Допустим, вы хотите изменить значение color класса Bootstrap .text-success на красный (red). Открываете свой файл css и прописываете туда:
3. Там было примерно написано то же самое. А про него рассказывать больше нечего. Просто его подключаете и компоненты Bootstrap типа кнопок, меню, выпадающих списков и многих других, получают анимацию или какие-то эффекты.
4. Для этого необходимо использовать пустой элемент span или i, к которому необходимо добавить классы. Первый класс glyphicon (указывает, что необходимо использовать шрифт font-family: 'Glyphicons Halflings'), второй класс — за саму иконку (например, звёздочка: glyphicon-star)
Т.к. это шрифт, то стили для него необходимо задавать как для текста:
Это связано с тем, что разработчики WordPress в своём файле «style.css» при именовании классов очень часто применяют те же названия, которые использует Bootstrap.
В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap.
Для того чтобы узнать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка «Лупа» -> изучаем содержимое правой панели.
В новых версиях у Bootstrap появился третий файл js (npm.js) для чего он нужен?
Можешь немного рассказать про grunt и bower. Для чего они нужны и как ими пользоваться?
Спасибо!
Спасибо. Про nmp.js, grunt и bower расскажу в отдельной статье.