Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Установка Bootstrap Bootstrap 5: Основы верстки

Театр начинается с вешалки, а использование 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. Эти файлы сжаты, что уменьшает вес стилей.

Подключение с помощью npm пакета

Последним способом является подключение Bootstrap с помощью npm пакета. Вместе с этим появится доступ ко всем SASS файлам Bootstrap, открывая возможности к более тонким настройкам проекта, а также созданию новых компонентов и утилит.

Для установки Bootstrap через npm используется команда:

npm install bootstrap

После этого в директории node\_modules появится директория bootstrap. Внутри неё, помимо скомпилированных CSS и JS присутствуют SASS файлы, которые пригодятся при создании своих компонентов или утилит.

При таком подходе разработка зачастую ведётся с использованием SASS препроцессора. Чтобы подключить Bootstrap к файлу используется стандартная директива @import.

@import "../node_modules/bootstrap/scss/bootstrap";

Самостоятельная работа

Создайте директорию project-bootstrap. Установите и подключите к HTML странице Bootstrap любым из способов, описанных в этом уроке. В дальнейших дополнительных заданиях вы создадите небольшой макет с использованием Bootstrap. Макет будет представлять собой каталог товаров.


Дополнительные материалы

  1. Официальный Boilerplate Bootstrap

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»