Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.
Подключение с помощью CDN
Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.
CDN — сокращение от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.
Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подключение Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<!-- Основная разметка страницы -->
</body>
</html>
В процессе прохождения курса будет описано, какие именно компоненты требуют наличие JavaScript. Если не использовать такие компоненты, то возможно не подключать скрипты к странице, что положительно скажется на скорости загрузки сайта. Этот критерий очень важен при разработке. На него также ориентируются алгоритмы ранжирования сайта в поисковых системах.
Локальное подключение CSS
Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведет в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.
Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub. В случае с репозиторием нас интересует директория dist.
Внутри директории dist находится следующая структура CSS файлов:
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap.css
│ └── bootstrap.min.css
В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.
- bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.
- bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.
- bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.
- bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.
Создадим проект, в котором используется только сетка и утилиты бутстрапа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Подключение Bootstrap</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css">
</head>
<body>
<!-- Основная разметка страницы -->
</body>
</html>
При подключении стилей к проекту лучше использовать минимизированные версии файлов. Они имеют дополнение в названии в виде .min. Эти файлы сжаты, что уменьшает вес стилей.
Самостоятельная работа
Создайте директорию project-bootstrap. Установите и подключите к HTML странице Bootstrap любым из способов, описанных в этом уроке. В дальнейших дополнительных заданиях вы создадите небольшой макет с использованием Bootstrap. Макет будет представлять собой каталог товаров.
Дополнительные материалы
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
