Как сверстать карточку товара html css

Верстка интернет-магазина: список товаров

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

Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.

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

Адаптивная сетка

Итак, начнем с создания адаптивных плиток — будущих карточек товаров. У нас будет 8 комнатных растений:

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

.product-wrapper

Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.

@media only screen and (min-width: 450px) < .product-wrapper < width: 50%; >> @media only screen and (min-width: 768px) < .product-wrapper < width: 33.333%; >> @media only screen and (min-width: 1000px) < .product-wrapper < width: 25%; >> 

И зададим стили карточек товаров.

.product

Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.

Исправим это с помощью отрицательного значения margin-right у родителя.

.products

Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо. Для наглядности блокам в демо задана фиксированная высота.

Фото товаров

Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:

Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.

.product-photo

В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.

.product-photo img

Осталось немного увеличивать фото при наведении.

.product:hover .product-photo img

Как все это работает можно посмотреть на примере демо.

Описание товара

Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.

Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .

.product p

А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента :after с линейным градиентом в качестве фона.

.product p:after

Перечеркнутые цены

Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration — line-through . При этом устанавливаем для вложенных элементов серый цвет текста.

.product-price-old b, .product-price-old small

Всплывающие кнопки

Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом .product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.

.product:hover .product-preview

Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер .product-buttons-wrap абсолютно позиционирован в блоке .product и равен родителю по ширине и высоте.

.product-buttons-wrap

Далее мы стилизуем псевдоэлемент .product-buttons-wrap:before таким образом, чтобы он вытеснял любой контент блока вниз, под нижнюю границу, блока-родителя.

.product-buttons-wrap:before

Теперь можно добавить собственно контент — кнопки, размещенные в блоке .buttons .

.buttons

Благодаря правилу float: left у псевдоэлемента .product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок .buttons занимает всю площадь карточки.

Чтобы лучше разобраться с кнопками, можно посмотреть это демо.

Переключение вида карточек товаров

Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.

По клику на кнопки у списка товаров удаляется и добавляется класс .table-layout .

$productList.toggleClass('table-layout'); 

Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:

.table-layout .product-main

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

.table-layout .product-buttons-wrap

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Фотогалерея товаров для интернет-магазина.

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

Для начала, давайте определимся со структурой фотогалереи и способами управления ею.

Итак, структура галереи для интернет-магазина будет состоять из трёх основных блоков:
1. блок с тумбами картинок;
2. блок, куда будет выводится полноразмерная картинка;
3. блок с кнопками навигации по галереи.

Для управления сменой картинок, давайте используем максимально возможные варианты:
— кнопками навигации «предыдущая», «следующая», «первая», «последняя»;
— кликом по тумбе картинки;
— кликом по большой картинке, при этом будет выводится следующая картинка;
— клавишами со стрелочками «влево» и «вправо»;
— колёсиком мышки.

Вроде со всем определились, ничего не упустили. Давайте приступим непосредственно к созданию фотогалереи.

HTML-вёрстка галереи для интернет-магазина.

HTML-вёрстка галереи очень простая и, как писалось ранее, состоит всего из трёх блоков:

27 бесплатных карточек HTML и CSS для блогов, электронной коммерции и многого другого

Интернет-ресурсы почти бесконечны, но найти их качества — действительно сложная вещьХотя поиск и хороший список веб-сайтов посвящены дизайну, все становится проще. В то время, когда такие языки, как HTML и CSS, находятся в отличной форме, приблизиться к бесплатным высококачественным ресурсам можно практически за несколько кликов.

Мы собираемся перечислить серию бесплатные карточки в HTML и CSS которые идеально подходят для всех типов блогов, бизнеса, электронной коммерции и многого другого. Коллекцию на большие расстояния, чтобы ее можно было включить в работу, которую вы выполняете для всех типов клиентов. Давайте сделаем это с помощью этого списка, который использует codepen.io, чтобы вы могли получить код как в HTML, так и в CSS.

