Не забудьте заглянуть сюда: ❓ Запись на консультацию - 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/
@ИгнатШпорт Жыл бұрын
ну неужели кто-то правильно объяснил как это правильно ОГРОМНОЕ ВАМ СПАСИБО!!!
@vallery1395 Жыл бұрын
Спасибо огромное!!! Про это мало где рассказывают )))))
@tamarashvets2725 жыл бұрын
Спасибо за полезный ролик! Только начинаю изучать Bootstrap и ваше видео как нельзя вовремя 😎
@prosto_razrabotka5 жыл бұрын
Я старался -)
@dominus66905 жыл бұрын
В какой-то момент захотелось шевелюру джокера с футболки, прифотошопить Виталию)
@prosto_razrabotka5 жыл бұрын
Не сдерживайте себя -)
@DioNis-eblix4 жыл бұрын
18 мин воды, инфы на две минуты
@alexander.grinev3 жыл бұрын
@@DioNis-eblix 18 минут пролетели как две)
@Шварц-п3е5 жыл бұрын
Всё очень доступно объясняете. У вас отлично получается, продолжайте и не бросайте это дело. Ведь нам , вашим ютуб-ученикам будет худо без вас. Спасибо!
@eteeetee14643 жыл бұрын
Только начал использовать bootstrap[. Вовремя посмотрел)) спасибо))
@ekobilske13685 жыл бұрын
Ещо не начинал изучать бустрап, сейчас прям увлекся гридами при верстке.
@zerdox45 жыл бұрын
бутстрап не надо, хватает смартгрид сетки
@btctrade4 жыл бұрын
рубрика: Лысый усложняет приятная подача, лайк
@user-teddy74 жыл бұрын
Спасибо! Все ясно и понятно. Если бы все так объясняли. Удачи в работе!
@gmikay4 жыл бұрын
Хорошая подача и интересный материал, спасибо
@MaxYanov4 жыл бұрын
Вот как бы выглядел программист Евгений Кошевой в очках. А вообще автор красавчик, всё чётко, понятно, даже кто знает кайфанул от видео. Спасибо !
@artursveshnikov76682 жыл бұрын
Кошевой и рядом не валялся. Это супер мозг фронтендовых наук. И объясняет лучше всех на ютубе.
@Алексей-ч5б1б5 жыл бұрын
До бутстрапа еще не добрался, но лайк однозначно! :)
@evgenmarfel4 жыл бұрын
figma умеет создавать вложенную систему сеток при этом задавая жесткие геттеры. в общем , фигма - самое то, что нужно.
@DiHandUkr5 жыл бұрын
молодец, хоть ктото это озвучил внятно ) кстати если использовать обводку внутрь на коолонках сетки то при масштабировании ширина так и будет по 15 оставаться, при любых трансформациях
@prosto_razrabotka5 жыл бұрын
Круто! Буду знать, спасибо за информацию.
@СергейАндрухович-р2ж4 жыл бұрын
Я тоже не знал ; - )
@GANGST1ER3 жыл бұрын
Мораль - у каждой колонки своя собственная сетка.
@Dmitry-kr1mr5 жыл бұрын
Дождались бутстрапчика! Ждем продолжения;)
@prosto_razrabotka5 жыл бұрын
Будет -)
@Johnsson254 жыл бұрын
Спасибо большое! Я таки не понял: а почему справа обязательно нужен вложенный контейнер с 12 колонками? В каких случаях можно не вкладывать в макет еще один целый контейнер - какой именно фактор влияет на эту необходимость? (кроме того, что показывает верстка, это мы да, видим))
@Umitka2 жыл бұрын
Там текст не попадает ровно в изначальные колонки)
@gabik.21554 жыл бұрын
Молодец!!! Всё чётко и без воды! Даже я поняла.)) Девочка Оля, 51 годик,
@prosto_razrabotka4 жыл бұрын
Благодарю -)
@СергейАндрухович-р2ж4 жыл бұрын
Полностью с Олькой согласен, и я тоже начинаю постепенно начинаю понимать, а мне вообще только 45 годиков ; - )
@gabik.21554 жыл бұрын
👍🏻🤘😉
@yadka2 жыл бұрын
огромное спасибо за объяснение
@alexandrp5955 жыл бұрын
Плагин работает, пользуюсь уже года 3 ) очень удобный спасибо!
@prosto_razrabotka5 жыл бұрын
О, замечательно! Спасибо -)
@СергейАндрухович-р2ж4 жыл бұрын
Виталий, большое спасибо!!!
@Restoran-Video4 жыл бұрын
Хорошее объяснение, спасибо!
@123894414 жыл бұрын
Можешь записать как в Figme делать это разбитие сетки на сетку)?
@prosta_tak3 жыл бұрын
В Фигме для каждого Frame (гор. клавиша F) можно справа в разделе Design задавать Layout Grid. Соответственно каждый вложенный блок, где нужно разметить новую сетку, нужно делать с помощью Frame.
@forest_chaos_nymph3 жыл бұрын
@@prosta_tak если простраиваем авто-лейаут, уже нельзя запилить грид. Вот такой нюанс есть
@sofiyaluchina23123 жыл бұрын
@@forest_chaos_nymph о благдарю, добрый человек, а то сделала "сетку в сетке" и мне сказали что так нежелательно делать, а почему и как по-другому не объяснили
@безназвание-ю7ф4 жыл бұрын
Стоило тебя увидеть и сразу раз хотелось вообще верстать на чем либо.
@prosto_razrabotka4 жыл бұрын
Только раз хотелось? Два не хотелось?)
@abazhutov5 жыл бұрын
на скорости 2х классно зашло
@stasgosha5 жыл бұрын
Мне кажется, или использовать бутстрап для верстки и дизайна внутренних блоков - это не очень правильно? Нужно стремиться к тому, чтобы было разделение сетки и блоков контента. Это нужно для того, чтобы компоненты можно было менять местами и при этом они никак не зависели от сетки. Блок новостей при таком подходе будет сверстан без использования бутстрапа. Например, через flexbox - тогда у картинки будет фиксированная ширина, а контент - занимать остальное доступное место
@prosto_razrabotka5 жыл бұрын
Мне казалось, что когда я говорил в видео про Новости и про 5 колонок - это Пример... И заставляет мыслить несколько масштабней, а не прямолинейно. Включите хоть немного фантазии и подумайте об интерфейсе, который может состоять не только из Новостей...
@-web23785 жыл бұрын
сетку можно и вручную создать, не так это уж и сложно и без бутстрапа
@stasgosha5 жыл бұрын
@@-web2378 полностью согласен)
@stasgosha5 жыл бұрын
@@prosto_razrabotka Да, нужно смотреть для каждого компонента отдельно Кстати, спасибо за видео)
@АлексейКоган-ц9г5 жыл бұрын
Спасибо за уроки!
@АлександрК-ш2 жыл бұрын
Здравствуйте. Для Bootstrap 5 то же самое, если ориентироваться на этот урок?
@DirasaMidrar4 жыл бұрын
Молодей! Светлая твоя голова!
@ДенисМальцев-м8м5 жыл бұрын
Ура новый урок)) Спасибо)) я ждал(=😊
@prosto_razrabotka5 жыл бұрын
Отлично!
@daymaker_trading4 жыл бұрын
Мега круто, спасибо!
@prosto_razrabotka4 жыл бұрын
Благодарю
@Umitka2 жыл бұрын
Со второго раза дошло😂😅
@akmiable5 жыл бұрын
Спасибо за bootstrap !!!
@TheMariaChu4 жыл бұрын
Доступно. Спасибо!!
@prosto_razrabotka4 жыл бұрын
Я рад -)
@zubziro55665 жыл бұрын
Нужно больше - bootstrapааа... верстка боль
@gedonik5 жыл бұрын
Спасибо за видео. Если не сложно, сделай обзор оборудования на котором работаешь. Железо, периферия, софт.
@othersidesss1 Жыл бұрын
Виталий, почему перестал делать контент??????? качественные вещи делал
@kitsune_4243 жыл бұрын
спасибо
@ВладиславШаманов-и8о3 жыл бұрын
По идее сетка второго уровня должна иметь меньший паддинг для отступов или нет?
@АлексейФамусов4 жыл бұрын
Отлично объяснил, спасибо) всё доходчиво и на примере! Скажи, а какую цель ты преследуешь, обучая нас? Сделать мир веб-дизайна лучше?)
@Johnsson254 жыл бұрын
Самое важное в этом ролике - пояснить, чем отличается этот случай от того, где разбиение на 7, 2 и 3 будет верным. Потому что картинка + текст? Или потому что по вертикали у новостей может быть другая высота, а значит, она уже не вдходит в контейнер на 12 вместе с левой картинкой?
@invisibleworld33075 жыл бұрын
Если я правильно понял, с помощью Flexboxа можно настраивать колонки вручную, а с помощью сетки Bootstrap, готовые настроенные колонки можно запросить на их сайте?
@denissakuta7304 жыл бұрын
Виталий добрый день, создавая БЛОКИ, с чем лучше работать в 2020, что самое актуальное на сегодняшний день, более простое с точки зрения написания и не тяжелое для загрузки сайта в последующем...? ..столько информации....Flex///Grid/////.
@prosto_razrabotka4 жыл бұрын
Вот эту информацию нужно читать внимательней, ибо флекс, грид и фреймфорк (например бутстрап) решают разные задачи
@s1ck3704 жыл бұрын
Как быть с шириной колонок? В фигме можно во фреймах включать сетки, а фреймы в свою очередь вкладывать друг в друга. Но допустим я взял аналогичную вашей ситуацию, и хочу сделать для себя такую же сетку, как мне понять, какие именно настройки я должен задать, помимо гаттера в 15пт?
@prosta_tak3 жыл бұрын
В Layout Grid можно указать Type колонки, как Stretch, а ширина тогда будет задаваться автоматически. При этом кол-во колонок, Gutter и Margin вписываете конкретные.
@prodrammhuman67125 жыл бұрын
Отличный канал и контент, русский youtube ждал наверно его)) Есть пожелание, было бы отлично добавить легкую музыку на фон, чтобы так глухо не было
@prosto_razrabotka5 жыл бұрын
Фоновая мелодия тут есть, просто уровень такой, что не отвлекает от голоса -)
@dmitrijponkin4 жыл бұрын
Спасибо!!!
@szCerber4 жыл бұрын
Дико извиняюсь, но можно как то на рабочих примерах объяснить, а нафига этот велосипед - бутсрап, когда расписать настройки сетки, будь то флекс или грид не так уж и сложно на живую, не пользуясь "заготовками" ? Я сейчас не понтую, что знаю свойства и принцип работы сеток, а реально интересуюсь, так как вполне из за неопытности могу упускать смысл этого "фреймворка" в плане применения его к сеткам ?
@prosto_razrabotka4 жыл бұрын
Смотрите видос на канале - что лучше бутстрап или флексбокс
@VTRSony5 жыл бұрын
Расскажите, пожалуйста, про шаблонизаторы
@lega-lise3 жыл бұрын
Извините, если мы делаем вложенную сетку справа тоже из 12 колонок, там ведь уже не получится расстояние по 15рх т.к она по сути занимает меньше места (4 или 5 колонок от верхнего уровня) и получается ресайз или я что то не так понял?
@prosto_razrabotka3 жыл бұрын
Одна из первых вещей о которых я говорю в видео по бутстрап - гаттер неизменный! Если не в этом, то роликом ранее
@Aleksei_Prit4er4 жыл бұрын
С дизайнерской точки зрения я вижу: В создании дизайн макета с сеткой человек не разбирается, Бутстрап софт кривой и создает в новом контейнере новую сетку и в данном случае делит 5 на 12 и сетка сыпется, В контейнере созданным под размер 5 колонок автор предлагает создать 12 колонок в макете, а это получается "5 / 12 = 0,41666666666" и сетка сразу сыпется. (Ближайших выход к такой логике это изменить в самом контейнере сетку на 5 колонок с гаттером в 30( по 15 с каждой стороны) внутри софта для каждого контейнера самому(если софт не позволяет, пишите плагин на него), а не плодить по 12 колонок каждый раз) Вывод смешной: Давайте тратить время и писать плагины для дизов, КОГДА проблема с софтом идет со стороны верстальщика и сетка сыпется у него, И тут можно задаться вопросом, а не проще тогда просто написать плагин на софт, чтобы новые контейнеры не создавали новую сетку под себя? Каждый решает для себя сам.
@prosto_razrabotka4 жыл бұрын
Алексей, простите, но вы несёте какой-то бред... плагины, софт... Вы видите ваш дизайн в одной плоскости, словно предметы, лежащие на столе. В верстке все несколько сложнее - там есть вложенность. И каждый новый уровень вложенности уже имеет свой контекст, свою ширину.
@Aleksei_Prit4er4 жыл бұрын
@@prosto_razrabotka Вы не упоминаете существует ли возможность изменять этот контекст внутри верстки, и не рассуждаете о такой возможности, вы просто говорите, что проблема с тем что у вас плодится новая сетка(контекст) в каждой вложенности, это вообще не проблема верстальщика, а проблема дизайнера, смешно просто.
@prosto_razrabotka4 жыл бұрын
Я не говорил, что появление вложенной сетки - проблема. То, что это так работает - данность. И дизайнер при проектировании системы должен принимать это во внимание. Лично вы, можете соглашаться, можете не соглашаться с этим...
@Aleksei_Prit4er4 жыл бұрын
@@prosto_razrabotka В названии видео упоминается фраза "Главная ошибка дизайнеров ", когда на деле это просто причина для ленивого верстальщика не писать стили, а жаловаться на то, что дизайнер не создал сетку и теперь о боже придется не прописывать положение по колонкам, а смотреть расстояние между элементами.
@valeriiia_because10 ай бұрын
Вот именно! Если дизайнер еще для каждого отдельного блока будет включать сетку на 12 колонок и еще и под неё будет всё подстраивать, то это рехнуться можно. Основная сетка и дополнительная тупо не совпадают. Бред короче полный.
@ГеннадийКазанцев-й1ю5 жыл бұрын
После просмотра роликов о flexbox задаюсь вопросом: "А нужен ли bootstrap?" :)
@mirashj16515 жыл бұрын
Аналогично
@-web23785 жыл бұрын
если ток формы оттуда тырить и alert
@inzoddex83124 жыл бұрын
Нет не нужен, но когда у тебя будет по 5 заказов в неделю, ты поймешь, что без бутстрапа жизнь какой-то сложной стала)
@-web23784 жыл бұрын
inzoddex кто мешает увеличивать цену заказа? Пора уже явно дать знать людям, что it сфера - это не горячие пирожки
@inzoddex83124 жыл бұрын
@@-web2378 в современном мире выигрывает не тот, кто делает хорошо, а тот, кто может решить проблему быстро и как можно дешевле. Это мы как разработчики понимаем, что лучше, а что нет. Но юзеру пофигу, ему нужно решить проблему, а как мы её решим его не волнует.
@ОлегАрбузов-ч2ц5 жыл бұрын
А вместо div при использовании bootstrap можно использовать семантические теги? section'ы, header'ы и проч.?
@prosto_razrabotka5 жыл бұрын
Канеш
@ihabia4 жыл бұрын
А что если макет сделан не по сетке бутстрап? Нужно ли делать на бутстрапе или проще медиазапросами?
@prosto_razrabotka4 жыл бұрын
Так то бутстрап тоже перестраивает сетку медиа запросами -) Но в вашем случае - в бутстрапе нет необходимости.
@melomalo16824 жыл бұрын
Виталий подскажите пожалуйста почему тут у блоков свободные пространства prnt.sc/smr5tv kzbin.info/www/bejne/h3_Km2mabtOnpK8 Потому что в макете закрашено белым данные полосы?
@КостяКреон4 жыл бұрын
...и как лучше создавать сетку, через Grid, Flex, или Flow? я смотрю, что ты всегда советуешь пользоваться ФЛЕКСОМ.
@prosto_razrabotka4 жыл бұрын
Посмотрите одно из недавних видео на канале - Что лучше: Bootstrap или Flexbox? Станет понятней.
@СергейАндрухович-р2ж4 жыл бұрын
@@prosto_razrabotka Извините,а где оно конкретно?
@osnapitzlenalove5 жыл бұрын
А можно дизайн в принципе делать не по сетке? Или какие-то отдельные элементы? Или для разработки это будет сущий ад?)
@prosto_razrabotka5 жыл бұрын
Конечно можно. Всё зависит от типа проекта, который вы делаете.
@ЕвгенийВладимирович-р6е4 жыл бұрын
Толково
@invisibleworld33075 жыл бұрын
Можно ли Bootstrap сочетать с другими сетками? Например с Skeleton или Foundation.
@prosto_razrabotka5 жыл бұрын
Зачем?
@invisibleworld33075 жыл бұрын
Просто: разработка, Я наверно не до конца понял, как работают сетки. Я знаю только, что сетки представляют собой шаблоны с разным количеством колонок (12,32,64) по горизонтали или вертикали, которые скачиваются с сервера офиц. сайта, а вот работать с ними в HTML и CSS пока не научился, т.е. нет практики)
@Harrogath124 жыл бұрын
Да в принципе ж всегда интуитивно на глаз ясно где 5 к 7и или 3 к 9ти и т.п. какие внутренние сетки..
@Vladikslavik5 жыл бұрын
Покажите, пожалуйста, как делать в бутстрапе наложение слоёв с медиа и дальнейшим перестроением по брейкпоинтам.
@-web23785 жыл бұрын
поконкретней если можно
@Vladikslavik5 жыл бұрын
Нукат - web Есть два блока 1) картинка 2) блок с текстом, частично заходящий на неё. Можно ли для реализации такой задачи пользоваться бутстрапом или всё же просто ограничиться флексом? Не забываем про дальнейшие медиа-запросы.
@-web23785 жыл бұрын
тут ручками) через transform: translateY поднять текст на картинку, а в определенной точке сбросить значение в ноль. Если я правильно понял ситуацию. Отдельных классов, позволяющих наезжать тексту на картинку в Bootstrap нету
@Vladikslavik5 жыл бұрын
@@-web2378 Так правильно ли будет распихивать такие блоки по колонкам?
@-web23785 жыл бұрын
@@Vladikslavik как тебе удобно так и делай) можно вообще в один блок это пихнуть, и там уже подгонять текст на изображение, нежели делить их на два блока
@svoysite5 жыл бұрын
А почему бы не поделить на 3 блока. На 7, 2 и 3 колонки
@prosto_razrabotka5 жыл бұрын
Потому что с точки зрения компоновки это неверно. Блок новостей - это отдельная сущность
@Johnsson254 жыл бұрын
@@prosto_razrabotka а почему? Почему слева не отдельная?
@lega-lise3 жыл бұрын
так если делать вторую сетку на 12 там ведь уже не получится расстояние по 15рх тк по сути она ресайзнится? афтор говорит что нет.
@КостяКреон4 жыл бұрын
Было интересно, но есть вопрос: Что поддерживается в Bootstrap4 Grid, Flex, или Flow? ....я не совсем понимаю, просто хотелось бы разобраться.
@prosto_razrabotka4 жыл бұрын
Что такое Flow?
@beaipi53604 жыл бұрын
@@prosto_razrabotka Может Float имеет в виду? :)
@tovjukov4 жыл бұрын
А, можно ссылочку на PSD файлик с вашей сеткой?
@romnytandem5 жыл бұрын
Про это уже сказано пересказано почему не показывать вёрстку по типу dribbble.com/shots/5681987-Concrete-Store видео kzbin.info/www/bejne/Z6WUgJ9un6eSqdE и тд
@t3m8ch794 жыл бұрын
Спасибо за видео. Благодаря нему я сделал себе специальную формулу, по которой я 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_razrabotka4 жыл бұрын
Я в XD не работал, но если вы смогли это туда так интегрировать, то это Круто! Приятно знать, что полученные знания находят применение.
@t3m8ch794 жыл бұрын
@@prosto_razrabotka Жаль, что не работали, классная штука и единственная на Win10, в которой все анимации плавные и кайфовые. Впрочем, главное - не инструмент, а руки. Возможно, напишу плагин для XD, схожий с вашим для Sketch.
@prosto_razrabotka4 жыл бұрын
@@t3m8ch79 Я его не запатентовывал, так что дерзайте -)
@ЕвгенийСкореев5 жыл бұрын
Умоляю, разбери masonry bootstrap в сочетании с imagefill.js
@krutoyinfo Жыл бұрын
Соберем чуваку на волосы
@englishlanguage12815 жыл бұрын
Неужели есть такие кто не понимает изначально, то о чем рассказано в этом видео??? Тяжело будет такому человеку вообще освоить верстку, я уже не говорю о JS и PHP. Я ни чего плохого сказать не хочу, это только мое мнение.
@medoman18335 жыл бұрын
Это проблема номер один при разборе полетов между версткой и дизайном. Сколько раз просил дизайнеров делать правильно, сколько раз объяснял, все без толку. Не могут они понять этого. - Я же нарисовал(а), все красиво, заказчику нравится!!! А потом начинается TETRIS с падингами и маржинами, тьфу, задолбало! Пожалуйста, сделай еще один ролик на эту тему с конкретным примером, взяли дизайн и верстаем! И обязательно мобильную версию зацепи, а то не понимают они как .col-md-5 превращается в .col-12 на мобилке)
@valeriiia_because10 ай бұрын
ты понимаешь что маленькая сетка из 12 колонок не попадает в ширину 5 колоночного блока основной сетки, они просто не совпадают и тогда получается полный хаос в макете. если ты не понимаешь о чем я, то скачай фигму, создай фрейм на 1440 шириной к примеру, сделай 12 колонок, потом сделай блок на 5 колонок справа например и в нём уже создай еще одну 12 колоночную сетку и просто посмотри как основную и второстепенную сетку невозможно подогнать друг под друга. если плясать именно под эту маленькую сетку и выстраивать всё по ней внутри, то макет начинает выглядеть крайне хуёво, полная асимметрия и хаос, пользователь в ужасе съебывает с сайта. я как дизайнер говорю, что ни один дизайнер не будет никогда не будет так делать, это нереально, тогда сроки выполнения заказа выростут раз в 10 и ценник соответственно тоже! ну и в принципе это нереально, по этому не обсуждается.
@medoman183310 ай бұрын
@@valeriiia_because 4 года прошло. Уже и пандемия случилась и всякие СВО. Попробуем вспомнить что ж там было с этим бутстрапом. Ах, да, если стоит задача сделать дизайн и при этом использовать бутстрап, то надо дизайн вгонять в рамки сетки бутстрап. Ну и как бы col-md под экраны 720px, хотите чтобы в мобилке не сильно плыл дизайн, то col-sm или col-xs никто не отменял, а иначе будет стандартная сетка col-12
@zloy_ax84964 жыл бұрын
+
@prosto_razrabotka4 жыл бұрын
+ )
@invisibleworld33075 жыл бұрын
Понял, что такое вообще Bootstrap, а вот как его установить и выбрать нужные компоненты не понял)