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

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

[@СергейАндрухович-о6б]

Большущее Вам спасибо!

[@artikor8071]

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

[@CodeQuestRu]

Спасибо за поддержку! Старался показать все простым языком. Посмотрите и другие видео из этой серии. В Bootstrap действительно нет ничего страшного =)

[@prikuplay]

@@CodeQuestRu А где твой файл main.css? Почему его нет в иерархии, у меня он создаётся при каждом сохранении

[@allbossesr]

@@CodeQuestRuф. Юан

[@laretabatl5934]

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

[@РоккиРоки]

Очень познавательный урок, спасибо большое делайте больше таких уроков

[@viiseventh1157]

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

[@CodeQuestRu]

Супер, значит не зря делал)

[@kostukov75]

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

[@CodeQuestRu]

Благодарю за поддержку! Раз интересно, то обязательно запишу =)

[@fumanchez]

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

[@CodeQuestRu]

Спасибо! Очень приятно такое слышать =)

[@liquidatorofficial3619]

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

[@CodeQuestRu]

Все на очень базовом уровне и восприятию Bootstrap не мешает

[@bake5448]

@@CodeQuestRu когда ввожу npm install bootstrap,выдает ошибку npm is not recognized.Понимаю что ошибка из за того что не установлен node js.Но после установки та же ошибка,на видео показано папка node_modules,для чего она и поможет ли мне решить проблему с терминалом?

[@CodeQuestRu]

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

[@memasizm]

почти никогда ) а так полезно знать, чтоб ковыряясь в чужом коде мог бы ориентироваться что да как

[@CodeQuestRu]

да, как минимум понимать принцип довольно важно =)

[@1world937]

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

[@hightommy7961]

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

[@CodeQuestRu]

Рад, что видео пригодилось =)

[@KhabibulinAnvar]

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

[@stanislavhill9575]

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

[@CodeQuestRu]

Спасибо за поддержку! Всегда стараюсь продумать сценарий заранее и оставить только самое нужно. Видимо не зря =)

[@vladprodan7010]

Жду продолжения!

[@CodeQuestRu]

Спасибо! Если действительно интересно, значит сделаем =)

[@maxmaximus9329]

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

[@АлександрСилков-ф2ж]

зачет..,)) толковая подача.

[@nikson9177]

Жду продолжение, идеальные уроки

[@nikson9177]

Еще бы по Emmet урок

[@CodeQuestRu]

Приятно получать такой отклик =) Продолжение по Bootstrap на подходе!

[@CodeQuestRu]

Emmet помечу в заметках, не могу обещать в ближайшее время, но сделаем =)

[@ЗапасЗнаний]

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

[@CodeQuestRu]

Очень рад, что видео пригодилось =)

[@Point_boiling]

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

[@sanchopance8044]

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

[@CodeQuestRu]

Круто, значит сделаем =)

[@warpscore]

Подача материала на уровне, остальное приложится :) Подробнее про Gulp, пожалуйста! Успехов в начинаниях

[@CodeQuestRu]

Спасибо! Gulp обязательно рассмотрю, но позже, есть пара идей =)

[@warpscore]

@@CodeQuestRu Ждем продолжения)

[@min8132]

Автор объясняет очень доходчиво. У меня проблема такая: когда все это верстаю, масштаб в браузере больше. Все элементы выглядят гигантскими. Приходится скролить вниз. Пробовал на других браузерах открывать, такая же фигня. Не подскажите как проблему решить? Может где то в настройках масштаб изменить?

[@CodeQuestRu]

Сложно так сказать, что у вас происходит с масштабом. Нужно смотреть

[@АртёмДавыдов-ы5э]

Добрый вечер сделать видео как сверстать макет магазина на Bootstrap 5

[@gugabuga250]

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

[@CodeQuestRu]

Рад, что помог =)

[@tyschkevych-n2t]

Ролик в топ) Спасибо))

[@CodeQuestRu]

Спасибо, друг! Надеюсь видео было полезным =)

[@СветланаДемьянова-г2ь]

было бы интересно посмотреть видео о gulp

[@CodeQuestRu]

Спасибо, поставил себе заметку =)

[@-Forever-Young-]

Я тоже за gulp)

[@asrormajnunov6364]

Спасибо за урок. Не могли бы Вы записать пошаговое установку , загрузку и подключение bootstrap. Извините но я новичок в этом деле. Хотелось бы освоить эту тему. Заранее благодарю!!!

[@CodeQuestRu]

Можете подробнее описать, в чем у вас сложность? Если вы хотите подключить Bootstrap целиком, то просто скопируйте CDN-ссылки и подключите в вашу секцию head. После этого вы сможете пользоваться всеми его возможностями =)