• 1 Блог Карточное развлечение №1
• 2 CSS Новостные карточки только CSS
• 3 Запись в блоге
• 4 Карточки блога
• 5 Адаптивные визитки
• 6 Другая карточка блога
• 7 Визитные карточки
• 8 3D визитка
• 9 Визитная карточка CSS
• 10 Карточные сетки
• 11 Раскрытие 3D-карт
• 12 Карта адаптивного дизайна материалов
• 13 Сетка для карточек Flexbox
• 14 Карты Clash of Clans
• 15 Слайд-карты для электронной коммерции
• 16 Дизайн интерфейса — карточка продукта
• 17 Карточка продукта
• 18 Карточки продуктов Flexy
• 19 Переверните карты
• 20 Карты как 3D-карты продуктов
• 21 Параллакс карта
• 22 Эффект наведения для карточек
• 23 Простой эффект наведения
• 24 Карты глубины параллакса
• 25 UI-карта для фильмов
• 26 Карточка профиля
• 27 Карты в комплекте с Polaroid

Блог Карточное развлечение №1

Una отличная дизайнерская карта который говорит почти обо всем изображении, которое его представляет, вы можете перейти на codepen.io, чтобы получить соответствующий код и установить его на свой веб-сайт.

CSS Новостные карточки только CSS

Эта карта с Очень странные дела как фон, отличается плавной анимацией, раскрывающей контент. Это чистый CSS.

Запись в блоге

Предварительный просмотр Интернета, наведя на него указатель мыши. Имеет CSS и HTML для легкого включения.

Карточки блога

Минималистичный адаптивный дизайн карточки блога. Быстрая и плавная анимация высокое качество, которое никого не оставит равнодушным.

Адаптивные визитки

Выделяется для легкая анимация путем наведения указателя мыши на изображение карточки.

Другая карточка блога

Появляется текст карты при наведении В то же самое.

Визитные карточки

Una простая, но актуальная карта посетите с демонстрацией и кодом на HTML и CSS.

3D визитка

Эта карта стоит 3D-анимация с HTML и CSS. Созданный Еленой Назаровой, он идеально подходит для яркой визитки.

Визитная карточка CSS

Яркая визитка в CSS, которая вращается в 3D чтобы освободить место для серии URL-адресов, которые реагируют на указатель мыши в тот момент, когда мы его опускаем.

Карточные сетки

Серия удачно размещенных карт с привлекательный дизайн. Это удивительно своей упрощенной эстетикой, но с хорошим попаданием в код HTML, CSS и SCSS.

Раскрытие 3D-карт

Эта серия карточных сеток раскрыть больше информации на данный момент что мы оставили мышь на зеленом значке. В то время как мы оставляем указатель, остальная часть сетки перемещается соответствующим образом.

Карта адаптивного дизайна материалов

С язык дизайна Googleпоявляется эта серия карточек, которые выделяются значком меню, открывающим всю информацию об актерах, как в примере. Красивая и интуитивно понятная анимация с великолепным внешним видом.

Сетка для карточек Flexbox

Прототип карты на той же высоте, на которой они выделяются благодаря использованию формата flexbox сетки. Еще одна его ценность — использование соотношения сторон CSS и фильтров CSS.

Карты Clash of Clans

El популярная мобильная игра его карточки в HTML и CSS созданы Андре Мадарангом. Мы можем переходить между ними с помощью точной и очень визуальной анимации.

Слайд-карты для электронной коммерции

С гибкая анимацияЭти карточки побуждают вас искать их элементы, чтобы понять, о чем они. С великолепным дизайном от Омара Дсоки.

Дизайн интерфейса — карточка продукта

Идеальная карта для дизайна продукт нашей электронной коммерции. Сделано в HTML и CSS.

Карточка продукта

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

Карточки продуктов Flexy

Как следует из названия, использует flexbox чтобы создать интересную анимацию, когда мы нажимаем на кнопку «добавить в корзину».

Переверните карты

Небольшой код для некоторых карт с гладкой и идеальная анимация. Вы можете добавить их в считанные минуты. Недавно добавлен в codepen.

Карты как 3D-карты продуктов

Следует отметить, что эти карты как если бы у нас была серия карт на столе. Указатель остается наведенным, и они увеличивают масштаб, щелкают по каждому из них и показывают обратную сторону карточки, чтобы показать информацию о продукте. Щелкаем еще раз и оставляем как было с лицевой стороной. Идеально подходит для изучения свойств 3D ​​CSS.

Параллакс карта

Очень наглядный эксперимент с эффектный флип-эффект. Лучше, если вы увидите это, чтобы понять, о чем он говорит.

Эффект наведения для карточек

Простой эффект, но бесполезное зависание о картах.

Простой эффект наведения

Поразительный довольно простой эффект, но это имеет большой эффект в тот момент, когда мы это визуализируем.

Карты глубины параллакса

