#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки

Исходники к видео:

Подписывайся на альтернативные каналы:

Если вы занимаетесь версткой сайтов, то наверняка слышали о таких сеточных фреймворках как 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 - Ссылки на социальные сети

Если тебе интересна данная тематика, подпишись на канал!
Для меня это также станет дополнительным стимулом продолжать свою работу.

Здесь вы найдете подробные интерактивные курсы по веб-разработке.

[CodeQuestRu]

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 - Ссылки на социальные сети

[laretabatl]

Как приятно слушать, когда грамотная речь

[artikor]

Как оказалось, Bootstrap не страшен, если его объясняют подобным образом))
Это конечно лайк за огромную работу и компановку информации!

[KhabibulinAnvar]

Спасибо за хорошую визуализацию и подачу. Очень полезное видео.

[maxmaximus]

Реально супер! Спасибо. Все очень доступно объяснил для начинающих

[kostukov]

Отличная подача материала, жду продолжения.

[world]

Спасибо вам большое, я никак не мог понять данный урок по сеткам в платном курсе !
P. S. Ещё раз огромное вам спасибо !!!!

[viiseventh]

Смотрел много видео и ни как не мог понять до конца и тут посмотрел твоё и сразу все понял, спасибо большое. Ты очень классно и доступно объясняешь.

[stanislavhill]

Спасибо, очень информативно и самое главное без воды как любят другие блогеры!

[hightommy]

Благодарю автор, хорошо всё разжевал, в пятнадцатеминутке информации очень много, полезно, вкусно.

[gugabuga]

Реально всё по делу, без воды спасибо 😉

[fflcetu]

Спасибо автору за отличное видео, с помощью которого удалось разобраться в рабочем новом проекте

[oleksiipivniev]

Привет.
Очень крутое изложение материала, спасибо.

[Point_boiling]

спасибо большое за видео, мне было очень полезно! Наконец-то поняла, что есть что

[sirenakhakimzyanova]

Спасибо большое за видео! Все очень понятно и познавательно!!!

[fumanchez]

самый полезный гайд по бутстрапу в ру сегменте

[liquidatorofficial]

Bootstrap 5 для начинающих и использование в ролике scss и gulp. Браво, я просто похлопаю ..

[sanchopance]

Жду продолжение, очень интересно как настроить сетку под себя!

[vladko]

Отличное видео и подача информации. Жду продолжения. Лайк и подписка.

[CodeQuestRu]

Изначально планировал записать видео только по написанию своей универсальной сетки, но затем решил начать с начала и все это переросло в серию =)
А как часто вы используете Bootstrap или другие колоночные системы в своих проектах?