[@asrormajnunov6364]

@@CodeQuestRu добрый вечер!!! Честно говоря, я даже не знаю в чем тут дело. Я подключил bootstrap, как и было показано в Вашем уроке. В Редакторе кода в CSS не получается изменять параметры верстки... Ну как-то вот так ..... Яснее не могу объяснить. Наверное я рановато начал изучать bootstrap... Что Вы мне посоветуете? Заранее благодарен за ответ!!!

[@НаталияГлебова-г7ф]

Добрый день! Не совсем понятно если нужно сделать расстояние между колонками то можно использовать gap а не дополнительную структуру или я не совсем что то понимаю...

[@CodeQuestRu]

К сожалению сетка Bootstrap работает следующим образом, расстояние между элементами достигается за счет padding к колонок =)

[@vladko9623]

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

[@CodeQuestRu]

Спасибо! Вы посмотрели все три видео из этой серии? Скоро будет четвертое =)

[@vladko9623]

@@CodeQuestRu 2 из 3. Я стажёр. И как раз макет на бутсрапе) Вы меня спасли)

[@CodeQuestRu]

@@vladko9623 О, я рад это слышать =)

[@oleksiipivniev8433]

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

[@azimjonkarimov5054]

Спасибо, очень понятие видео

[@LudvigAristarhovi4]

Спасибо, очень просто и полезно

[@ruslayder9387]

не не не не не чувак это реально круто!!!😎😎😎

[@CodeQuestRu]

Спасибо)

[@sirenakhakimzyanova2902]

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

[@CodeQuestRu]

Супер, рад, что понравилось =)

[@what1ebaut1us]

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

[@CodeQuestRu]

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

[@HighEndMTL]

спасибо! не имея знаний о вёрстке и html я начал рисовать макеты своих сайтов в Adobe XD впервые. до этого примитивно отрисовывал макеты в Пайнте и передавал их разработчикам... но всё, решил учить более профессиональные программы т.к. имеется несколько проектов, которые сложно реализовать именно из-за верстальщиков, которые редко хотят заморачиваться и идти строго по твоим макетам.... отсюда начальный вопрос - какие конкретно размеры по ширине сайта должны быть, если работаешь на различных фреймворках либо в самописном CSS? от Бутстрапа и далее... например я месяц готовил макет на 1280 px, отрисовал почти все страницы, но веб-разработчик у которого буду заказывать этот сайт проверив работу сообщил что надо будет всё переделывать на 1140 или 1320 Px т.к. он верстает на Bootstrap...

[@CodeQuestRu]

По умолчанию, как вы и сказали, контентная часть в Bootstrap имеет размеры 1140px и 1320px. Если вы рисуете именно под Bootstrap сетку, то используйте их. Они выбраны, потому что кратны 12 - числу колонок в сетке. С другой стороны, это все можно легко изменить и настроить под себя, как число колонок, так и ширину контейнера. Тут все уже зависит от опыта разработчика. В этой серии я покажу, как можно это сделать =) Ну а верстальщики, которые не идут по макету, вызывают вопросы. Bootstrap лишь инструмент, не нужно подгонять под него все проекты. Нет никаких проблем сверстать нестандартный сайт без сетки. Если вы работаете именно в паре с верстальщиком, то просто найдите решение, которое будет удобно обеим сторонам.

[@HighEndMTL]

@@CodeQuestRu благодарю за подробный ответ! страниц 30 отрисовано, попробую значит убедить верстальщика не выёживаться) иначе если не получится придётся перерисовывать всё под колонны, а это я изначально не учёл

[@CodeQuestRu]

@@HighEndMTL В крайнем случае попробуйте найти нормального верстальщика =)

[@ravixlg6253]

Бро, ты лучший!!!!

[@CodeQuestRu]

Благодарю =)

[@kazukishimizu1046]

жду видос про gulp!

[@CodeQuestRu]

Хорошо, обязательно запишу =)

[@bogdownoff]

Супер видос. А можно глупый ❓Сетка из 12 колонок в ps реализуется плагином каким то? Там же насколько помню клеточная сетка в инструментах обычная, а не такая гламур как в клипе.

[@CodeQuestRu]

Нет, это просто заранее заготовленный слой =)

[@bogdownoff]

Ясно, спасибо🙏

[@jirra1998]

Просто бог

[@CodeQuestRu]

Спасибо =)

[@nikolai4100]

Здравствуйте! Очень интересно увидеть видео про gulp сборку, ваши советы и рекомендации

[@CodeQuestRu]