Эти карты несут концепция параллакса наверх чтобы сформировать несколько очень ярких карт по дизайну. Вам просто нужно увидеть это, чтобы лучше понять эффект, который он производит на пользователя, когда вы выбираете некоторые категории в нашем блоге.

UI-карта для фильмов

Карта отличный макет, сделанный с помощью HTML и CSS.

Карточка профиля

Очень хорошие анимации для карточки контакта, в которой мы можем реализовать доступ к профилям социальных сетей. HTML и CSS.

Карты в комплекте с Polaroid

Со свойствами, фильтрами и Пользовательские переходы CSS Создана серия сгруппированных карт Polaroid; не пропустите эти изображения SVG в Интернете.

Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

Полный путь к статье: Интернет-объявления » Технологии » CSS » 27 бесплатных карточек HTML и CSS для блогов, электронной коммерции и многого другого

2 комментариев, оставьте свой

Оставьте свой комментарий Отменить ответ

Cristian сказал

тому назад 5 лет
Любую из этих карточек можно будет вставить на страницу с помощью wordpress.

Стэн сказал

Карточки

Карточки Bootstrap предоставляют гибкий и расширяемый контейнер контента с множеством вариантов и опций.

На этой странице

Обзор

Карта — это гибкий и расширяемый контейнер содержимого. Он включает в себя варианты верхних и нижних колонтитулов, широкий выбор контента, контекстные цвета фона и мощные параметры отображения. Если Вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, лунки и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов модификаторов для карточек.

Пример

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

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

Placeholder

Заголовок карточки

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

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карты.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Типы содержимого

Карточки поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается.

Тело

Строительным блоком карты является .card-body . Используйте его, когда Вам нужен раздел на карточке с мягкой подкладкой.

Это некий текст в теле карточки.

div class="card"> div class="card-body"> Это некий текст в теле карточки. div> div>

Заголовки, текст и ссылки

Заголовки карт используются путем добавления .card-title к тегу . Таким же образом ссылки добавляются и размещаются рядом друг с другом путем добавления .card-link к тегу .

Подзаголовок используется путем добавления .card-subtitle к тегу . Если элементы .card-title и .card-subtitle помещены в элемент .card-body , заголовок карты и подзаголовок будут выровнены.

Заголовок карточки

Подзаголовок карточки

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

div class="card" style="width: 18rem;"> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> h6 class="card-subtitle mb-2 text-muted">Подзаголовок карточкиh6> p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.p> a href="#" class="card-link">Ссылка карточкиa> a href="#" class="card-link">Другая ссылкаa> div> div>

Изображения

.card-img-top помещает изображение в верхнюю часть карточки. С помощью .card-text , текст может быть добавлен к карточке. Текст внутри .card-text также можно стилизовать с помощью стандартных тегов HTML.

Placeholder

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

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> p class="card-text">Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.p> div> div>

Список групп

Создавайте списки содержимого в карточке с группой скрытого списка.

• Элемент
• Второй элемент
• Третий элемент

div class="card" style="width: 18rem;"> ul class="list-group list-group-flush"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> div>

Рекомендуемые

• Элемент
• Второй элемент
• Третий элемент

div class="card" style="width: 18rem;"> div class="card-header"> Рекомендуемые div> ul class="list-group list-group-flush"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> div>

• Элемент
• Второй элемент
• Третий элемент

Футер карточки

div class="card" style="width: 18rem;"> ul class="list-group list-group-flush"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> div class="card-footer"> Футер карточки div> div>

Кухонная мойка

Комбинируйте несколько типов контента, чтобы создать нужную Вам карточку, или добавьте туда все. Ниже показаны стили изображений, блоки, стили текста и группа списков — все они заключены в карточку фиксированной ширины.

Placeholder

Заголовок карточки

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

• Элемент
• Второй элемент
• Третий элемент

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.p> div> ul class="list-group list-group-flush"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> div class="card-body"> a href="#" class="card-link">Ссылка карточкиa> a href="#" class="card-link">Другая ссылкаa> div> div>

Верхний и нижний колонтитулы

Добавьте в карточку необязательный верхний и/или нижний колонтитулы.

Рекомендуемые

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card"> div class="card-header"> Рекомендуемые div> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Заголовки карточек можно стилизовать, добавив .card-header к элементам .

Рекомендуемые

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card"> h5 class="card-header">Рекомендуемыеh5> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Известная цитата, содержащаяся в элементе цитаты..

