Home Work 14

Адаптивний макет на Bootstrap

На цій сторінці зібрано домашнє завдання до уроку №14: використано Bootstrap grid, адаптивні колонки, готові компоненти, утиліти відступів і базову семантичну структуру сторінки.

Що є в макеті

  • Header із коротким описом сторінки
  • Left sidebar з навігацією
  • Main-контент ширший за бокові частини
  • Right sidebar з формою та підказками
  • Footer з кнопкою назад на головний індекс

MAIN

Центральна частина ширша за бокові колонки й містить п'ять інформаційних блоків, як і вимагалося в домашньому завданні. На мобільних екранах секції стають у стовпчик, а на великих дисплеях працює трьохколонковий макет.

Блок 1

Grid-система

Bootstrap дозволяє швидко будувати структуру сторінки через container, row і col-*, не прописуючи власну сітку з нуля.

Блок 2

Адаптивність

Класи на кшталт col-lg-3 і col-lg-6 допомагають керувати шириною колонок на різних breakpoint'ах без додаткових media queries.

Блок 3

Готові компоненти

У фреймворку вже є кнопки, списки, бейджі, форми та картки, тому сторінку можна збирати швидше й послідовніше за стилем.

Блок 4

Утиліти

Утилітарні класи p-4, mb-3, d-grid, text-secondary і подібні скорочують обсяг власного CSS.

Блок 5

Швидкий старт через CDN

Для невеликих навчальних проєктів зручно підключати Bootstrap через CDN і відразу переходити до побудови інтерфейсу без локального налаштування збірки.