Вы здесь: Главная » Bootstrap » Компонент Card (Карточка) в Bootstrap-4

Компонент Card (Карточка) в Bootstrap-4

Компонент Bootstrap-4 Card (Карточка) - это удобный способ разметить контент в виде отдельных блоков, в которые могут быть включены текст, картинки, фоновое изображение. Он призван заменить такие популярные компоненты 3-й версии Bootstrap, как  panels, wells и thumbnails. В этой статье мы рассмотрим варианты использования компонента Card (Карточка).

Поскольку в этом компоненте "уместилось" большое количество функционала + он заменил собой несколько компонентов Bootstrap-3, статья будет долгой, и рассматривать мы будем следующие возможности компонента Card:

  1. Стандартная разметка карточки
  2. Изображения в компоненте Card
  3. Фоновые изображения для карточек
  4. Шапка и подвал для карточки
  5. Использование цветовых классов для компонента Card
  6. Замена компонентом Card компонентов Panel и List Group из Bootstrap-3
  7. Выравнивание контента и ширина карточки
  8. Группы карточек
  9. Использование навигации

В каждом блоке информации вы найдете практические примеры с разметкой и кодом, реализованные с помощью сервиса codepen.io. Код можно скопировать с вкладки HTML или отредактировать на Codepen по-своему.

Стандартная разметка карточки

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

Стандартная разметка карточки включает классы:

  • .card - основной тег компонента,
  • .card-body - содержит текст и заголовки,
  • .card-title - для заголовка
  • и .card-text - для оформления абзацев.

Для изображений предназначен класс .card-img-top, т.е. компонент Карточка содержит именно те блоки, которые часто используются в дизайне.  Вариант разметки представлен ниже:

Если вы используете этот код, то получите карточку, которая занимает все пространство родительского элемента. Поэтому для класса .card имеет смысл использовать либо классы размеров  Bootstrap, либо классы его сетки.

Код класса .card показан на рисунке ниже:

Стили класса card

В примере ниже к классу card добавлены  класс my-4 для отступов сверху и снизу, а также w-50 для создания ширины в 50% от размера родительского элемента - div-а с классом container.

See the Pen Bootstrap-4 single card by Elen (@ambassador) on CodePen.18892

Для того чтобы можно было создать сразу несколько компонентов, поместим их в классы сетки Bootstrap 4, используя аббревиатуру Emmet (при копировании уберите лишние переносы, иначе аббревиатура раскроется неправильно):

Внешний вид и разметку можно посмотреть на примере:

See the Pen Bootstrap-4 Card by Elen (@ambassador) on CodePen.18892

Изображения в компоненте Card (Карточка)

Предыдущие примеры содержали в верхней части класса card изображение с классом card-img-top.

Менее распространенный вариант - это размещение изображения в нижней части блока. В этом случае изображение будет последним элементом в разметке класса и ему назначается класс card-img-bottom. Поскольку основной класс компонента Карточка - .card - имеет закругления, то и изображения также должны быть скруглены. Разница в классах card-img-top и  card-img-bottom заключается в том, что они имеют скругления для разных углов.

Вариант нижнего размещения изображения с классом card-img-bottom представлен ниже:

See the Pen Card with class card-img-bottom by Elen (@ambassador) on CodePen.18892

Использование карточек с фоновыми изображениями

Еще одним вариантом использования изображений в карточках - это назначение фоновых изображений. Раньше это нужно было делать вручную в css-коде, используя свойство background-image. Теперь достаточно указать класс .card-img-overlay - и изображение станет фоном вашей карточки. Правила этого класса таковы:

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

Здесь есть 3 "подставы":

  1. Изображение должно быть либо очень светлым, чтобы на нем читался темный текст, либо затемненным, чтобы можно было тексту задать белый или светлый цвет.
  2. Размер изображения нужно подобрать так, чтобы оно хорошо смотрелось и при растягивании, и при сужении, т.к. при изменении размеров блока с классом .card изображение будет принимать его размеры.
  3. Текст при избыточном его количестве может выходить за пределы контейнера при определенных разрешениях экрана. Т.е. нужно подбирать размеры изображения и размеры текста, чтобы на различных экранах внешний вид компонента радовал глаз.