Кто-то известный в Заголовке источника

div class="card"> div class="card-header"> Цитата div> div class="card-body"> blockquote class="blockquote mb-0"> p>Известная цитата, содержащаяся в элементе цитаты..p> footer class="blockquote-footer">Кто-то известный в cite title="Заголовок источника">Заголовке источникаcite>footer> blockquote> div> div>

Рекомендуемые

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

2 дня спустя

div class="card text-center"> div class="card-header"> Рекомендуемые div> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div class="card-footer text-muted"> 2 дня спустя div> div>

Размеры

Карты не предполагают никакой определенной width для начала, поэтому они будут иметь ширину 100%, если не указано иное. Вы можете изменить это по мере необходимости с помощью настраиваемого CSS, классов сетки, примесей Sass сетки или утилит.

Использование разметки сетки

Используя сетку, оберните карточки в столбцы и строки по мере необходимости.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="row"> div class="col-sm-6"> div class="card"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div> div> div class="col-sm-6"> div class="card"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div> div> div>

Использование утилит

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

Заголовок карточки

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Заголовок карточки

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card w-75"> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Кнопкаa> div> div> div class="card w-50"> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Кнопкаa> div> div>

Использование собственного CSS

Используйте собственный CSS в таблицах стилей или как встроенные стили, чтобы задать ширину.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card" style="width: 18rem;"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Выравнивание текста

Вы можете быстро изменить выравнивание текста любой карточки — целиком или в отдельных частях — с помощью наших классов выравнивания текста.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card" style="width: 18rem;"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div> div class="card text-center" style="width: 18rem;"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div> div class="card text-end" style="width: 18rem;"> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Навигация

Добавьте навигацию в заголовок (или блок) карточки с помощью компонентов навигации Bootstrap.

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card text-center"> div class="card-header"> ul class="nav nav-tabs card-header-tabs"> li class="nav-item"> a class="nav-link active" aria-current="true" href="#">Активнаяa> li> li class="nav-item"> a class="nav-link" href="#">Ссылкаa> li> li class="nav-item"> a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключеннаяa> li> ul> div> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Особое обращение с заголовком

С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

div class="card text-center"> div class="card-header"> ul class="nav nav-pills card-header-pills"> li class="nav-item"> a class="nav-link active" href="#">Активнаяa> li> li class="nav-item"> a class="nav-link" href="#">Ссылкаa> li> li class="nav-item"> a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключеннаяa> li> ul> div> div class="card-body"> h5 class="card-title">Особое обращение с заголовкомh5> p class="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> a href="#" class="btn btn-primary">Перейти куда-нибудьa> div> div>

Изображения

Карточки включают несколько вариантов работы с изображениями. Выберите добавление «заглушки изображений» на обоих концах карточки, наложение изображений на содержимое карточки или просто встраивание изображения в карточку.

Заглушки изображения

Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижни “заглушки изображения” — изображения вверху или внизу карточки.

Placeholder

Заголовок карточки

Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад

Заголовок карточки

Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад

Placeholder

div class="card mb-3"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> div> div class="card"> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> img src=". " class="card-img-bottom" alt=". "> div>

Накладываемые изображения

Превратите изображение в фон карты и наложите на нее текст. В зависимости от изображения Вам могут потребоваться или не потребоваться дополнительные стили или утилиты.

Placeholder

Заголовок карточки

Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад

div class="card bg-dark text-white"> img src=". " class="card-img" alt=". "> div class="card-img-overlay"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> p class="card-text">Последнее обновление 3 мин. назадp> div> div>

Обратите внимание, что содержимое не должно быть больше высоты изображения. Если содержимое больше изображения, оно будет отображаться вне изображения.

По горизонтали

Используя комбинацию классов сетки и утилит, карточки можно сделать горизонтальными, чтобы они были удобными для мобильных устройств и гибкими. В приведенном ниже примере мы удаляем промежутки сетки с помощью .g-0 и используем классы .col-md-* , чтобы сделать карту горизонтальной в контрольной точке md . В зависимости от содержимого Вашей карточке могут потребоваться дополнительные корректировки.

Placeholder

Заголовок карточки

Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад

div class="card mb-3" style="max-width: 540px;"> div class="row g-0"> div class="col-md-4"> img src=". " class="img-fluid rounded-start" alt=". "> div> div class="col-md-8"> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> div> div> div>

Стили карточек

