Как устроена bootstrap 4 сетка / Главная ошибка дизайнеров / Модульная сетка

Сегодня я хочу вам рассказать как устроена bootstrap grid. Дело в том, что лишь единицы дизайнеров знают как ДЕЙСТВИТЕЛЬНО работает эта сетка в вебе. Остальные же пользуются правилами, которые действительны для полиграфии, поскольку там нет динамических элементов. В web разработке же это несколько сложнее и тут нужно понимать так же техническую составляющую для корректной отрисовки, чтобы потом получалась правильная верстка.
======================================
Плагин, который написал я. Давно -)
github.com/De-...
======================================
модульная сетка в вебе отличатся от сетки в полиграфии, но как только вы поймёте принцип работы, вам не составит труда рисовать и разрабатывать макеты с сеткой. И уже будет абсолютно неважно какой css фреймворк использовать, будь то Bulma, Tailwind CSS, Semantic UI, Foundation или Materialize CSS. В сегодняшнем видео я сделаю небольшой набросок дизайна в photoshop, а потом покажу пример кода на bootstrap 4 tutorial.

[@prosto_razrabotka]

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

[@ИгнатШпорт]

ну неужели кто-то правильно объяснил как это правильно ОГРОМНОЕ ВАМ СПАСИБО!!!

[@dominus6690]

В какой-то момент захотелось шевелюру джокера с футболки, прифотошопить Виталию)

[@prosto_razrabotka]

Не сдерживайте себя -)

[@DioNis-eblix]

18 мин воды, инфы на две минуты

[@alexander.grinev]

@@DioNis-eblix 18 минут пролетели как две)

[@Johnsson25]

Спасибо большое! Я таки не понял: а почему справа обязательно нужен вложенный контейнер с 12 колонками? В каких случаях можно не вкладывать в макет еще один целый контейнер - какой именно фактор влияет на эту необходимость? (кроме того, что показывает верстка, это мы да, видим))

[@Umitka]

Там текст не попадает ровно в изначальные колонки)

[@t3m8ch79]

Спасибо за видео. Благодаря нему я сделал себе специальную формулу, по которой я Adobe XD могу построить сетку для Bootstrap 4 на разных экранах: (a - b + c)/2, где a - ширина экрана, b - ширина *контейнера* (не сетки, для bootstrap = 1140px при Full HD), c - сумма отступов *двух колонок* (для Bootstrap = 30px). Получается значение, которое необходимо ввести в поле _linked left/right margins_ и установить сумму отступов двух колонок в поле Gutter Width и количество колонок (для bootstrap = 12). Получается ширина колонки 65px для Bootstrap при Full HD.

[@prosto_razrabotka]

Я в XD не работал, но если вы смогли это туда так интегрировать, то это Круто! Приятно знать, что полученные знания находят применение.

[@t3m8ch79]

@@prosto_razrabotka Жаль, что не работали, классная штука и единственная на Win10, в которой все анимации плавные и кайфовые. Впрочем, главное - не инструмент, а руки. Возможно, напишу плагин для XD, схожий с вашим для Sketch.

[@prosto_razrabotka]

@@t3m8ch79 Я его не запатентовывал, так что дерзайте -)

[@Aleksei_Prit4er]

С дизайнерской точки зрения я вижу: В создании дизайн макета с сеткой человек не разбирается, Бутстрап софт кривой и создает в новом контейнере новую сетку и в данном случае делит 5 на 12 и сетка сыпется, В контейнере созданным под размер 5 колонок автор предлагает создать 12 колонок в макете, а это получается "5 / 12 = 0,41666666666" и сетка сразу сыпется. (Ближайших выход к такой логике это изменить в самом контейнере сетку на 5 колонок с гаттером в 30( по 15 с каждой стороны) внутри софта для каждого контейнера самому(если софт не позволяет, пишите плагин на него), а не плодить по 12 колонок каждый раз) Вывод смешной: Давайте тратить время и писать плагины для дизов, КОГДА проблема с софтом идет со стороны верстальщика и сетка сыпется у него, И тут можно задаться вопросом, а не проще тогда просто написать плагин на софт, чтобы новые контейнеры не создавали новую сетку под себя? Каждый решает для себя сам.

[@prosto_razrabotka]

Алексей, простите, но вы несёте какой-то бред... плагины, софт... Вы видите ваш дизайн в одной плоскости, словно предметы, лежащие на столе. В верстке все несколько сложнее - там есть вложенность. И каждый новый уровень вложенности уже имеет свой контекст, свою ширину.

