Искать
Вы превысили запрос на
0 знаков

Это блог интерактивного сайта Codebra. Здесь публикуются материалы, выходящие за рамки основных курсов сайта, мои собственные мысли по программированию и новости сайта. Кстати, если нужны курсы, то Вам сюда.

«Для меня долгое время было загадкой, как что-то очень дорогое и технологичное может быть столь бесполезным. И вскоре я осознал, что компьютер — это глупая машина, обладающая способностями выполнять невероятно умные вещи, тогда как программисты — это умные люди, у которых талант делать невероятные глупости. Короче, они нашли друг друга.»

Писатель

Билл Брайсон

1951 г.

Главная » Bootstrap » Урок 2. Подключаем Bootstrap
Урок 2. Подключаем Bootstrap

Оглавление мини-курса «Bootstrap — сетки» от пользователя сайта Codebra

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

  1. Сначала создадим папку с проектом и назовём её test;
  2. Теперь создадим папку 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> 

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

  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

На этом все.

Bootstrap. Просмотров: 1 710
29.07.2022
Codebra