Поиск
Метки
Последние записи
Аннотация к статье
В этом уроке научимся подключать Bootstrap.
Последние записи
- —Как твит и желание учиться втянули меня в авантюру
- —Работаем с сокетами и разрабатываем обратную TCP-оболочку на Python
- —Перехватываем трафик при помощи ARP-спуфинга
- —Burp Suite и picoCTF: ищем флаг на сервере и перебираем куки
- —Реверс-инжиниринг на picoCTF: бинарные сдвиги на практике
- —Обновление от 19 ноября 2022 г. на Codebra
- —Обновление от 16 октября 2022 г. на Codebra
- —Топ 25 навыков и компетенций для пентеста
- —Обновление от 3 сентября 2022 г. на Codebra
- —Урок 10. Заключение и полезные материалы по Git
Урок 2. Подключаем Bootstrap
Оглавление мини-курса «Bootstrap — сетки» от пользователя сайта Codebra
- Урок 1. Введение в курс «Bootstrap — сетки»
- Урок 2. Подключаем Bootstrap
- Урок 3. Создаем столбцы в Bootstrap
- Урок 4. Адаптивные столбцы в Bootstrap
- Урок 5. Небольшая практика по Bootstrap
- Урок 6. Дополнительно по сеткам 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.
На этом все.
Похожие записи:
Урок 1. Введение в курс «Bootstrap — сетки»
Урок 5. Небольшая практика по Bootstrap
Урок 4. Адаптивные столбцы в Bootstrap
Урок 6. Дополнительно по сеткам Bootstrap
Урок 3. Создаем столбцы в Bootstrap
Урок 1. Знакомство с jQuery
Обновление от 23 декабря 2020 г. на Codebra
Обновление от 3 сентября 2022 г. на Codebra
Обновление от 6 июня 2021 г. на Codebra