Исходники к видео:
boosty.to/codequest/posts/fd1...
Подписывайся на альтернативные каналы:
- codequest
- t.me/codequest
Если вы занимаетесь версткой сайтов, то наверняка слышали о таких сеточных фреймворках как Bootstrap, Foundation, Semantic UI и многих других.
Все они включают в себя множество готовых компонентов для быстрой разработки интерфейсов. Но самое интересное, ради чего их используют большинство разработчиков, это их сеточная структура, которая позволяет быстро создавать адаптивные макеты.
В этом видео мы рассмотрим принцип использования колоночной сетки для верстки ваших сайтов на примере Bootstrap.
0:00 - CSS фреймворки
0:43 - Принцип колоночной сетки
1:34 - Рабочее окружение (Gulp, Sass)
2:39 - Базовые свойства
3:02 - Подключение Bootstrap 5 (CDN, NPM)
3:54 - Компоненты сетки, контейнер
4:13 - Ряды сетки
4:33 - Колонки сетки
5:32 - Элементы макеты и желоба сетки
6:55 - Гибкие колонки с классом ".col"
7:24 - Фиксированные колонки
8:20 - Реализация сетки макета
8:28 - Шапка сайта
9:20 - Совмещение фиксированных и гибких колонок
9:50 - Ряд с 2 элементами по 6 колонок
10:37 - Ряд из 6 колонок по 2 колонки
11:22 - Ряд из 3 элементов по 4 колонки
12:20 - Ряд из 4 элементов по 3 колонки
13:08 - Подвал сайта
13:53 - Подведение итогов
14:15 - Про продолжение серии
14:41 - Ссылки на социальные сети
Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.
Также жду вас на моем сайте codequest.ru
Здесь вы найдете подробные интерактивные курсы по веб-разработке.
25 июн 2024