[@Aleksei_Prit4er]

@@prosto_razrabotka Вы не упоминаете существует ли возможность изменять этот контекст внутри верстки, и не рассуждаете о такой возможности, вы просто говорите, что проблема с тем что у вас плодится новая сетка(контекст) в каждой вложенности, это вообще не проблема верстальщика, а проблема дизайнера, смешно просто.

[@prosto_razrabotka]

Я не говорил, что появление вложенной сетки - проблема. То, что это так работает - данность. И дизайнер при проектировании системы должен принимать это во внимание. Лично вы, можете соглашаться, можете не соглашаться с этим...

[@Aleksei_Prit4er]

@@prosto_razrabotka В названии видео упоминается фраза "Главная ошибка дизайнеров ", когда на деле это просто причина для ленивого верстальщика не писать стили, а жаловаться на то, что дизайнер не создал сетку и теперь о боже придется не прописывать положение по колонкам, а смотреть расстояние между элементами.

[@valeriiia_because]

Вот именно! Если дизайнер еще для каждого отдельного блока будет включать сетку на 12 колонок и еще и под неё будет всё подстраивать, то это рехнуться можно. Основная сетка и дополнительная тупо не совпадают. Бред короче полный.

[@GANGST1ER]

Мораль - у каждой колонки своя собственная сетка.

[@12389441]

Можешь записать как в Figme делать это разбитие сетки на сетку)?

[@prosta_tak]

В Фигме для каждого Frame (гор. клавиша F) можно справа в разделе Design задавать Layout Grid. Соответственно каждый вложенный блок, где нужно разметить новую сетку, нужно делать с помощью Frame.

[@forest_chaos_nymph]

@@prosta_tak если простраиваем авто-лейаут, уже нельзя запилить грид. Вот такой нюанс есть

[@sofiyaluchina2312]

@@forest_chaos_nymph о благдарю, добрый человек, а то сделала "сетку в сетке" и мне сказали что так нежелательно делать, а почему и как по-другому не объяснили

[@evgenmarfel]

figma умеет создавать вложенную систему сеток при этом задавая жесткие геттеры. в общем , фигма - самое то, что нужно.

[@tamarashvets272]

Спасибо за полезный ролик! Только начинаю изучать Bootstrap и ваше видео как нельзя вовремя 😎

[@prosto_razrabotka]

Я старался -)

[@ekobilske1368]

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

[@zerdox4]

бутстрап не надо, хватает смартгрид сетки

[@othersidesss1]

Виталий, почему перестал делать контент??????? качественные вещи делал

[@Шварц-п3е]

Всё очень доступно объясняете. У вас отлично получается, продолжайте и не бросайте это дело. Ведь нам , вашим ютуб-ученикам будет худо без вас. Спасибо!

[@stasgosha]

Мне кажется, или использовать бутстрап для верстки и дизайна внутренних блоков - это не очень правильно? Нужно стремиться к тому, чтобы было разделение сетки и блоков контента. Это нужно для того, чтобы компоненты можно было менять местами и при этом они никак не зависели от сетки. Блок новостей при таком подходе будет сверстан без использования бутстрапа. Например, через flexbox - тогда у картинки будет фиксированная ширина, а контент - занимать остальное доступное место

[@prosto_razrabotka]

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

[@-web2378]

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

[@stasgosha]

@@-web2378 полностью согласен)

[@stasgosha]

@@prosto_razrabotka Да, нужно смотреть для каждого компонента отдельно Кстати, спасибо за видео)

[@АлександрК-ш]

Здравствуйте. Для Bootstrap 5 то же самое, если ориентироваться на этот урок?

[@romnytandem]

Про это уже сказано пересказано почему не показывать вёрстку по типу dribbble.com/shots/5681987-Concrete-Store видео kzbin.info/www/bejne/Z6WUgJ9un6eSqdE и тд

[@gmikay]

Хорошая подача и интересный материал, спасибо

[@berger_king_govno]

Как рассказать текст в две строки за 17 минут

[@krutoyinfo]

Соберем чуваку на волосы

[@szCerber]

Дико извиняюсь, но можно как то на рабочих примерах объяснить, а нафига этот велосипед - бутсрап, когда расписать настройки сетки, будь то флекс или грид не так уж и сложно на живую, не пользуясь "заготовками" ? Я сейчас не понтую, что знаю свойства и принцип работы сеток, а реально интересуюсь, так как вполне из за неопытности могу упускать смысл этого "фреймворка" в плане применения его к сеткам ?

