Адаптивная верстка интернет-магазина на Bootstrap 5. Урок 6
HTML-код
- Опубликовано: 7 фев 2025
- В этом видео мы сверстаем карточку товара в списке товаров. В этой карточке буду все необходимые элементы: изображение товара, наименование и краткое описание, значки предложений (офферов), цены и кнопка добавления товара в корзину.
Наиболее популярным CSS-фреймворком на сегодняшний день является Bootstrap. Поэтому знать его и уметь его использовать - будет несомненным плюсом для верстальщика. В данном цикле уроков мы сверстаем сайт интернет-магазина, используя последнюю версию Bootstrap 5.
Исходники к уроку - github.com/mat...
![Вижу цель. Как понять, чего я хочу и как достичь любой цели? Джон Дэвис. [Аудиокнига]](/img/1.gif)
Спасибо за уроки, псле bootstrap планирую перейти на PHP, и в целом Ваш канал очень сильно помогает в обучении
@@cyber_smoke9477 пожалуйста 😉
Спасибо вам огромное за ваши видео! Учиться по вашим урокам одно удовольствие! Спасибо за знания!
И Вам спасибо за отзыв 😉
Хочу выразить благодарность вам, за ваши крутые уроки. Учусь по ним, в том числе и по тем, что вы делали на webformyself, учу пхп и бутстрап. Надеюсь, ваш канал на ютубе быстро наберет популярность.
Огромное спасибо за пожелание! Очень приятно ☺
спасибо за уроки Добрый Человек
Пожалуйста, Добрый Человек 🙂
Огромнейшее благодарность Вам, Андрей!!!🙏 Как всегда все просто и понятно!!! 👍
Всегда пожалуйста 🙂
Огромная благодарность за то что выпускаете такой полезный и качественный контент
Пожалуйста 🙂
Спасибо еще раз за уроки)) жаль что другим помочь нет возможности но лайк и комент обеспечен
Этого уже немало ;) Спасибо :)
Спасибо за урок и за overflow hidden полезное свойство. Не знал что webkit это свойство которые прописывается в CSS часто встречаю, но думал это просто веб браузер мне выводит и это его фиговины.
Пожалуйста 🙂
искала медь - нашла золото
Спасибо)
В реальном проекте не стоит ограничивать количество отображаемых символов через размер блока:
.product-details h4 {
max-height: 60px;
overflow: hidden;
}
могут возникнуть разные неприятности из-за этого, лучше через бэкэнд или при рендере страницы ограничивать количество символов которые поступают в ту или иную строчку. Например в шаблонизаторе jinja2 это легко делается через строковые срезы, я похожую функцию недавно как раз прописывал, там конечно не только срезы, чтобы красиво смотрелось нужно еще в бэкэнде функцию прописать и там поставить условие чтобы в конце строки было целое слово и если это не последнее слово предложения то еще бы ... отобразить за ним
Здесь я пытался передать смысл того, что нужно следить за длинами подобных строк. Потому как неоднократно встречал шаблоны с условным Lorem ipsum для всех строк. И все выглядит аккуратно и красиво. Но как только начинаешь использовать реальные названия вместо Lorem ipsum - так и начинает макет ехать...
Поэтому, коль здесь не бекенд, а верстка, - предложил такой вариант. При переносе шаблона на CMS это правило можно убрать и использовать фильтры шаблонизатора или же на уровне БД или серверного языка обрезать строку. Тут уже дело вкуса.
Хотя в реальных проектах использовал и вариант с CSS, который показал в уроке, и вариант с правилом -webkit-line-clamp. Как-то не вижу в таких вариантах ничего предосудительного.
@@matroskin978 я понимаю, это не для вас комментарий, для будущих специалистов чтобы они потом не мучались как и я)))
Исходники к уроку - github.com/matroskin978/bootstrap5-eshop/tree/61413ccfb64b54adcee7ba6cc412dee6ad6efb7c
Прекрасно ! хотелось бы когда-нибудь так-же уметь самостоятельно....
Немного теории + много практики = будете уметь также и даже лучше 😉
Спасибо большое тебе
Отличный урок, спасибо
Спасибо большое тебе Андрей!!!
Пожалуйста 😉
Вообще бутстрап немного нудный в том плане что большое количество мелочей и всяких классов которые нужно знать, и это пугает. Но вот зато через него удобно и просто разбивать по колонкам верстку и давать отступы не сильно тратя время на css. Тот факт, что много штук продуманно за ранее это конечно плюс, особенно когда верстаешь большой многостраничник удобно, что не нужно тратить время на проработку каждой мелочи, потому что ты держишь в голове все стандарты и принципы работы бутстрапа. Но вопрос за главным, как это все в свою голову впихнуть. Проще несколько десятков аглоритмов по бэкэнду запомнить чем это все)
Ну да, сетка - это то, ради чего Bootstrap используют в первую очередь. Ну а что до запоминания классов, то это дело наживное)) пару-тройку проектов на нем сделать и основные классы уже будете писать без заглядывания в документацию.
Привет классные уроки и курсы. Большое спасибо! Можешь дать какой-нить комментарий, почему webformyself удалила все видеокурсы со своего сайта?
Привет! Спасибо)
За комментарием лучше обратиться к WebForMyself. На сегодняшний день я с ними не сотрудничаю, поэтому ничего подсказать не могу.
Спасибо. Уже страница начинает быть похожей на страницу. Если забежать вперёд. Что дальше бы следовало продолжать учить. React, Vue?
Пожалуйста)
Если планируете заниматься фронт-разработкой, то после верстки стоит учить JavaScript. После него уже любой JS-фреймворк.
@@matroskin978 С какого фреймворка посоветуете начать? JS учил на курсах.
Напрашивается ответ - с наиболее популярного)) Сервис npmjs говорит, что таким является React. Но тут мне сложно говорить что-то определенное, поскольку я не фронтендер и с JS-фреймворками не работаю.
Андрей, вопрос касательно семантики. Рекомендуемые товары это раздел, в котором мы выводим СПИСОК рекомендуемых товаров. Где же список в вёрстке?
Список - это некоторая потряющаяся последовательность элементов. И не обязательно эти элементы должны быть представлены тегом ul, если Вы намекаете на него. Поэтому список товаров в верстке есть. Если Вы считаете, что это должен быть именно ненумерованный список, тогда оформите его так. Я же так не считаю. Мало того, кроме WooCommerce, я нигде и не видел, чтобы товары выводили в теге ul. Ради интереса можно посмотреть популярные интернет-магазины - вряд ли будет много таких, кто использует тег ul для вывода товаров.
Ну и если покажете мне где-то обоснованную рекомендацию по этому вопросу, тогда задумаюсь. Пока же не вижу никаких причин помещать блоки div в теги li.
@@matroskin978 согласен с Вами насчёт того, что ul, в выводе товаров, встречается только в WP. Хотел узнать Ваше мнение. Мне например кажется логичным выводить товары неномированным списком
@@mr.vorchun ну, мне кажется это, наоборот, не совсем логичным))
Все таки посмотрел ради интереса популярные интернет-магазины и вот как они выводят списки товаров:
Amazon - div
Ozon - div
Aliexpress - div
Wildberries - вообще article
eBay - тег ссылки оборачивает div карточки
Alibaba - div
Несколько магазинов в процессе поиска нашел и с выводом товаров в виде списка. Но если такие гиганты из перечня выше не используют список HTML для вывода товаров, думаю, я тоже могу так делать))
@@matroskin978 спасибо, за ответ. Ни в коем случае не оспариваю Ваше мнение. По сути, правильно и так, и так наверное.
@@mr.vorchun думаю, так оно и есть 🙂
+
Похоже this намекает, что в код отчаянно рвется jquery)
Это не jQuery рвется, это редактор меня не понимает))