Посмотреть все уроки курса
Выбрать другой урок из курса
Обсуждение
Теория урока

Подключаем Bootstrap

В этом уроке мы с вами подключим Bootstrap.

  1. Сначала создадим папку с проектом и назовём её test;
  2. Теперь создадим папку css и файл index.html.

Есть два способа подключения: через CDN и локальный, я расскажу про оба способа, но использовать будем только второй.

Подключение через CDN:

1. В теге link пишем:

Код HTML
<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>

Код HTML
<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> необходимо дописать еще пару строк:

Код HTML
<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>

Теперь перейдем к локальному подключению:

  1. Скачиваем исходники с официального сайта Bootstrap;
  2. В исходниках заходим в dist/css;
  3. Извлекаем два файла: bootstrap-grid.min.css и bootstrap-reboot.min.css;
  4. Перемещаем в папку css, которую вы создали ранее.

Файл bootstrap-grid.min.css отвечает за сетку, а файл bootstrap-reboot.min.css работает как normalize.css.

Если вы не знаете, что такое normalize.css, не отчаивайтесь, он просто обеспечивает кроссбраузерную согласованность. Большего вам знать и не нужно.

Перейдем к подключению сетки. В теге <head>, подключайте bootstrap-reboot.min.css и bootstrap-grid.min.css.

Должно получиться как на рисунке 1.

Рисунок 1. Подключение Bootstrap
Рисунок 1. Подключение Bootstrap

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


Автор курса: Олег Данилюк (по всем вопросам)

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.