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

2.1. Подключаем 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 ничего подключать не нужно.


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

<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно