#1 Сетка Bootstrap 5 для начинающих | Быстрая верстка сайта при помощи колоночной сетки
HTML-код
- Опубликовано: 1 авг 2024
- Исходники к видео:
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
Здесь вы найдете подробные интерактивные курсы по веб-разработке.
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 - Ссылки на социальные сети
Большущее Вам спасибо!
Как приятно слушать, когда грамотная речь
Как оказалось, Bootstrap не страшен, если его объясняют подобным образом))
Это конечно лайк за огромную работу и компановку информации!
Спасибо за поддержку!
Старался показать все простым языком. Посмотрите и другие видео из этой серии. В Bootstrap действительно нет ничего страшного =)
@@CodeQuestRu А где твой файл main.css? Почему его нет в иерархии, у меня он создаётся при каждом сохранении
@@CodeQuestRuф. Юан
Отличная подача материала, жду продолжения.
Благодарю за поддержку!
Раз интересно, то обязательно запишу =)
Смотрел много видео и ни как не мог понять до конца и тут посмотрел твоё и сразу все понял, спасибо большое. Ты очень классно и доступно объясняешь.
Супер, значит не зря делал)
Реально супер! Спасибо. Все очень доступно объяснил для начинающих
Спасибо, очень информативно и самое главное без воды как любят другие блогеры!
Спасибо за поддержку!
Всегда стараюсь продумать сценарий заранее и оставить только самое нужно. Видимо не зря =)
Спасибо за хорошую визуализацию и подачу. Очень полезное видео.
Жду продолжения!
Спасибо!
Если действительно интересно, значит сделаем =)
Благодарю автор, хорошо всё разжевал , в пятнадцатеминутке информации очень много, полезно , вкусно.
Рад, что видео пригодилось =)
Реально всё по делу, без воды спасибо 😉
Рад, что помог =)
Спасибо вам большое, я никак не мог понять данный урок по сеткам в платном курсе !
P. S. Ещё раз огромное вам спасибо !!!!
Спасибо, очень просто и полезно
Ролик в топ) Спасибо))
Спасибо, друг!
Надеюсь видео было полезным =)
Спасибо автору за отличное видео, с помощью которого удалось разобраться в рабочем новом проекте
Очень рад, что видео пригодилось =)
Спасибо большое за видео! Все очень понятно и познавательно!!!
Супер, рад, что понравилось =)
Привет.
Очень крутое изложение материала, спасибо.
спасибо большое за видео, мне было очень полезно! Наконец-то поняла, что есть что
Спасибо! Очень помогли👍
Самое приятное, когда делал что-то не зря и принес пользу, спасибо!
Спасибо, очень понятие видео
Bootstrap 5 для начинающих и использование в ролике scss и gulp. Браво, я просто похлопаю ..
Все на очень базовом уровне и восприятию Bootstrap не мешает
@@CodeQuestRu когда ввожу npm install bootstrap,выдает ошибку npm is not recognized.Понимаю что ошибка из за того что не установлен node js.Но после установки та же ошибка,на видео показано папка node_modules,для чего она и поможет ли мне решить проблему с терминалом?
Жду продолжение, очень интересно как настроить сетку под себя!
Круто, значит сделаем =)
самый полезный гайд по бутстрапу в ру сегменте
Спасибо! Очень приятно такое слышать =)
Бро, ты лучший!!!!
Благодарю =)
Жду продолжение, идеальные уроки
Еще бы по Emmet урок
Приятно получать такой отклик =)
Продолжение по Bootstrap на подходе!
Emmet помечу в заметках, не могу обещать в ближайшее время, но сделаем =)
Спасибо. Подписался.
актуально!
Отличное видео и подача информации. Жду продолжения. Лайк и подписка.
Спасибо! Вы посмотрели все три видео из этой серии?
Скоро будет четвертое =)
@@CodeQuestRu 2 из 3. Я стажёр. И как раз макет на бутсрапе) Вы меня спасли)
@@vladko9623 О, я рад это слышать =)
Спасибо!
Thank You ✊🏻
Подача материала на уровне, остальное приложится :)
Подробнее про Gulp, пожалуйста!
Успехов в начинаниях
Спасибо!
Gulp обязательно рассмотрю, но позже, есть пара идей =)
@@CodeQuestRu Ждем продолжения)
да, мы хотим видео по gulp))
Хорошо, через несколько запланированных роликов постараюсь снять =)
good job!
Изначально планировал записать видео только по написанию своей универсальной сетки, но затем решил начать с начала и все это переросло в серию =)
А как часто вы используете Bootstrap или другие колоночные системы в своих проектах?
почти никогда )
а так полезно знать, чтоб ковыряясь в чужом коде мог бы ориентироваться что да как
да, как минимум понимать принцип довольно важно =)
Спасибо
не не не не не чувак это реально круто!!!😎😎😎
Спасибо)
жду видос про gulp!
Хорошо, обязательно запишу =)
Просто бог
Спасибо =)
Благодарю
Рад, что было полезно =)
Здравствуйте! Очень интересно увидеть видео про gulp сборку, ваши советы и рекомендации
Хорошо! Через несколько запланированных видео запишу про Gulp, постараюсь все объяснить простым языком =)
@@CodeQuestRu Спасибо! Интересны подходы (модули, объект path для путей в тасках и тд) , какие плагины выбрать для задач по минификации, сборке спрайтов, применение postCss , выбор пакетного менеджера( yarn \ npm bower ) ... возможно часть вопросов не много выходит за рамки gulp, но они были бы очень интересны! Еще раз спасибо Вам за труд! Удачи
@@nikolai4100 Спасибо за интересный вопрос и поддержку!
Сперва нужно будет начать с основ, а там посмотрим. Может получится небольшая серия =)
Двигаем канал
Было бы круто =)
было бы интересно посмотреть видео о gulp
Спасибо, поставил себе заметку =)
Я тоже за gulp)
норм. будем смотреть! Успехов каналу, ато всякие там "по жизни" не буду показывать пальцем за долбали ))))
Спасибо!
На какие темы интересны были бы видео?
@@CodeQuestRu Ну мне бы в JS въехать! В тот который правильный и актуальный, я уже запутался с этим js =))
А по Semantic UI планируется видосы? или Semantic не особо популярный?
@@user-lb3wo7xe4s на российском рынке он точно не такой популярный, как Bootstrap, хотя это всего лишь инструмент. Каким удобней получать конечный результат, тем и пользуйся. Если руки дойдут, посмотрю что про него сказать =)
По JS будут уроки, но позже. Так что оставайся. Надеюсь, мои видео чем-то помогут!
Ребята, привет,молодцы! Спасибо за видос-лайкнул, подписался, можно ли обещанный материал по gulp 'у? Очень надо ,заранее спасибо!
Курс по Gulp уже есть на канале, смотрите с удовольствием =)
Добрый вечер сделать видео как сверстать макет магазина на Bootstrap 5
Спасибо очень хорошо объясняете. А можно другое число колонок?
Конечно, в третьем видео я показал, как можно настроить Bootstrap под себя. Смотрите на канале =)
Про gulp тоже от хотелось бы глянуть)
Хорошо, добавлю себе заметку!
Спасибо =)
@@CodeQuestRu если устанавливать bootstrap через npm то в проект войдут только используемые классы из bootstrap? Или как? Не совсем понял.
В проект у нас скачивается весь Bootstrap, но подключаем мы только нужные нам файлы, которые и войдут в конечный CSS
Спасибо за урок. Не могли бы Вы записать пошаговое установку , загрузку и подключение bootstrap. Извините но я новичок в этом деле. Хотелось бы освоить эту тему. Заранее благодарю!!!
Можете подробнее описать, в чем у вас сложность? Если вы хотите подключить Bootstrap целиком, то просто скопируйте CDN-ссылки и подключите в вашу секцию head. После этого вы сможете пользоваться всеми его возможностями =)
@@CodeQuestRu добрый вечер!!! Честно говоря, я даже не знаю в чем тут дело. Я подключил bootstrap, как и было показано в Вашем уроке. В Редакторе кода в CSS не получается изменять параметры верстки... Ну как-то вот так ..... Яснее не могу объяснить. Наверное я рановато начал изучать bootstrap... Что Вы мне посоветуете? Заранее благодарен за ответ!!!
Автор объясняет очень доходчиво.
У меня проблема такая: когда все это верстаю, масштаб в браузере больше. Все элементы выглядят гигантскими. Приходится скролить вниз. Пробовал на других браузерах открывать, такая же фигня. Не подскажите как проблему решить? Может где то в настройках масштаб изменить?
Сложно так сказать, что у вас происходит с масштабом. Нужно смотреть
А можете сказать как вы сделали такой vs code
А что конкретно?
У меня стоит тема Atom One Dark Theme и иконки vscode-icons =)
Добрый день! Не совсем понятно если нужно сделать расстояние между колонками то можно использовать gap а не дополнительную структуру или я не совсем что то понимаю...
К сожалению сетка Bootstrap работает следующим образом, расстояние между элементами достигается за счет padding к колонок =)
Там ещё есть заголовки а значит отступы снизу уже будут не такие, нужно учитывать заголовки я правильно понимаю?
да, здесь показана сетка без учета контента самого макета, просто взял его расположение блоков для примера
спасибо! не имея знаний о вёрстке и html я начал рисовать макеты своих сайтов в Adobe XD впервые. до этого примитивно отрисовывал макеты в Пайнте и передавал их разработчикам... но всё, решил учить более профессиональные программы т.к. имеется несколько проектов, которые сложно реализовать именно из-за верстальщиков, которые редко хотят заморачиваться и идти строго по твоим макетам.... отсюда начальный вопрос - какие конкретно размеры по ширине сайта должны быть, если работаешь на различных фреймворках либо в самописном CSS? от Бутстрапа и далее... например я месяц готовил макет на 1280 px, отрисовал почти все страницы, но веб-разработчик у которого буду заказывать этот сайт проверив работу сообщил что надо будет всё переделывать на 1140 или 1320 Px т.к. он верстает на Bootstrap...
По умолчанию, как вы и сказали, контентная часть в Bootstrap имеет размеры 1140px и 1320px. Если вы рисуете именно под Bootstrap сетку, то используйте их. Они выбраны, потому что кратны 12 - числу колонок в сетке.
С другой стороны, это все можно легко изменить и настроить под себя, как число колонок, так и ширину контейнера. Тут все уже зависит от опыта разработчика. В этой серии я покажу, как можно это сделать =)
Ну а верстальщики, которые не идут по макету, вызывают вопросы. Bootstrap лишь инструмент, не нужно подгонять под него все проекты. Нет никаких проблем сверстать нестандартный сайт без сетки. Если вы работаете именно в паре с верстальщиком, то просто найдите решение, которое будет удобно обеим сторонам.
@@CodeQuestRu благодарю за подробный ответ! страниц 30 отрисовано, попробую значит убедить верстальщика не выёживаться) иначе если не получится придётся перерисовывать всё под колонны, а это я изначально не учёл
@@HighEndMTL В крайнем случае попробуйте найти нормального верстальщика =)
Супер видос. А можно глупый ❓Сетка из 12 колонок в ps реализуется плагином каким то? Там же насколько помню клеточная сетка в инструментах обычная, а не такая гламур как в клипе.
Нет, это просто заранее заготовленный слой =)
Ясно, спасибо🙏
а как писать в несколько строк одновременно можете подсказать
заранее спасибо
Это называется "множественные курсоры". В VsCode просто зажимаете Alt и ставите курсоры в нескольких местах =)
А что в папке НОД модульс?
Пакеты
а что на счёт jQuery в bootstrap 5? Так же писать скрипты? Тоже самое подключать? Или как вообще?
Bootstrap 5 прекрасно работает без jQuery, так что и вам уже пора от него отказаться =)
@@CodeQuestRu я про то чтоб писать скрипты, или уже пора переходить на более современные вещи, типа vue, или livewire?
@@Mr.Capone- vue, react или нативный javascript =)
@@CodeQuestRu спасибо за справку 🍻
Подскажите, что за программа, которая по скрину размечает страницу как таблицу?
Немного не понял, про какой момент вы имеет ввиду?
@@CodeQuestRu в этой программе вы начинаете работать с 0:43 в видео
Это просто макет сайта открытый в Photoshop. Он ничего не размечает, я заранее подготовил сетку для демонстрации и просто наложил поверх макета =)
@@CodeQuestRu ого, огромная работа. спасибо за видео, кроме бутстрапа, подчеркнула очень полезные фичи для редактора)
@@theearlessowl1859 рад, что смог помочь =)
Какой размер самой колнки бутстрапа????????
Все колонки задаются в процентах, значит 100% подели на 12 (число колонок)
Привет а почему ты пишишь везде минимальную высоту везде колонкам а ни максимальную например или просто высоту?
Ну это стандартная практика, так блоку будет проще адаптироваться под разные устройства. Потому что на мобильных контент будет более вытянут в колонку и высота будет больше, чем на десктопе =)
А можно тоже самое но с флексами???))) пожалуйста покажите
Что конкретно вы имеете ввиду, создание своей сетки на Flexbox или просто использование флексов для верстки адаптивных макетов? =)
@@CodeQuestRu и то и другое))) ну, сетку создавать умею, но с адаптивом прям беда бедой.
Прекрасно понимаю что в медиа выставляются правила row или column иногда wrap если нужен перенос.
Однако, в конечном итоге адаптив у меня на 4к строк получается и поддерживать такой проект сложно. Я бы с удовольствием взглянул бы как вы верстаете адаптивный сайт на флексах. Мне честно даже спросить не у кого.
ПС: отличная подача материала, без пафоса и лишней воды. Подписался.
Так же прошу вас выпустить ролики gulp (хотябы до этапа верстки)
Спасибо за поддержку!
Через один урок в этой серии я как раз буду писать свою адаптивную сетку на Flexbox с полного нуля. Я думаю, что многие принципы можно будет взять оттуда =)
По Gulp и адаптивной верстки макета также планирую уроки, но чуть позже. В голове еще очень много идей, которыми хочется поделиться!
+
Расскажи как ты пишишь непонятно что то пишишь умножаешь и у тебя сразу несколько строк дивов получается
Это сокращения для плагина Emmet, который встроен в редактор VsCode по умолчанию. Обязательный инструмент для любого верстальщика, ускоряет написание разметки в несколько раз. Обязательно попробуй =)
@@CodeQuestRu да он у меня тоже встроен, а как пользоваться И еще погляди я там тебе написал и код скинул,
В сети можно поискать шпаргалки по Emmet. Может как-нибудь потом запишу по этому видео, внесу в планы =)
Исходников нет
Есть, ссылка в описании
Давай уже галп и припроцессор а то хер его знает что делать и как быть, Мог бы показать и без припроцессоров для начала
Так можно и без препроцессора. Я его здесь использую просто чтобы сетку подключить. В стилях я тоже использую только вложенность правил.
Возьмите CDN-ссылку и вставьте в head, и все будет работать как на видео =)
@@CodeQuestRu Ну я просто не морочился Бахнул стартер темплей немогу ни как врубиться в этот бутстрап чтоб именно свой цсс подключить что угодно сделать, а то все туторы кошмарный рассказуют там "учителя" вотут копируем так вставляем ооооо как вот тут уже меню получилось или слайдер иль еще что а толку от таких туторов ноль И сам могу так набацать а толку то:) Но у тебя есть надежда в твоих тутрах что понять можно, Что то вроде и понятно но пока еще не до конца, запутал ты неизвестными припроцессорами. А вот второй тутор там ты медиа запросы пишишь а мне что да как делать я припроцессоры еще не знаю
@@user-pc8vs9jw2x медиа-запросы не относятся к препроцессорами, это стандартные CSS-директивы =)
Стартер норм тема для начала. Дальше просто подключай свой CSS. От препроцессора будет отличаться только то, что я использую вложенность правил:
.block {
color: red;
// медиа-выражение внутри правил
@media(max-width: 1000px) {
color: blue;
}
}
А на простом CSS это будет так:
// сперва основное правило
.block {
color: red;
}
// затем медиа-выражение
@media(max-width: 1000px) {
.block {
color: blue;
}
}
@@CodeQuestRu Спасибо друг давай еще туторов.
@@user-pc8vs9jw2x Хорошо, все будет =)
зачем приплетать в урок другие технологии ? сделай ты по простому, с самого начала исполнил что то не понятное, смысл дальше смотреть(повторять) отпал....
Бывает