2.1. Подключаем Bootstrap
В этом уроке мы с вами подключим Bootstrap.
- Сначала создадим папку с проектом и назовём её
test
; - Теперь создадим папку
css
и файлindex.html
.
Есть два способа подключения: через CDN и локальный, я расскажу про оба способа, но использовать будем только второй.
Подключение через CDN:
1. В теге link
пишем:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
2. Подключаем JavaScript перед тегом </body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
Если вы хотите использовать весь потенциал библиотеки, то перед тегом </body>
необходимо дописать еще пару строк:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
Теперь перейдем к локальному подключению:
- Скачиваем исходники с официального сайта Bootstrap;
- В исходниках заходим в
dist/css
; - Извлекаем два файла:
bootstrap-grid.min.css
иbootstrap-reboot.min.css
; - Перемещаем в папку
css
, которую вы создали ранее.
Файл bootstrap-grid.min.css
отвечает за сетку, а файл bootstrap-reboot.min.css
работает как normalize.css
.
Если вы не знаете, что такое normalize.css
, не отчаивайтесь, он просто обеспечивает кроссбраузерную согласованность. Большего вам знать и не нужно.
Перейдем к подключению сетки. В теге <head>
, подключайте bootstrap-reboot.min.css
и bootstrap-grid.min.css
.
Должно получиться как на рисунке 1.

Для выполнения практических заданий на сайте codebra ничего подключать не нужно.
Автор курса: Олег Данилюк (по всем вопросам)