Модуль 3 — Документация Bootstrap

https://getbootstrap.com/docs/5.0/getting-started/introduction/

---

Этап 1. Введение в Bootstrap

Цель: понять, что такое Bootstrap и как он подключается.

1. 📘 Introduction
   • Что такое Bootstrap и зачем он нужен.
   • Основные принципы (мобильный first, адаптивность, сетка).
2. ⚙️ Download
   • Как подключить через CDN или локально.
   • Разница между compiled CSS/JS и source files (Sass).
3. 🧠 Contents & File Structure
   • Структура проекта.
   • Как устроены файлы CSS и JS.
4. 🧾 Browsers & Devices
   • Поддержка браузеров.
   • Адаптивность и viewport.

---

Этап 2. Сетка (Grid System)

Цель: научиться создавать адаптивные макеты.

1. 🧱 Layout → Grid
   • 12-колоночная система.
   • Контейнеры (.container, .container-fluid).
   • Ряды (.row) и колонки (.col).
2. 🔁 Layout → Columns
   • Автоматическая и фиксированная ширина.
   • Nesting (вложенные колонки).
3. 📱 Layout → Breakpoints
   • Работа с адаптивностью (sm, md, lg, xl, xxl).

Практика:
Создай адаптивную страницу с заголовком, двумя колонками и футером.

---

Этап 3. Базовые стили и элементы

Цель: освоить основные визуальные компоненты.

1. 💬 Content → Reboot
   • Базовые стилизация HTML-элементов.
2. ✍️ Content → Typography
   • Заголовки, параграфы, списки, блоки цитат.
3. 🎯 Content → Images
   • Адаптивные изображения, обтекание.
4. 🟦 Utilities → Colors
   • Использование цветовых утилит (text-primary, bg-success).
5. 🎨 Utilities → Spacing
   • Отступы и поля (margin/padding).

---

Этап 4. Компоненты Bootstrap

Цель: научиться собирать интерфейс из готовых элементов.

1. 🔘 Components → Buttons
   • Виды кнопок и размеры.
2. 📦 Components → Cards
   • Контейнеры для контента, изображения, ссылки.
3. 🧭 Components → Navbar
   • Создание меню навигации.
4. 💬 Components → Alerts
   • Всплывающие уведомления.
5. 📄 Components → Forms
   • Поля ввода, чекбоксы, радиокнопки.
6. 📑 Components → Modal
   • Всплывающие окна.
7. ⚙️ Components → Collapse / Accordion
   • Скрытие и раскрытие блоков.

---

Этап 5. JavaScript-компоненты

Цель: понять, как работают интерактивные элементы.

1. 💡 Components → Dropdowns
2. 📜 Components → Carousel
3. 🔁 Components → Offcanvas
4. ⚡ Components → Toasts
5. 🧩 Components → Popovers / Tooltips

---

Этап 6. Утилиты и кастомизация

Цель: адаптировать Bootstrap под собственный проект.

1. 🧾 Utilities Overview
   • Система утилит Bootstrap.
2. 🎚️ Customize → Overview
   • Как изменить переменные Sass.
3. 🧩 Customize → Sass
   • Сборка кастомной темы.
4. ⚙️ Customize → Optimize
   • Оптимизация и сборка минифицированных файлов.

---

Этап 7. Практика и итоговый проект

Цель: закрепить всё на реальном примере.

• Создай лендинг с навигацией, карточками, формой и футером.
• Используй сетку, цвета, типографику, адаптивность.
• Добавь JS-компоненты: модалку, карусель или выпадающее меню.
• Проверяй адаптивность в Chrome DevTools.

---