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 ничего подключать не нужно.
Автор курса: Олег Данилюк (по всем вопросам)