[@prosto_razrabotka]

Смотрите видос на канале - что лучше бутстрап или флексбокс

[@btctrade]

рубрика: Лысый усложняет приятная подача, лайк

[@Umitka]

Со второго раза дошло😂😅

[@abazhutov]

на скорости 2х классно зашло

[@ГеннадийКазанцев-й1ю]

После просмотра роликов о flexbox задаюсь вопросом: "А нужен ли bootstrap?" :)

[@mirashj1651]

Аналогично

[@-web2378]

если ток формы оттуда тырить и alert

[@inzoddex8312]

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

[@-web2378]

inzoddex кто мешает увеличивать цену заказа? Пора уже явно дать знать людям, что it сфера - это не горячие пирожки

[@inzoddex8312]

@@-web2378 в современном мире выигрывает не тот, кто делает хорошо, а тот, кто может решить проблему быстро и как можно дешевле. Это мы как разработчики понимаем, что лучше, а что нет. Но юзеру пофигу, ему нужно решить проблему, а как мы её решим его не волнует.

[@eteeetee1464]

Только начал использовать bootstrap[. Вовремя посмотрел)) спасибо))

[@КостяКреон]

...и как лучше создавать сетку, через Grid, Flex, или Flow? я смотрю, что ты всегда советуешь пользоваться ФЛЕКСОМ.

[@prosto_razrabotka]

Посмотрите одно из недавних видео на канале - Что лучше: Bootstrap или Flexbox? Станет понятней.

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

@@prosto_razrabotka Извините,а где оно конкретно?

[@danielkhachaturian]

Слаееееее

[@vallery1395]

Спасибо огромное!!! Про это мало где рассказывают )))))

[@Dmitry-kr1mr]

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

[@prosto_razrabotka]

Будет -)

[@melomalo1682]

Виталий подскажите пожалуйста почему тут у блоков свободные пространства prnt.sc/smr5tv kzbin.info/www/bejne/h3_Km2mabtOnpK8 Потому что в макете закрашено белым данные полосы?

[@invisibleworld3307]

Если я правильно понял, с помощью Flexboxа можно настраивать колонки вручную, а с помощью сетки Bootstrap, готовые настроенные колонки можно запросить на их сайте?

[@DiHandUkr]

молодец, хоть ктото это озвучил внятно ) кстати если использовать обводку внутрь на коолонках сетки то при масштабировании ширина так и будет по 15 оставаться, при любых трансформациях

[@prosto_razrabotka]

Круто! Буду знать, спасибо за информацию.

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

Я тоже не знал ; - )

[@solomon8540]

Чувак, зачем ты бреешь себя до состояния яйца?

[@englishlanguage1281]

Неужели есть такие кто не понимает изначально, то о чем рассказано в этом видео??? Тяжело будет такому человеку вообще освоить верстку, я уже не говорю о JS и PHP. Я ни чего плохого сказать не хочу, это только мое мнение.

[@Johnsson25]

Самое важное в этом ролике - пояснить, чем отличается этот случай от того, где разбиение на 7, 2 и 3 будет верным. Потому что картинка + текст? Или потому что по вертикали у новостей может быть другая высота, а значит, она уже не вдходит в контейнер на 12 вместе с левой картинкой?

[@ЕвгенийСкореев]

Умоляю, разбери masonry bootstrap в сочетании с imagefill.js

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

По идее сетка второго уровня должна иметь меньший паддинг для отступов или нет?

[@zubziro5566]

Нужно больше - bootstrapааа... верстка боль

[@Harrogath12]

Да в принципе ж всегда интуитивно на глаз ясно где 5 к 7и или 3 к 9ти и т.п. какие внутренние сетки..

[@zingertube361]

Ничего не понял, фигово объяснил....

[@АлексейФамусов]

Отлично объяснил, спасибо) всё доходчиво и на примере! Скажи, а какую цель ты преследуешь, обучая нас? Сделать мир веб-дизайна лучше?)

[@denissakuta730]

Виталий добрый день, создавая БЛОКИ, с чем лучше работать в 2020, что самое актуальное на сегодняшний день, более простое с точки зрения написания и не тяжелое для загрузки сайта в последующем...? ..столько информации....Flex///Grid/////.

[@prosto_razrabotka]

Вот эту информацию нужно читать внимательней, ибо флекс, грид и фреймфорк (например бутстрап) решают разные задачи

