В этой статье мы разберём как скачать и подключить фреймворк 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 странице:

  1. Bootstrap CSS (bootstrap.min.css);
  2. jQuery (необходима для работы JS плагинов Bootstrap, рекомендуется использовать последнюю на текущий момент версию);
  3. 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 (отображение popover подсказки при поднесении к кнопке курсора) Скачать пример