Карточка — это контейнер с облегчённым стилем, в который вы можете поместить практически любое содержимое. Для карточек доступно множество вариантов стилей, таких как выравнивание, отступы, цвета, заголовки и многое другое.
Базовая карточка
Чтобы создать базовую карточку, примените классы .card и .card-body к элементу, который определяет внешний контейнер карточки. Также добавьте .card-title к любым элементам заголовка и .card-text к текстовым элементам.
Дальше
Шапка и подвал
Вы можете добавить шапку и подвал, вставив с .card-header или .card-footer .
Заголовки HTML
Вы также можете применить класс .card-header к любому элементу заголовка HTML (т. е. к элементам — ).
Навигация в заголовке
Вы также можете добавить в карточку навигационные вкладки или пилюли.
Вкладки
Добавьте класс .card-header-tabs к элементу .
Пилюли
Добавьте класс .card-header-pills к элементу .
Содержимое заподлицо (убираем padding)
По умолчанию класс .card-body содержит padding, который обеспечивает хорошее эстетически приятное пространство между содержимым и границей карточки. В некоторых случаях вы можете удалить этот padding и выровнять содержимое заподлицо с краями карточки.
Солнце исчезает!
Чтобы создать содержимое заподлицо, не помещайте его в .card-body (потому что он содержит padding). Вместо этого уберите .card-body у внешнего и вложите его внутрь (в свой собственный ). Теперь вы можете поместить содержимое за пределами .card-body (но все ещё внутри .card ). Это эффективно удаляет padding, позволяя содержимому выстраиваться вплотную к краям карточки. При необходимости у вас может быть несколько элементов .card-body .
Обратите внимание, что при использовании содержимого с фиксированной шириной (например, изображений) может потребоваться указать ширину карточки, соответствующую ширине содержимого.
Содержимое, такое как изображения, может располагаться заподлицо с верхней частью карточки (чтобы верхние углы изображения совпадали со скруглёнными углами карточки). Для этого примените к элементу класс .card-img-top или .card-img-bottom .
Группа списков
Вы можете добавить группы списков в карточки. Используйте класс .list-group-flush , чтобы поместить группы заподлицо с границей карточки.
Ссылки
Выравнивание текста
Вы можете использовать любой из классов выравнивания текста Bootstrap для выравнивания текста внутри карточки. Это .text-left , .text-right , .text-center , .text-justify и .text-nowrap .
Солнце исчезает!
Весь доклад
Контекстные цвета
Вы можете использовать текстовые и фоновые утилиты Bootstrap для изменения цвета карточки.
Цвет границы
Вы также можете использовать утилиты границ Bootstrap.
Наложение текста
Вы можете применить к карточке изображение, поверх которого появится текст. Для этого добавьте класс .card-img-overlay к текстовому содержимому.
Ширина карточки
Карточки по умолчанию заполняют всё горизонтальное пространство. Вы можете изменить ширину с помощью нескольких методов.
CSS
Ширину можно задать явно с помощью CSS. Например, вы можете использовать такие свойства, как width или max-width. Некоторые из приведённых выше примеров используют CSS для ограничения ширины карточек.
Сетка
Как и с любым другим содержимым, вы можете поместить карточки внутрь сетки Bootstrap.
Скачать
Группа карточек
Группа карточек позволяет представить несколько карточек в виде одного связанного элемента с карточками одинаковой ширины и высоты. Для этого вложите все карточки в элемент .card-group .
Карточный стол
Карточный стол похож на группу карточек, за исключением того, что карточки на столе не связаны друг с другом. Для этого вложите все карточки в элемент .card-deck , который в свою очередь вложен в .card-deck-wrapper .
Колонки карточек
Bootstrap позволяет отобразить несколько карточек внутри каждой колонки, причём каждая карточка располагается ниже другой. Для этого вложите все карточки в элемент .card-columns .
Новое в Bootstrap 4
Карточки являются новыми в Bootstrap 4. Они заменяют функциональность, которая ранее предоставлялась панелями и миниатюрами.
Bootstrap 4 Card — Оформление контента в виде карточки
Card – это компонент Bootstrap 4, который позволяет оформить контент в виде карточки.
Карточка имеет гибкую структуру. Это означает, что её можно представить по-разному, например:
с заголовком (футером) или без него;
с использованием картинки (её можно расположить в верхней или нижней части) или без неё;
с произвольным количеством элементов и их расположением в основной части.
Кроме этого карточке можно ещё очень просто придать нужное цветовое оформление. Задать ей необходимый цвет фона, текста и границ.
Если вы использовали Bootstrap 3, то знаете, что компонента Card в нём нет. Данный компонент появился только в 4 версии и может использоваться в качестве замены таких компонентов Bootstrap 3 как Panels, Wells и Thumbnails.
Создание карточки
Создание карточки осуществляется посредством добавления к HTML элементу, например, div класса card .
Этот текст расположен внутри card-body.
После этого содержимое карточки необходимо наполнить нужным контентом.
Основные строительные фрагменты карточки:
card-body (текстовый контент);
card-img-top или card-img-bottom (изображение);
card-img-overlay (текстовый контент над изображением);
card-header (заголовок);
card-footer (футер);
list-group (список).
Добавления к карточке текстового контента (card-body)
Добавление текстового содержимого в карточку осуществляется посредством класса card-body .
Внутри HTML элемента с классом card-body можно использовать следующие классы:
card-title (для оформления заголовка);
card-subtitle (для стилизации подзаголовка);
card-text (для стилизации текста);
card-link (для оформления ссылок).
Заголовок карточки
Подзаголовок карточки
Некоторый текст.
Первая ссылка Вторая ссылка
Классы mb-2 и text-muted а примере используются для дополнительной стилизации подзаголовка. А именно для того чтобы задать отступ margin-bottom и изменить его цвет.
Добавление к карточке изображения (card-img-top или card-img-bottom)
В карточку можно поместить изображение. Осуществляется это с помощью элемента img и класса card-img-top или card-img-bottom . Класс card-img-top используется, когда изображение необходимо расположить в верхней области карточки, а card-img-bottom – в нижней части.
Добавление к карточке фона (card-img-overlay)
Изображение также можно использовать для создания фона карточки.
В этом варианте карточки текстовый контент будет накладываться на изображение. В зависимости от изображения вам для оформления текстового контента возможно потребуется добавить к нему дополнительные стили.
Добавления к карточке списка в табличном виде
Добавление в карточку списка List groups осуществляется следующим образом:
Добавление к карточке шапки и (или) футера
Добавление к карточке шапки (header) осуществляется с помощью класса card-header . Его, например, можно добавить к элементу div или h* .
Текст шапки.
.
Текст шапки.
.
Добавление в карточку футера осуществляется посредством класса card-footer .
Текст шапки.
Текстовый контент.
Текст футера.
Карточка с навигацией (в заголовке)
Добавить навигацию в заголовок карточки можно с помощью компонента Nav.
Смешивание фрагментов карточки
Вышеперечисленные строительные фрагменты карточки можно смешивать.
Например, спроектируем карточку, состоящую из:
Заголовок
.
1. 2. 3.
Ссылка №1Ссылка №2
Кроме элементов специально предназначенных для карточки, в ней можно размещать и другие элементы (например, форму):
Найти на сайте
Размеры карточки
Карточка по умолчанию занимает всю доступную ширину (100%) элемента, в которую она помещена.
Установить размеры карточке можно с помощью классов сетки, вспомогательных классов Bootstrap, CSS и др. способами.
Например, определим ширину карточек с помощью классов сетки Bootstrap:
На крохотных и маленьких экранах карточки будут располагаться вертикально (1×4), на средних экранах 2×2, а на больших — на одной горизонтальной линии (4×1).
Например, определим ширину карточек с помощью вспомогательного класса Bootstrap 4 w-* :
Установить необходимый размер карточки также можно с помощью CSS (например, посредством свойства width ):
Выравнивание текстового контента карточки
Выровнять текстовое содержимое карточки или её части можно с помощью следующих дополнительных классов Bootstrap 4:
text-left (по умолчанию) — по левому краю;
text-right – по правому краю;
text-center – по центру.
Цветовая настройка карточки
Карточке можно очень просто придать нужное цветовое оформление.
Осуществляется это с помощью следующих вспомогательных классов Bootstrap 4:
bg-{color} (например: bg-primary , bg-secondary , bg-success , bg-transparent и др.) – для установки цвета фона;
border-{color} (например: border-primary , border-secondary , border-success , border-danger и др.) – для установки цвета границам;
text-{color} (например: text-white , text-dark , text-primary , text-secondary , text-success и др.) – для установки цвета тексту.
Текст шапки
Заголовок карточки
Текст карточки.
Текст шапки
Заголовок карточки
Текст карточки.
Макеты для организации коллекции карточек
Bootstrap 4 имеет следующие классы для организации коллекции карточек:
card-group — представляет набор карточек в виде одного блока (карточки прикреплены друг к другу и имеют одинаковый размер);
card-deck — делает карточки одинаковой ширины и высоты, но не прикреплёнными друг к другу;
card-columns — предназначен для организации карточек в виде кирпичной кладки Masonry, упорядочиваются они сверху вниз и слева направо (в этом варианте карточки выстроены не с помощью flexbox, а посредством CSS-свойства column ).
Макеты для организации коллекции карточек являются пока ещё (в версии Bootstrap 4 Beta 2) не адаптивными.
В макете организованном с помощью класса card-columns можно очень просто настроить и изменить количество колонок на различных контрольных точках сетки:
/* 2 колонки на sm */ @media (min-width: 576px) { .card-columns { -webkit-column-count: 2; column-count: 2 } } /* 3 колонки на md */ @media (min-width: 768px) { .card-columns { -webkit-column-count: 3; column-count: 3 } } /* 4 колонки на lg и xl */ @media (min-width: 992px) { .card-columns { -webkit-column-count: 4; column-count: 4 } }
Как с помощью компонента Card создать Panels
Пример, как с помощью Bootstrap 4 Card можно очень просто создать элемент интерфейса Bootstrap 3 Panels.