Карточки включают различные параметры для настройки их фона, границ и цвета.

Фон и цвет

Используйте цвет текста и утилиты фона, чтобы изменить внешний вид карточки.

Primary Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Secondary Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Success Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Danger Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Warning Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Info Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Light Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Dark Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Primary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-secondary mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Secondary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-success mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Success Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-danger mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Danger Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-warning mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Warning Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-info mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Info Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-dark bg-light mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Light Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card text-white bg-dark mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Dark Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div>

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden .

Граница

Используйте утилиты границ, чтобы изменить только border-color карточки. Обратите внимание, что Вы можете поместить классы .text- в родительский .card или подмножество содержимого карты, как показано ниже.

Primary Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Secondary Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Success Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Danger Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Warning Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Info Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Light Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

Dark Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

div class="card border-primary mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body text-primary"> h5 class="card-title">Primary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-secondary mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body text-secondary"> h5 class="card-title">Secondary Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-success mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body text-success"> h5 class="card-title">Success Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-danger mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body text-danger"> h5 class="card-title">Danger Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-warning mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Warning Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-info mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Info Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-light mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body"> h5 class="card-title">Light Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div> div class="card border-dark mb-3" style="max-width: 18rem;"> div class="card-header">Хедерdiv> div class="card-body text-dark"> h5 class="card-title">Dark Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div>

Утилиты примесей

Вы также можете при необходимости изменить границы верхнего и нижнего колонтитула карточки и даже удалить их background-color с .bg-transparent .

Success Заголовок карточки

Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.

div class="card border-success mb-3" style="max-width: 18rem;"> div class="card-header bg-transparent border-success">Хедерdiv> div class="card-body text-success"> h5 class="card-title">Success Заголовок карточкиh5> p class="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.p> div> div class="card-footer bg-transparent border-success">Подвалdiv> div>

Макет карточки

Помимо стилизации содержимого карточек, Bootstrap включает несколько опций для размещения серий карточек. В настоящее время эти параметры макета еще не работают.

Группа карточек

Используйте группы карточек для визуализации карточек как одного присоединенного элемента с столбцами одинаковой ширины и высоты. Группы карточек начинаются в стопке и используют display: flex; для прикрепления с одинаковыми размерами, начиная с контрольной точки sm .

Placeholder

Заголовок карточки

Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад

Placeholder

Заголовок карточки

Эта подсказка имеет вспомогательный текст ниже, как естественный ввод к дополнительному контенту.

Последнее обновление 3 мин. назад

Placeholder

Заголовок карточки

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

Последнее обновление 3 мин. назад

div class="card-group"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> div> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Эта подсказка имеет вспомогательный текст ниже, как естественный ввод к дополнительному контенту.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> div> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.p> p class="card-text">small class="text-muted">Последнее обновление 3 мин. назадsmall>p> div> div> div>

При использовании групп карточек с нижним колонтитулом их содержимое будет автоматически выровнено.

Placeholder

Заголовок карточки

Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. назад
Placeholder

Заголовок карточки

Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.

Последнее обновление 3 мин. назад
Placeholder

Заголовок карточки

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

Последнее обновление 3 мин. назад

div class="card-group"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div class="card-footer"> small class="text-muted">Последнее обновление 3 мин. назадsmall> div> div> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.p> div> div class="card-footer"> small class="text-muted">Последнее обновление 3 мин. назадsmall> div> div> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.p> div> div class="card-footer"> small class="text-muted">Последнее обновление 3 мин. назадsmall> div> div> div>

Сетка карточек

Используйте систему сеток Bootstrap и ее классы .row-cols , чтобы контролировать, сколько столбцов сетки (обернутых вокруг Ваших карточек) Вы показываете в ряд. Например, здесь .row-cols-1 выкладывает карточки в один столбец, а .row-cols-md-2 разделяет четыре карточки одинаковой ширины на несколько строк, от средней контрольной точки вверх.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

div class="row row-cols-1 row-cols-md-2 g-4"> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div>

Измените его на .row-cols-3 , и Вы увидите обертку четвертой карты.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.

div class="row row-cols-1 row-cols-md-3 g-4"> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.p> div> div> div> div class="col"> div class="card"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Заголовок карточкиh5> p class="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.p> div> div> div> div>

Если Вам нужна одинаковая высота, добавьте к карточкам .h-100 . Если Вы хотите по умолчанию одинаковые высоты, Вы можете установить $card-height: 100% в Sass.

Placeholder

Заголовок карточки

Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.