Адаптивная верстка интернет-магазина на Bootstrap 5. Урок 2

Во втором видео мы сверстаем верхнюю панель шапки, где будет три колонки. В первой колонке разместим телефон, во второй - иконки соцсетей и в третьей - выпадающие меню ссылок аккаунта и переключателя языков. Также добавим адаптив сверстанной части. При этом, благодаря Bootstrap, это получится сделать без единого медиа-запроса в CSS.
Наиболее популярным CSS-фреймворком на сегодняшний день является Bootstrap. Поэтому знать его и уметь его использовать - будет несомненным плюсом для верстальщика. В данном цикле уроков мы сверстаем сайт интернет-магазина, используя последнюю версию Bootstrap 5.
Исходники к уроку - github.com/mat...

[@devidbrown8176]

Какое же спасение такие ролики) Я тут делаю сайт на python+django и верстать тоже самому приходится. Bootstrap - это расчудесное чудо, а автор волшебник, помогающий использовать это чудо. Спасибо!

[@matroskin978]

@@devidbrown8176 пожалуйста 😉

[@StasKantor]

Спасибо тебе большое за чудесные уроки. Все просто супер понятно

[@matroskin978]

Пожалуйста)

[@Keep_change]

пушка урок .. минимум воды .. максимум полезностей ))) very informative

[@matroskin978]

Благодарю ☺

[@KatanaCSSML]

Очень круто объясняете, спасибо огромное за потраченное время и большой буст к моему прогрессу :)

[@matroskin978]

И Вам спасибо за оценку моей работы ;)

[@Alex_Pav0208]

Спасибо за урок. Все доступно и понятно

[@orthodox-chanel]

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

[@matroskin978]

Согласен) Именно поэтому стараюсь миксовать бутстраповские классы с тем, чтобы вместо них что-то описать в CSS. Например, иногда использую бутстраповские flex-классы, а порой пишу flex-правила в CSS, тем самым показывая альтернативу.

[@megadeath9056]

Чтобы всё делать так легко как Андрей нужно жить в интернете ))

[@matroskin978]

Не не не)) Я не живу в интернете)))

[@orthodox-chanel]

Ничего особенного, пару сайтов сделать и сам так-же сможешь) Вот с бэкэндом уже все сложнее...

[@matroskin978]

@@orthodox-chanel на канале есть уроки и по бэкенду... гораздо больше, чем по фронтенду) Про пару сайтов. Мне бы не хватило, наверное, такого количества для более-менее приемлемого уровня))

[@АртурПоздняк-я9х]

👍спасибо тебе добрый человек)

[@matroskin978]

Пожалуйста ;)

[@MrTopolevsky]

Спасибо!

[@СтаниславНикитин-р9ъ]

Спасибо за урок. У вас очень хорошие уроки. Есть вопрос, как правильно подбирать цвета для сайта, каким сервисом пользоваться? много сервисов которые дают палитру цветов, но не понятно какие из этих цветов выбирать за основной, цвет текста, акцент и контраст.

[@matroskin978]

Пожалуйста 🙂 По вопросу подбора цветов, увы, не подскажу. Я не дизайнер. Когда нужно сверстать какой-то проект - есть дизайн, как правило, поэтому такой вопрос не стоит. Если же дизайна нет, тогда практически всегда есть логотип, цвета которого и можно брать в качестве акцентных. И не забывать простое правило - на сайте должно быть не более 2-3 цветов (кроме черного и белого).

[@max_wbw]

Спасибо за Ваши видео. Мне только не понятно одно, зачем тянуть целую библиотеку ради сетки, если все тоже самое можно реализовать с помощью flex-ов и grid-ов? Да и адаптив можно более тонко настроить. Поправьте если не прав.

[@matroskin978]

Пожалуйста) Не правы в том, что подключал только ради сетки... в курсе используются и множество компонентов фреймворка. Навскидку: navbar, offcanvas, buttons, dropdowns. Ну и ко всему этому множество готовых классов для оформления контента: формы, таблицы из глобального. Так что не только сетка используется в курсе. Хотя сетка - это ключевая штука, конечно же.

[@max_wbw]

@@matroskin978 Так стили этих классов в любом случае будут переопределяться в css под стили сайта. Получается bootstrap задаёт свои стили вы их переписываете на свои. Вы извините за душноту😅 я понимаю, что у каждого разработчика свой подход к работе, но на мой взгляд с появлением новых свойств и возможностей css, bootstrap кажется лишним в этом мире😁 Не примите за оскорбление.

[@matroskin978]