Разметка компонента Card с фоновым изображением включает img с классом card-img  для вставки изображения и div с классом card-img-overlay для размещения в нем текста, заголовка, кнопок:

В примере ниже текст не помещается в пределы класса .card при той разметке, которая есть по умолчанию При клике на кнопке "More details" вы можете скрыть последний абзац, чтобы увидеть разницу.

See the Pen Bootstrap Card overlay by Elen (@ambassador) on CodePen.18892

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

Для разметки шапки вам понадобится класс card-header, который может быть назначен либо для div, либо для заголовков h1 - h6 и размещается ДО элемента с классом card-body:

Разметка с заголовком:

Для создания подвала ситуация аналогична: после div-a с классом card-body необходимо разместить div или заголовок с классом .card-footer.  Разметка стандартного вида:

По умолчанию, что .card-header, что .card-footer имеет background-colorrgba(0,0,0,.03), т.е. светло-серый цвет. Вы можете изменить его, использовав цветовые классы Bootstrap:

Также можно использовать различные классы для добавления цветных рамок, например .border-success или .border-danger.  Причем их можно задавать как для всего элемента с классом card, так и для .card-header или .card-footer , или для .card-body. Цвет фона  для шапки и подвала можно сделать прозрачным с помощью класса bg-transparent. Внутри любого элемента можно использовать цветовые классы для текста, например, .text-primary или .text-warning.

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

See the Pen Bootstrap Card header and footer by Elen (@ambassador) on CodePen.18892

Использование цветовых классов для компонента Card

Если есть необходимость "раскрасить" карточки, можно использовать цветовые классы Bootstrap  для создания разметки. Для всего класса .card или для его внутренних блоков можно использовать классы .bg-{color} , например, например: bg-primary, bg-secondary, bg-success, bg-transparent и др. и/или .text-color(text-success, text-danger, text-primarytext-secondary, text-white, text-dark, text-secondary). Также можно использовать классы для цветового оформления рамок типа border-{color}: border-primary, border-secondary, border-success, border-danger и т.п.

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

See the Pen Colored Bootstrap Cards by Elen (@ambassador) on CodePen.18892

Кроме цвета фона, можно использовать цвет для рамки. Его можно указывать как для всего класса .card, так и для класса .card-header. Стандартный вариант компонента Card представлен в самом конце.

See the Pen Bootstrap Card bordered by Elen (@ambassador) on CodePen.18892

Заменяем компонентом Card компоненты Panel и List Group из Bootstrap-3

Возможно, вы уже имеете опыт использования компонентов List Group или Panels в 3-й версии Bootstrap. Теперь вы можете заменить их с помощью компонента Карточки (Card).

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

Для того чтобы добавить заголовок, необходимо создать div с классом card-header. По умолчанию цвет заголовка будет светло-серым, но можно добавить цветовые классы вида .bg-{color} или .text-{color}. В примере ниже использован класс bg-primary:

Список может быть расширен изображением (используем класс card-img-top или card-img-bottom), а также любым текстом, заголовками, ссылками и кнопками, размещенными в div с классом  card-body:

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

See the Pen List group in Card Component by Elen (@ambassador) on CodePen.18892

Для создания панелей, аналогичных компоненту Panels в Bootstrap-3, используем разметку компоненте Card такого вида:

Если необходимо добавить группу списков, то разметка изменится таким образом:

Примеры панелей с помощью компонента Card вживую:

See the Pen Panel in Card Component Bootstrap-4 by Elen (@ambassador) on CodePen.18892

Выравнивание контента в карточках. Ширина карточки