Хорошо! Через несколько запланированных видео запишу про Gulp, постараюсь все объяснить простым языком =)

[@nikolai4100]

@@CodeQuestRu Спасибо! Интересны подходы (модули, объект path для путей в тасках и тд) , какие плагины выбрать для задач по минификации, сборке спрайтов, применение postCss , выбор пакетного менеджера( yarn \ npm bower ) ... возможно часть вопросов не много выходит за рамки gulp, но они были бы очень интересны! Еще раз спасибо Вам за труд! Удачи

[@CodeQuestRu]

@@nikolai4100 Спасибо за интересный вопрос и поддержку! Сперва нужно будет начать с основ, а там посмотрим. Может получится небольшая серия =)

[@user-pc8vs9jw2x]

Привет а почему ты пишишь везде минимальную высоту везде колонкам а ни максимальную например или просто высоту?

[@CodeQuestRu]

Ну это стандартная практика, так блоку будет проще адаптироваться под разные устройства. Потому что на мобильных контент будет более вытянут в колонку и высота будет больше, чем на десктопе =)

[@СергейАндрухович-о6б]

Ребята, привет,молодцы! Спасибо за видос-лайкнул, подписался, можно ли обещанный материал по gulp 'у? Очень надо ,заранее спасибо!

[@CodeQuestRu]

Курс по Gulp уже есть на канале, смотрите с удовольствием =)

[@theearlessowl1859]

Подскажите, что за программа, которая по скрину размечает страницу как таблицу?

[@CodeQuestRu]

Немного не понял, про какой момент вы имеет ввиду?

[@theearlessowl1859]

@@CodeQuestRu в этой программе вы начинаете работать с 0:43 в видео

[@CodeQuestRu]

Это просто макет сайта открытый в Photoshop. Он ничего не размечает, я заранее подготовил сетку для демонстрации и просто наложил поверх макета =)

[@theearlessowl1859]

@@CodeQuestRu ого, огромная работа. спасибо за видео, кроме бутстрапа, подчеркнула очень полезные фичи для редактора)

[@CodeQuestRu]

@@theearlessowl1859 рад, что смог помочь =)

[@tinalee8686]

Спасибо! Очень помогли👍

[@CodeQuestRu]

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

[@Mr.Capone-]

а что на счёт jQuery в bootstrap 5? Так же писать скрипты? Тоже самое подключать? Или как вообще?

[@CodeQuestRu]

Bootstrap 5 прекрасно работает без jQuery, так что и вам уже пора от него отказаться =)

[@Mr.Capone-]

@@CodeQuestRu я про то чтоб писать скрипты, или уже пора переходить на более современные вещи, типа vue, или livewire?

[@CodeQuestRu]

@@Mr.Capone- vue, react или нативный javascript =)

[@Mr.Capone-]

@@CodeQuestRu спасибо за справку 🍻

[@mrshocs5069]

А можете сказать как вы сделали такой vs code

[@CodeQuestRu]

А что конкретно? У меня стоит тема Atom One Dark Theme и иконки vscode-icons =)

[@13rast]

актуально!

[@ВладиславШаманов-и8о]

Спасибо очень хорошо объясняете. А можно другое число колонок?

[@CodeQuestRu]

Конечно, в третьем видео я показал, как можно настроить Bootstrap под себя. Смотрите на канале =)

[@mivalb7979]

Двигаем канал

[@CodeQuestRu]

Было бы круто =)

[@Aleksey-s5t]

Спасибо. Подписался.

[@Vanhes_brawl]

А что в папке НОД модульс?

[@CodeQuestRu]

Пакеты

[@eslibibilli6531]

Какой размер самой колнки бутстрапа????????

[@CodeQuestRu]

Все колонки задаются в процентах, значит 100% подели на 12 (число колонок)

[@OlegStepanenko-v5d]

Спасибо

[@georgeunknown4672]

Thank You ✊🏻

[@Вячеслав-о2н1э]

норм. будем смотреть! Успехов каналу, ато всякие там "по жизни" не буду показывать пальцем за долбали ))))

[@CodeQuestRu]

Спасибо! На какие темы интересны были бы видео?

[@Вячеслав-о2н1э]

@@CodeQuestRu Ну мне бы в JS въехать! В тот который правильный и актуальный, я уже запутался с этим js =)) А по Semantic UI планируется видосы? или Semantic не особо популярный?

[@CodeQuestRu]

@@Вячеслав-о2н1э на российском рынке он точно не такой популярный, как Bootstrap, хотя это всего лишь инструмент. Каким удобней получать конечный результат, тем и пользуйся. Если руки дойдут, посмотрю что про него сказать =) По JS будут уроки, но позже. Так что оставайся. Надеюсь, мои видео чем-то помогут!