[@yadka]

огромное спасибо за объяснение

[@Алексей-ч5б1б]

До бутстрапа еще не добрался, но лайк однозначно! :)

[@VTRSony]

Расскажите, пожалуйста, про шаблонизаторы

[@tovjukov]

А, можно ссылочку на PSD файлик с вашей сеткой?

[@lega-lise]

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

[@prosto_razrabotka]

Одна из первых вещей о которых я говорю в видео по бутстрап - гаттер неизменный! Если не в этом, то роликом ранее

[@ОлегАрбузов-ч2ц]

А вместо div при использовании bootstrap можно использовать семантические теги? section'ы, header'ы и проч.?

[@prosto_razrabotka]

Канеш

[@s1ck370]

Как быть с шириной колонок? В фигме можно во фреймах включать сетки, а фреймы в свою очередь вкладывать друг в друга. Но допустим я взял аналогичную вашей ситуацию, и хочу сделать для себя такую же сетку, как мне понять, какие именно настройки я должен задать, помимо гаттера в 15пт?

[@prosta_tak]

В Layout Grid можно указать Type колонки, как Stretch, а ширина тогда будет задаваться автоматически. При этом кол-во колонок, Gutter и Margin вписываете конкретные.

[@svoysite]

А почему бы не поделить на 3 блока. На 7, 2 и 3 колонки

[@prosto_razrabotka]

Потому что с точки зрения компоновки это неверно. Блок новостей - это отдельная сущность

[@Johnsson25]

@@prosto_razrabotka а почему? Почему слева не отдельная?

[@lega-lise]

так если делать вторую сетку на 12 там ведь уже не получится расстояние по 15рх тк по сути она ресайзнится? афтор говорит что нет.

[@gedonik]

Спасибо за видео. Если не сложно, сделай обзор оборудования на котором работаешь. Железо, периферия, софт.

[@prodrammhuman6712]

Отличный канал и контент, русский youtube ждал наверно его)) Есть пожелание, было бы отлично добавить легкую музыку на фон, чтобы так глухо не было

[@prosto_razrabotka]

Фоновая мелодия тут есть, просто уровень такой, что не отвлекает от голоса -)

[@MaxYanov]

Вот как бы выглядел программист Евгений Кошевой в очках. А вообще автор красавчик, всё чётко, понятно, даже кто знает кайфанул от видео. Спасибо !

[@artursveshnikov7668]

Кошевой и рядом не валялся. Это супер мозг фронтендовых наук. И объясняет лучше всех на ютубе.

[@user-teddy7]

Спасибо! Все ясно и понятно. Если бы все так объясняли. Удачи в работе!

[@osnapitzlenalove]

А можно дизайн в принципе делать не по сетке? Или какие-то отдельные элементы? Или для разработки это будет сущий ад?)

[@prosto_razrabotka]

Конечно можно. Всё зависит от типа проекта, который вы делаете.

[@kitsune_424]

спасибо

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

Виталий, большое спасибо!!!

[@ihabia]

А что если макет сделан не по сетке бутстрап? Нужно ли делать на бутстрапе или проще медиазапросами?

[@prosto_razrabotka]

Так то бутстрап тоже перестраивает сетку медиа запросами -) Но в вашем случае - в бутстрапе нет необходимости.

[@gabik.2155]

Молодец!!! Всё чётко и без воды! Даже я поняла.)) Девочка Оля, 51 годик,

[@prosto_razrabotka]

Благодарю -)

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

Полностью с Олькой согласен, и я тоже начинаю постепенно начинаю понимать, а мне вообще только 45 годиков ; - )

[@gabik.2155]

👍🏻🤘😉

[@безназвание-ю7ф]

Стоило тебя увидеть и сразу раз хотелось вообще верстать на чем либо.

[@prosto_razrabotka]

Только раз хотелось? Два не хотелось?)

[@ЕвгенийВладимирович-р6е]

Толково

[@DirasaMidrar]

Молодей! Светлая твоя голова!

[@invisibleworld3307]

Можно ли Bootstrap сочетать с другими сетками? Например с Skeleton или Foundation.

[@prosto_razrabotka]

Зачем?

[@invisibleworld3307]

Просто: разработка, Я наверно не до конца понял, как работают сетки. Я знаю только, что сетки представляют собой шаблоны с разным количеством колонок (12,32,64) по горизонтали или вертикали, которые скачиваются с сервера офиц. сайта, а вот работать с ними в HTML и CSS пока не научился, т.е. нет практики)

