Цель дня
Установить Bootstrap и создать базовую структуру проекта.
Теория
Bootstrap — это самый популярный CSS-фреймворк для создания адаптивных и мобильных веб-сайтов.
Основные преимущества:
- Готовая сеточная система (12 колонок)
- Десятки компонентов (кнопки, карточки, навигация)
- Встроенная адаптивность
- Кросс-браузерная совместимость
1. Подключение Bootstrap
Самый быстрый способ — использовать CDN:
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- JS (с Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
2. Базовый шаблон
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мой сайт на Bootstrap</title>
<!-- Подключение Bootstrap CSS -->
</head>
<body>
<div class="container">
<h1 class="text-center my-5">Привет, мир!</h1>
</div>
<!-- Подключение Bootstrap JS -->
</body>
</html>
Практическое задание
- Создайте новую папку для проекта
- Добавьте файл
index.html
- Подключите Bootstrap через CDN
- Создайте контейнер с заголовком и кнопкой
Совет дня
Используйте Bootstrap Icons — бесплатную библиотеку иконок:
<i class="bi bi-heart-fill"></i> Сердце
<i class="bi bi-star-fill"></i> Звезда
<i class="bi bi-gear-fill"></i> Настройки
Подключение: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
Проверь себя
Какой класс создает контейнер с фиксированной шириной?
.container
.container-fluid
.box
Верно! .container создает контейнер с фиксированной максимальной шириной.
Неправильно. Попробуйте еще раз!