[@olzhasdossaibek9095]

good job!

[@АликРейх]

а как писать в несколько строк одновременно можете подсказать заранее спасибо

[@CodeQuestRu]

Это называется "множественные курсоры". В VsCode просто зажимаете Alt и ставите курсоры в нескольких местах =)

[@-Forever-Young-]

Про gulp тоже от хотелось бы глянуть)

[@CodeQuestRu]

Хорошо, добавлю себе заметку! Спасибо =)

[@-Forever-Young-]

@@CodeQuestRu если устанавливать bootstrap через npm то в проект войдут только используемые классы из bootstrap? Или как? Не совсем понял.

[@CodeQuestRu]

В проект у нас скачивается весь Bootstrap, но подключаем мы только нужные нам файлы, которые и войдут в конечный CSS

[@Kasiskasis957]

Спасибо!

[@user-pc8vs9jw2x]

Расскажи как ты пишишь непонятно что то пишишь умножаешь и у тебя сразу несколько строк дивов получается

[@CodeQuestRu]

Это сокращения для плагина Emmet, который встроен в редактор VsCode по умолчанию. Обязательный инструмент для любого верстальщика, ускоряет написание разметки в несколько раз. Обязательно попробуй =)

[@user-pc8vs9jw2x]

@@CodeQuestRu да он у меня тоже встроен, а как пользоваться И еще погляди я там тебе написал и код скинул,

[@CodeQuestRu]

В сети можно поискать шпаргалки по Emmet. Может как-нибудь потом запишу по этому видео, внесу в планы =)

[@veralashko7596]

Благодарю

[@CodeQuestRu]

Рад, что было полезно =)

[@1Nurali]

А можно тоже самое но с флексами???))) пожалуйста покажите

[@CodeQuestRu]

Что конкретно вы имеете ввиду, создание своей сетки на Flexbox или просто использование флексов для верстки адаптивных макетов? =)

[@1Nurali]

@@CodeQuestRu и то и другое))) ну, сетку создавать умею, но с адаптивом прям беда бедой. Прекрасно понимаю что в медиа выставляются правила row или column иногда wrap если нужен перенос. Однако, в конечном итоге адаптив у меня на 4к строк получается и поддерживать такой проект сложно. Я бы с удовольствием взглянул бы как вы верстаете адаптивный сайт на флексах. Мне честно даже спросить не у кого. ПС: отличная подача материала, без пафоса и лишней воды. Подписался. Так же прошу вас выпустить ролики gulp (хотябы до этапа верстки)

[@CodeQuestRu]

Спасибо за поддержку! Через один урок в этой серии я как раз буду писать свою адаптивную сетку на Flexbox с полного нуля. Я думаю, что многие принципы можно будет взять оттуда =) По Gulp и адаптивной верстки макета также планирую уроки, но чуть позже. В голове еще очень много идей, которыми хочется поделиться!

[@niknike5108]

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

[@CodeQuestRu]

Есть, ссылка в описании

[@maksimvlaskin7305]

+

[@user-pc8vs9jw2x]

Давай уже галп и припроцессор а то хер его знает что делать и как быть, Мог бы показать и без припроцессоров для начала

[@CodeQuestRu]

Так можно и без препроцессора. Я его здесь использую просто чтобы сетку подключить. В стилях я тоже использую только вложенность правил. Возьмите CDN-ссылку и вставьте в head, и все будет работать как на видео =)

[@user-pc8vs9jw2x]

@@CodeQuestRu Ну я просто не морочился Бахнул стартер темплей немогу ни как врубиться в этот бутстрап чтоб именно свой цсс подключить что угодно сделать, а то все туторы кошмарный рассказуют там "учителя" вотут копируем так вставляем ооооо как вот тут уже меню получилось или слайдер иль еще что а толку от таких туторов ноль И сам могу так набацать а толку то:) Но у тебя есть надежда в твоих тутрах что понять можно, Что то вроде и понятно но пока еще не до конца, запутал ты неизвестными припроцессорами. А вот второй тутор там ты медиа запросы пишишь а мне что да как делать я припроцессоры еще не знаю

[@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; } }

[@user-pc8vs9jw2x]

@@CodeQuestRu Спасибо друг давай еще туторов.

[@CodeQuestRu]

@@user-pc8vs9jw2x Хорошо, все будет =)

[@НиколайБабиков-ы5ъ]

зачем приплетать в урок другие технологии ? сделай ты по простому, с самого начала исполнил что то не понятное, смысл дальше смотреть(повторять) отпал....

[@CodeQuestRu]

Бывает