@@max_wbw >>> Так стили этих классов в любом случае будут переопределяться в css под стили сайта. Получается bootstrap задаёт свои стили вы их переписываете на свои. Это почему? Давайте возьмем формы, которые в Bootstrap выглядят вполне достойно. Зачем мне переопределять их стили? Или все те компоненты, которые я указал выше. Если мне что-то нужно переопределить по дизайну, то точечно я это сделаю. Переопределю, например цвет кнопки и уберу скругления. Но зачем мне переопределять все прочие моменты? Ни к чему. В итоге CSS пишется гораздо меньше. А если речь идет о какой-либо админке, то там вообще можно использовать исключительно Bootstrap и ноль собственных стилей. Но чтобы я все это не рассказывал, а Вы не воспринимали на веру, просто посмотрите CSS готового проекта. На семь страниц сайта пришлось 650 строк кода с пустой строкой после каждого правила. Это и весь CSS. Без Bootstrap количество строк выросло бы в 2-3 раза. А то и более. >>> на мой взгляд с появлением новых свойств и возможностей css, bootstrap кажется лишним в этом мире Это Вам уже не ко мне. Я не являюсь разработчиком фреймворка. Это Вы можете написать авторам и комьюнити, что они не в курсе трендов разработки и продолжают заниматься бесполезными и никому ненужными вещами 😂 Я же лишь скромный разработчик, который не является профессиональным верстальщиком и отчасти из-за этого факта использую Bootstrap. Но по большей части все же использую его потому, что он действительно ускоряет верстку. По крайней мере для меня. Собственно, примерно это же Вы и сами сказали фразой выше: >>> я понимаю, что у каждого разработчика свой подход к работе

[@ВладимирК-ь9г]

Хорошие у вас уроки.. Чтобы не копироваь классы - дополнение HTML to CSS autocompletion - подсказывает заданные классы в css файле

[@matroskin978]

Спасибо 🙂

[@ВладимирК-ь9г]

@@matroskin978 Пожалуйста. До кучи - HTML CSS Support подсказывает классы в html из css даже подключенные через cdn

[@killemall3365]

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

[@matroskin978]

Спасибо ☺

[@overlord226]

Пишу в WebStorm'е, по непонятной мне причине у меня некорректно отображаются иконка телефона в первой колонке, во второй нет иконок социальных сетей, кроме точек, а после оформления .root и внесения новых данных в body цвет текста не изменился (задний фон, вроде, тот же). Не знаете, с чем это связано и как это исправить?

[@matroskin978]

Относительно цветов, то правильно не .root, а :root. Что касается иконок, то либо некорректно подключили иконочный шрифт, либо нет интернета и он не подключился. Других вариантов не вижу, пока не увижу Ваш проект. А так всегда можете взять исходники к уроку (они есть в описании и первом комментарии) и запустить их, а также сравнить Ваш код с исходниками для поиска неточностей.

[@overlord226]

@@matroskin978 да, у меня почему-то не все ссылки были скачаны; “:” вместо “.” тоже помогло: цвет и контраст начали работать. Спасибо!

[@matroskin978]

@@overlord226 отлично! Пожалуйста ;)

[@matroskin978]

Исходники к уроку - github.com/matroskin978/bootstrap5-eshop/tree/af283149bf96f0539e33f3ad1457c1c712b9d289

[@naFonke]

не до конца понял, зачем нужен btn-group?

[@matroskin978]

Была мысль соединить 2 кнопки. Потом передумал. Или забыл. Убрать ненужный класс тоже забыл, получается. Поэтому, по сути, незачем. Если мешает - можете убрать)

[@Александр-с5э8р]

большая просьба, перейти на темную сторону обучения, светлая глаза выедает(

[@matroskin978]

Увы, у меня все наоборот. Особенно бьет по глазам при переключении между темной темой редактора и светлым сайтом. Уж не знаю, как у пользователей темных тем так получается работать, но я так не могу. Поэтому, прошу прощения за светлую тему, но с темной ну никак не могу подружиться.

[@Александр-с5э8р]

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

[@matroskin978]

Пробовал самые разные. Прям заставлять даже пытался себя))) Но ни в какую. Сорри)

[@Александр-с5э8р]

​@@matroskin978 ладно как нибудь приспособимся ) очки темные одену!)

[@matroskin978]

Тоже вариант)))

[@АртемСузуя]

непонятно почему у меня не работает код EN RU DE Account Sign In Sign Up у вас работает открытие dropdown, а у меня оно просто не открывается помогите пожалуйста, больше 5 чаосв мучаюсь не могу понять почему не работает

[@АртемСузуя]

bootstrap js установлен как и css

[@matroskin978]

Вставил Ваш код в свой файл как есть - у меня работает. Поэтому варианта два: 1. Либо все же что-то не так с подключением Bootstrap. 2. Либо есть проблемы с JS. В обоих случаях нужно открыть консоль браузера и проверить ее на предмет ошибок JS. Если они есть - нужно исправить. Ну и не забывайте об исходниках. Если что-то не работает - всегда можно взять код из исходников к уроку.

[@АртемСузуя]

@@matroskin978 да это был будстрап, спасибо что помогли

[@matroskin978]

@@АртемСузуя пожалуйста)

[@Edjaucnfhfnskjsn]

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