Как и для любых текстовых элементов, в карточках можно использовать классы для выравнивания текста:

  • text-left (по умолчанию) - текст по левому краю
  • text-center - текст по центру
  • text-right  - текст по правому краю
  • text-justify -  текст выровнен по ширине.

Что касается размера карточки, то по умолчанию <div class="card"> занимает все доступное пространство внутри родительского контейнера, т.к. является блочным элементом.

Ширину карточки можно изменить либо с помощью классов сетки, поместив ее внутрь div с классом типа .col-{breakepoint}-цифра (вы это видели в предыдущих примерах), либо задав ей ширину с помощью одного из классов, начинающихся с приставки w-: w-25, w-50, w-75, w-100.

Ниже вы найдете примеры с различным выравниванием текста и разной шириной карточек. Смотрите в код на вкладке HTML.

See the Pen Text Aligment in Card Component Bootstrap-4 by Elen (@ambassador) on CodePen.18892

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

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

  • card-group - для создания группы без разделения их отступами, только линиями. Поскольку используется технология Flexbox Layout, то высота всех карточек одинакова вне зависимости от количества текста в каждой
  • card-deck - для формирования карточек с отступами между ними в 30px. Карточки имеют одинаковую высоту и ширину.column count
  • card-columns- для размещения карточек в виде популярной кирпичной кладки аналогично плагину Masonry, благодаря которой карточки размещаются слева направо и сверху вниз. В этом случае размещением управляет не Flexbox Layout, а css-свойство column-count.  На скриншоте видны свойства для .card-columns при минимальной ширине экрана в 576px. Здесь задается количество колонок column-count: 3.

Все классы перестраиваются в одну колонку при изменении разрешения экранов менее 576px.

Первый пример - использование класса card-group- для создания группы без отступов.

Группировка карточек без отступов:

See the Pen Card groups Bootstrap-4 by Elen (@ambassador) on CodePen.18892

Группировка карточек с отступами:

Пример группировки с помощью класса card-deck:

See the Pen Card Deck in Bootstrap-4 by Elen (@ambassador) on CodePen.18892

Разметка столбцов по типу кирпичной кладки имеет тот же принцип, что и предыдущие, но родительским элементом выступает <div class="card-column">:

Пример группировки с помощью класса card-column:

See the Pen Card Columns in Bootstrap-4 by Elen (@ambassador) on CodePen.18892

В макете, который организован на основе класса card-columns, можно изменить количество колонок на breakpoint-ах сетки с помощью медиа-запросов:

Переключайте в примерах видимость вкладки HTML, чтобы увидеть, как перестраиваются карточки.

Использование навигации в компоненте Карточка (Card)

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

Первый вариант разметки включает в себя управление вкладками (Tabs) с помощью списка ul с классами nav, nav-tabs и card-header-tabs. Кроме того, в ссылках, расположенных в элементах li этого списка, присутствуют атрибуты data-toggle="tab" и href="#tabцифра", которые позволяют переключать контент в <div class="card-body tab-content">. В этом div-е размещены элементы с классами tab-pane и fade, у которых есть атрибут id="#tabцифра". Активный элемент (вкладка с отображаемым на данный момент текстом) имеет еще классы show и active.

Пример разметки карточки с использованием кнопок меню (Pills) представлен ниже. Обратите внимание на классы, которые добавлены в .card-header и .card-body, а также на связь элементов ссылок и div-ов с классом tab-pane - в каждой ссылке есть атрибут href="#pillцифра" и data-toggle="tab", а в div-е присутствует атрибут id="pillцифра". Таким образом привязывается отображение определенного контента при клике на кнопке-ссылке.

В примере ниже вы найдете код и внешний вид обоих вариантов навигации.

Важно! При использовании навигации, у вас должны быть подключены к шаблону jQuery и bootstrap.js. Иначе щелчки по вкладкам или кнопкам ни к чему не приведут.

See the Pen Bootstrap-4 Card with Navigation by Elen (@ambassador) on CodePen.18892

 

 
 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *