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

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 52

  • @devidbrown8176
    @devidbrown8176 4 месяца назад +4

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

    • @matroskin978
      @matroskin978  4 месяца назад

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

  • @Keep_change
    @Keep_change Год назад +1

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

  • @StasKantor
    @StasKantor Год назад +2

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

  • @ВладОмел-и9й
    @ВладОмел-и9й Месяц назад

    Bootstrap - крутая штука! Спасибо!

    • @matroskin978
      @matroskin978  Месяц назад +1

      Да, неплохая 🙂 Пожалуйста 😉

  • @KatanaCSSML
    @KatanaCSSML Год назад +1

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

    • @matroskin978
      @matroskin978  Год назад

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

  • @megadeath9056
    @megadeath9056 Год назад +2

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

    • @matroskin978
      @matroskin978  Год назад

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

    • @orthodox-chanel
      @orthodox-chanel Год назад +1

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

    • @matroskin978
      @matroskin978  Год назад

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

  • @Alex_Pav0208
    @Alex_Pav0208 Год назад

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

  • @АртурПоздняк-я9х
    @АртурПоздняк-я9х Год назад +1

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

  • @orthodox-chanel
    @orthodox-chanel Год назад +3

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

    • @matroskin978
      @matroskin978  Год назад +1

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

  • @MrTopolevsky
    @MrTopolevsky 6 месяцев назад

    Спасибо!

  • @СтаниславНикитин-р9ъ
    @СтаниславНикитин-р9ъ 11 месяцев назад

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

    • @matroskin978
      @matroskin978  11 месяцев назад +1

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

  • @max_wbw
    @max_wbw Год назад

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

    • @matroskin978
      @matroskin978  Год назад

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

    • @max_wbw
      @max_wbw Год назад

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

    • @matroskin978
      @matroskin978  Год назад +1

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

  • @ВладимирК-ь9г
    @ВладимирК-ь9г Год назад

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

    • @matroskin978
      @matroskin978  Год назад

      Спасибо 🙂

    • @ВладимирК-ь9г
      @ВладимирК-ь9г Год назад

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

  • @Александр-с5э8р
    @Александр-с5э8р 11 месяцев назад +1

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

    • @matroskin978
      @matroskin978  11 месяцев назад +1

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

    • @Александр-с5э8р
      @Александр-с5э8р 11 месяцев назад

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

    • @matroskin978
      @matroskin978  11 месяцев назад

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

    • @Александр-с5э8р
      @Александр-с5э8р 11 месяцев назад

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

    • @matroskin978
      @matroskin978  11 месяцев назад

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

  • @overlord226
    @overlord226 Год назад

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

    • @matroskin978
      @matroskin978  Год назад +1

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

    • @overlord226
      @overlord226 Год назад

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

    • @matroskin978
      @matroskin978  Год назад +1

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

  • @naFonke
    @naFonke Год назад

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

    • @matroskin978
      @matroskin978  Год назад

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

  • @matroskin978
    @matroskin978  Год назад

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

  • @АртемСузуя
    @АртемСузуя Год назад

    непонятно почему у меня не работает код



    EN


    RU
    DE






    Account


    Sign In
    Sign Up



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

    • @АртемСузуя
      @АртемСузуя Год назад

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

    • @matroskin978
      @matroskin978  Год назад

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

    • @АртемСузуя
      @АртемСузуя Год назад

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

    • @matroskin978
      @matroskin978  Год назад

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

    • @Edjaucnfhfnskjsn
      @Edjaucnfhfnskjsn Год назад

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

  • @oleksandr540
    @oleksandr540 Месяц назад

    +