[@Restoran-Video]

Хорошее объяснение, спасибо!

[@akmiable]

Спасибо за bootstrap !!!

[@fantast2568]

спасибо

[@dakaelmakarov7283]

Спасибо

[@iGotton]

+

[@dmitrijponkin]

Спасибо!!!

[@АлексейКоган-ц9г]

Спасибо за уроки!

[@alexandrp595]

Плагин работает, пользуюсь уже года 3 ) очень удобный спасибо!

[@prosto_razrabotka]

О, замечательно! Спасибо -)

[@ДенисМальцев-м8м]

Ура новый урок)) Спасибо)) я ждал(=😊

[@prosto_razrabotka]

Отлично!

[@firewatermoonsun]

Спасибо!

[@daymaker_trading]

Мега круто, спасибо!

[@prosto_razrabotka]

Благодарю

[@zloy_ax8496]

+

[@prosto_razrabotka]

+ )

[@TheMariaChu]

Доступно. Спасибо!!

[@prosto_razrabotka]

Я рад -)

[@Vladikslavik]

Покажите, пожалуйста, как делать в бутстрапе наложение слоёв с медиа и дальнейшим перестроением по брейкпоинтам.

[@-web2378]

поконкретней если можно

[@Vladikslavik]

Нукат - web Есть два блока 1) картинка 2) блок с текстом, частично заходящий на неё. Можно ли для реализации такой задачи пользоваться бутстрапом или всё же просто ограничиться флексом? Не забываем про дальнейшие медиа-запросы.

[@-web2378]

тут ручками) через transform: translateY поднять текст на картинку, а в определенной точке сбросить значение в ноль. Если я правильно понял ситуацию. Отдельных классов, позволяющих наезжать тексту на картинку в Bootstrap нету

[@Vladikslavik]

@@-web2378 Так правильно ли будет распихивать такие блоки по колонкам?

[@-web2378]

@@Vladikslavik как тебе удобно так и делай) можно вообще в один блок это пихнуть, и там уже подгонять текст на изображение, нежели делить их на два блока

[@medoman1833]

Это проблема номер один при разборе полетов между версткой и дизайном. Сколько раз просил дизайнеров делать правильно, сколько раз объяснял, все без толку. Не могут они понять этого. - Я же нарисовал(а), все красиво, заказчику нравится!!! А потом начинается TETRIS с падингами и маржинами, тьфу, задолбало! Пожалуйста, сделай еще один ролик на эту тему с конкретным примером, взяли дизайн и верстаем! И обязательно мобильную версию зацепи, а то не понимают они как .col-md-5 превращается в .col-12 на мобилке)

[@valeriiia_because]

ты понимаешь что маленькая сетка из 12 колонок не попадает в ширину 5 колоночного блока основной сетки, они просто не совпадают и тогда получается полный хаос в макете. если ты не понимаешь о чем я, то скачай фигму, создай фрейм на 1440 шириной к примеру, сделай 12 колонок, потом сделай блок на 5 колонок справа например и в нём уже создай еще одну 12 колоночную сетку и просто посмотри как основную и второстепенную сетку невозможно подогнать друг под друга. если плясать именно под эту маленькую сетку и выстраивать всё по ней внутри, то макет начинает выглядеть крайне хуёво, полная асимметрия и хаос, пользователь в ужасе съебывает с сайта. я как дизайнер говорю, что ни один дизайнер не будет никогда не будет так делать, это нереально, тогда сроки выполнения заказа выростут раз в 10 и ценник соответственно тоже! ну и в принципе это нереально, по этому не обсуждается.

[@medoman1833]

@@valeriiia_because 4 года прошло. Уже и пандемия случилась и всякие СВО. Попробуем вспомнить что ж там было с этим бутстрапом. Ах, да, если стоит задача сделать дизайн и при этом использовать бутстрап, то надо дизайн вгонять в рамки сетки бутстрап. Ну и как бы col-md под экраны 720px, хотите чтобы в мобилке не сильно плыл дизайн, то col-sm или col-xs никто не отменял, а иначе будет стандартная сетка col-12

[@КостяКреон]

Было интересно, но есть вопрос: Что поддерживается в Bootstrap4 Grid, Flex, или Flow? ....я не совсем понимаю, просто хотелось бы разобраться.

[@prosto_razrabotka]

Что такое Flow?

[@beaipi5360]

@@prosto_razrabotka Может Float имеет в виду? :)

[@invisibleworld3307]

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