Что лучше: Bootstrap или Flexbox?
Вставка
- Опубліковано 22 вер 2024
- Этим вопросом задаются почти все, кто недавно начал заниматься вёрстка сайтов. Сначала разбираются с базовыми вещами, такими как html и css3. Но в css есть 2 больших модуля - flexbox и grid, которые сложно понять сразу, поскольку они содержат большое количество своих свойств. И даже узнав о том, что такое css flexbox и grid многие не понимают когда что из них использовать. Но всё ещё больше усложняется, когда разработчики начинают погружаться во фреймворки, такие как bootstrap, foundation, bulma и многие другие.
Дело в том, что на сайте очень часто блоки располагаются в сетке. Иногда это просто блоки по 50%, а иногда и несколько колонок. И вот когда верстальщик видит несколько колонок, перед ним встаёт вопрос - Как делать? flexbox, bootstrap 4, grid, float? Те, кто не изучал flexbox и grid, скорее всего начнут делать сайт на float или bootstrap. Но правильно ли это?
В этом видео я на примерах расскажу когда и что желательно использовать.
Не забудьте заглянуть сюда:
❓ Запись на консультацию - 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/
Давно себе задавал этот вопрос, не мог понять разницу)
Пояснение просто бомба, спасибо!
Благодарю -)
пхахаха чел, как и зачем задаваться таким тупым вопросом,если информации о том что бустраповская сетка сделана на флексах полным полно везде , и если ты знаешь что такое флексы ты тебе не составит труда додумать все что что в видео озвучили,я тебя удивлю!Во флексах есть такое свойство как wrap так вот сетка в принципе держится на этом свойстве+ процентное соотношение блока.
@@fmleglrmglrml так ,что учить начинать после html?css grid? css flexbox ну и т.п.?только html заканчиваю.
Виталий, вы потрясающе объясняете! Я очень рад, что есть такие люди, как вы! Огромное вам спасибо!
Спасибо)
очень интересно, но ничего не понятно( пойду дальше таблицами верстать
Тоже вариант.
Не забудьте про медиа-запросы )))
@@Vladikslavik пффффф медиа запросы могут понадобиться и при вёрстке на бутстрапе, что такого в медиазпросах плохого? Медиазпросы между таблицами не связаны неразрушимой связью ,они используются и при флексах и при гридах ,так что не могу понять предъяв к медиазпросам...
Юзеры outlook будут премного благодарны)
CSS таблицы в тренде
Кому окна поменять? Я прошел курс..
Очень понятная и хорошая подача.
Что за восхитительная музыка на заднем фоне в начале видео? Мое сознание будто бы уносится в мир грез под эти божественные ангельские звуки
Топовый контент! Одним словом - ролик в топ. Спасибо за работу)
Я уже устал лайкать ваши видео 😂
Спасибо большое
Виталий, в будущем будут уроки по JS?
Я думаю, тут ответ на неверную постановку вопроса.
Я так понимаю, что те, кто это спрашивает имеют ввиду следующее "Что лучше использовать для адаптивной верстки, flex без библиотек или же bootstrap" с точки зрения выбора технологии реализации.
лично у меня бутстрап вызывает рвотный рефлекс😂
Долго долго долго долго не мог этого понять. Спасибо.
Не за что -)
Пока нашел только три канала, где понятно объясняют сложные новичку вещи. Это тут, гло академия и айтидоктор. Спасибо за Ваш труд!
Благодарю
а как же фрилансер по жизни?
@@TortugaStudio Про него узнал позже. Сейчас он тоже в списке. Так же Анна Блон и еще несколько человек. Список растет)
Уф, а вот только сегодня сайт делал впервые с бутстрапом. Покидал свойства и понимаю, что мне он нафиг не нужен, сам справляюсь. Но всё же искал смысл его использования. Спасибо за разъяснения, очень к месту и вовремя😃
Лучший!
СПС. Не зря остановился на видео. Хорошая аналогия, ясно и понятно )
Спасибо
Класс! Вроде бы очевидные вещи, но сам я как-то не задумывался об этом)
шикарно, даже в пьяном виде, все чет ко и понятно!!! Спасибо большое!!!
Воуу.. вот это серьёзная заявка -) Спасибо)
Спасибо за видеоролик! Вот бы ещё увидеть ролик на тему:"Что лучше:flexbox или grid?"
Появление Flexbox решило некоторые проблемы в верстке, но они предназначены для простых одномерных макетов, а Grid не сложных двумерных что даёт больше возможностей именно для сложных вариантов задачи
Но никто не запрещает использовать и то и то в одном проекте
Так что по сути тут вопрос сложности и простоты для реализации
Чувак, где брови?
лично я всегда восхищаюсь твоей дикцией и проговариваемостью слов,видел на интервью у айтибороды, это ты не спецом,это у тебя по дефаулту)
Спасибо. Приятно слышать -)
Спасибо, это было потрясающе!
Спасибо
Спасибо , наконец-то понял зачем что к чему)
Хорошая ассоциация со стеклами и окнами. Надеюсь до некоторых "дизайнеров" это доходит. Я прекрасно понимаю какого мастеру который меняет стекло :D и как ЛЕГКО поменять окно.
Теперь все ясно,спасибо.
А вы задавались этим вопросом?
Я вчера целый день этим вопросом задавался! Просто невероятно насколько исчерпывающе вы дали ответ. Единственное у меня ещё есть "ламерский" вопрос:
- Насколько корректно использовать в одном проекте grid и bootstrap например ?
Веталь привет, я не понмаю есть css float, css flexbox, css positioning, css grid, что из этого уже устарело? на что обратить внимание ?? я что то совсем запутался ( сделать может видео по этому, а то куча роликов хз что учить, сделал бы кто то вот верстаем сайты на гридах, а вот галерею фоток делаем с флоатом и тд , спасибо
Спасибо за канал, очень полезно и выручает. Будет ли видос по flexboxgrid2 ?
можешь снять видос по джаваскрипту и как его использовать, допустим после верстки сайта на html и css. И также хочу спросить как верстают интернет магазины, там же в ручную каждую карточку товара не верстают. Почти все видео просмотрел уже.
Когда переходишь на страницу товара, данные товара загружаются с сервера, и рендерятся в карточку товара для пользователя
Хорошая аналогия :)
Nice
спасибо за разъяснения
Тупой вопрос) а почему не использовать вместе flex и grid? Каркас странички верстать на flex, а какие то конкретные блоки, например карточки с наполнением делать гридом. Можно миксовать разные технологии ?
Миксовать можно. Но описанный вами пример некорректный.
Флекс это как гречка, которую ты сам приготовил из чистой крупы, лучка и грибов. В то время как бутстрап, это как кашка быстрого приготовления из Ашана, в которую производитель насыпал всякого говна и химии, и от чистой каши там разве что название, да фоточка на упаковке.
Ну, я автору конечно ничего не открою, но споры вызваны тем, что единственной полезной функцией, которую замечали в бутстрапе новички и руководители была как-раз сетка. Т.е. ни типографику, ни ui особо не оценили, мол, кнопочки и кнопочки, что такое типографика вообще фиг знает по большому счету, а вот сетка это да. И говорили "верстай на бутстрапе, а то поплывет сайт, знаю я вас, верстальщиков. Т.е. способ заюзать сетку сравнивается со способом заюзать сетку. Лично для меня проблемы с сеткой просто не было, когда я верстал в начале десятых. Достаточно было почитать какую-нибудь книгу Иттона Маккота и быть чуть аккуратнее. Но бутстрап все-равно позволял взять какой-нибудь сайтиг с куцым и доморощенным дизайном, прикрепить файлиг и фигась - сайтиг становился гораздо симпатичнее.
Спасибо!)
молодец молодой человек
Привет, если не секрет на что снимаешь и в какой программе обрабатываеш видео?
Lumix G7 / Premiere Pro
@@prosto_razrabotka Было бы круто посмотреть backstage, как идёт подготовка к уроку, как снимаешь и т. д.
Привет, надеюсь ты прочитаешь мой комментарий, очень хочу чтобы ты сделал урок по JS, очень сильно прошу сделай, сейчас очень много видео на эту тему, но видео выходило уже год два назад(((
Или подскажи где учить, желательно русскоязычную книги или курсы, спасибо большое. ОЧЕНЬ НРАВИТСЯ ТВОЙ КАНАЛ. Только самый сок, нет не нужной информации
я понял что мне нужно поменять окна
Только наткнулся на канал, но не удивительно, золото сложно найти
Тупой вопрос по-моему, бутстрап(который написан на флексах) или флексы? А что если я выберу бутстрап мне флексы не нужно будет изучать? Если все классы в 4 бутстрапе флексовые)
Вы раньше один канал рекламировали ну или нам советовали можете сказать что за канал?
Ну хз, использовать польностью фремворк не оч хорошая идея, а вот сетку можно. Но тоже зависит от дизайна, особенно если требования чтоб не ехал макет на всех разрешениях. Дизайн может быть кривой или "нестандартный". Я думаю лучше придерживаться каких-то общих правил и логическое, предсказуемое использование css(т.е. не так "Зачем тут float: right, да просто хотел элемент сдвинуть вправо"), а то будет мешанина из кастомных классов и классов сетки.
Аве. Интересное видео, но такой вопрос. Замечал у тебя в видео разные сокращения в написании тегов и свойств. По типу div.class mt120 (чисто пример). До некоторых я сам допер используя логику. Есть ли ресурс где можно узнать все такие "сокращения"? Или может сделаешь видео на эту тему? Буду очень благодарен
гугли - emmet cheat sheet
Emmet - у него такой синтаксис,этот плагин поддерживается в практически во всех популярных редакторах. Соответственно, чтобы узнать весь его синтаксис, загуглите Emmet сокращения.
@@prosto_razrabotka как раз не знал как это гуглить (названия не знал). Спасибо
@@MrBblCTPEL тебе тоже спасибо
По моему мнению можно и не использовать bootstrap в одностраничных сайтах, потому что это создаёт лишнюю нагрузку на сайт. И поэтому лучше использовать чистый flexbox
Нагрузка на одностраничных сайтах))
крутое видео. ))
Спасибо)
На мой взгляд совершенно неверно рассказано про "мастера". В 99% случаев мастер сначала учит CSS, а уже потом (для скорости) применяет Bootstrap. Поэтому когда он приходит и видит самописный CSS, то скорее всего он в нём так же быстро разберётся, как и в Bootstrap. Особенно сильно разница видна на маленьких проектах типа лендингов или сайтах визитках. Использовать на них тяжёлый Bootstrap смысла нет. А вот написать маленький CSS на флексах самое то.
в общем на flexbox в React шаблонить и не париться
Ну, с реальными практическими примерами было бы понятнее)
а почему идет сравнение с flexbox, а не grid?
А почему должно идти с ним?
@@prosto_razrabotka на мой взгляд он интуитивно понятней как в создании так и в редактировании своей сетки, в отличии от flexbox'a
1. Под капотом у bootstrap - flexbox. Отчасти поэтому идёт сравнение у многих
2. Другая проблема. И по ней я сделаю тоже видео. Но если коротко - grid - двумерный, flexbox - одномерный. И многие не понимают, где что уместно
@@prosto_razrabotka будете делать видео о том, где уместно использовать гриб, а где флекс?
дубль2: Веталь привет, я не понмаю есть css float, css flexbox, css positioning, css grid, что из этого уже устарело? на что обратить внимание ?? я что то совсем запутался ( сделать может видео по этому, а то куча роликов хз что учить, сделал бы кто то вот верстаем сайты на гридах, а вот галерею фоток делаем с флоатом и тд , спасибо
Нет такого понятия - устарело. Всему своё место.
Флоат для обтекания картинок
Грид для лейаутов (в основном)
Флекс для выравнивания/позиционирования блоков
Название не корректное. Бутстрап может быть или на фронтах или на флексе. Сетку нужно сравнивать с сеткой, а бутстрап например с флоатами или гридами.
Скорее уж у вас комментарий не корректный, если вы после просмотра такое пишете...
@@prosto_razrabotka я не смотрел. Наверное из-за того что название показалось странным.
Вместо всего этого можно ведь было просто взять и просто ответить на вопрос в названии. Конкретно, по пунктам. Ведь можно было? И улыбочка в конце не раздражала бы
Разные? Да ты сравнивал счетное множество с множеством на интервале (0,1)? уууу?
Не согласен! Именно про сетку.
Флексбокс одинаково хорошо документирован в интернете как и сетка бутстрапа. Если к вам на проект приходит человек который знает только бутстрап и не знает флексбокс, то я не завидую этому проекту). Поэтому лучше всегда использовать флексбокс, чтобы приходящие на проект разработчики не впадали в ступор)
ниче не понял, но очень интересно)
Вопрос:
...можно ли использовать технологию CSS3 FlexBox в Bootstdrap?
bootstrap 4 это сетка на flexbox :))))))
если смотреть на css-свойства, то да. смотрите шире
У меня такой Вам вопрос у Вас очки для зрения или для компьютера?
Для стиля -)
@@prosto_razrabotka Просто больше похожи для компьютера.Спасибо!
Что бы носить очки недостаточно быть умным нужно еще и плохо видеть... 😀
Для автомобиля )))
Я думаю лучше css grid layout 🤓
А это правда что ты из Ибм?
"Нет, сынок, это фантастика!" (с) из какой-то старой рекламы -)
Интересно кто эти вопросы задаёт...
Сравнение зачодное, но смысл ускользнул....
Смысл где-то рядом
@@prosto_razrabotka Ну да, да....
Смысл где то рядом, или рядом где то смысл....
Был бы я стекольщком я понял, а так нет
Не знаю, зачем объяснять такие очевидные вещи, а когда выйдет новая сетка бутстрапа основанная ТОЛЬКО на гридах то придется видео перезаписывать? Это очевидные вещи, если человек верстал и на флексах и на бутстрапе он тупо не мог пройти информацию о том что бустрап сделан на флексах,это нереально ,а информация в видео очевидная, будто для годовалого ребенка разжевали...если человек не понимает в верстке таких очевидных вещей, то может все же это не его, может лучше чем то другим заняться?
Если бы это было на столько очевидно, то эти вопросы бы периодически не всплывали в разных HTML / CSS чатах.
А если говорить о "разжёванности", то если вы посмотрите другие мои видео, то заметите, что я везде всё пытаюсь объяснить простым языком, чтобы и годовалый ребёнок смог понять, разобраться и стать уже хорошим специалистом лет эдак через 10-15 -)
Изначально хотел наехать, но скажу по мягче. ХВАТИТ МУСОЛИТь ВЕРСТКУ!!! ГО ЖАЖУСКРИПТ!!!
Не понимаю зачем снимать ролик о Bootstrap который уже неактуален совсем
А что сейчас актуально?
Fok U флексы и гриды. Нет смысла юзать фреймворки, когда чистый CSS даёт богатые инструменты
Видимо вы совсем не поняли второй части видео. Ничего, бывает.
Чёйта не актуален? Бутстраповская сетка на каждом ~третьем проекте.
бутстрап сам по себе актуален был и будет, он ускоряет верстку что идеально подойдет для не сложных проектов,которые не претендуют на оригинальность, такие сайты как fanserials.market/ их полно, у них куча посетителей, но они друг на друга похожи очень ,меняются разве что раположение блоков да цвета , но этому бизнесу похеру на то что у тебя какой то элемент будет в другом месте стоять их интересует что они могут без проблем заливать свой контент и у них ничто никуда не вылезет случайно
Как только я увидел это ШЭДЭВР бутстрап, его стили, написанные названием класса, мне прям плохо стало.. css и так простой, зачем его настолько упрощать? Для детей дегенератов что-ли, чтобы они считали себя программистами.
6 минут прожито зря, хрень какую-то несёт
Бутсрап говно. Есть смысл сравнивать бутсрап и гриды+флексбоксы