Начальная загрузка 4 карты
Открытки
Карточка в Bootstrap 4 — это рамка с отступом вокруг содержимого. Он включает в себя параметры для верхних и нижних колонтитулов, содержимого, цветов и т. д.
Базовая карта
Базовая карточка создается с .cardклассом, а содержимое внутри карточки имеет .card-bodyкласс:
Пример
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Если вы знакомы с Bootstrap 3, карточки заменят старые панели, колодцы и миниатюры.
Верхний и нижний колонтитулы
Класс .card-headerдобавляет заголовок к карточке, а .card-footerкласс добавляет к карточке нижний колонтитул:
Пример
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Контекстные карты
Чтобы добавить цвет фона карты, используйте контекстные классы ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondaryи .bg-dark..bg-light
Пример
Заголовки, текст и ссылки
Используйте .card-titleдля добавления заголовков карточек к любому элементу заголовка. Класс .card-textиспользуется для удаления нижних полей для элемента <p>, если он является последним дочерним элементом (или единственным) внутри .card-body. Класс .card-linkдобавляет синий цвет к любой ссылке и эффект наведения.
Пример
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Карточные изображения
Добавьте .card-img-topили .card-img-bottomк ,
<img>чтобы поместить изображение вверху или внизу внутри карточки. Обратите внимание, что мы добавили изображение за пределами, .card-bodyчтобы охватить всю ширину:
Пример
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Растянутая ссылка
Добавьте .stretched-linkкласс к ссылке внутри карты, и он сделает всю карту доступной для кликов и наведения (карта будет действовать как ссылка):
Пример
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Наложения изображений карт
Превратите изображение в фон карты и используйте .card-img-overlay
для добавления текста поверх изображения:
Пример
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Колонки карт
Какой-то текст внутри первой карты
Некоторый текст внутри второй карты
Какой-то текст внутри третьей карты
Некоторый текст внутри четвертой карты
Какой-то текст внутри пятой карты
Некоторый текст внутри шестой карты
Класс .card-columnsсоздает сетку из карточек в виде кирпичной кладки (как в pinterest). Макет будет автоматически корректироваться по мере того, как вы будете вставлять новые карты.
Примечание . Карточки отображаются вертикально на маленьких экранах (менее 576 пикселей):
Пример
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Колода
Какой-то текст внутри первой карты
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Некоторый текст внутри второй карты
Какой-то текст внутри третьей карты
Некоторый текст внутри четвертой карты
Класс .card-deckсоздает сетку из карточек одинаковой высоты и ширины . Макет будет автоматически корректироваться по мере того, как вы будете вставлять новые карты.
Примечание . Карточки отображаются вертикально на маленьких экранах (менее 576 пикселей):
Пример
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Группа карт
Какой-то текст внутри первой карты
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Еще немного текста для увеличения высоты
Некоторый текст внутри второй карты
Какой-то текст внутри третьей карты
Некоторый текст внутри четвертой карты
Класс .card-groupпохож на .card-deck. Единственное отличие состоит в том, что .card-groupкласс удаляет левое и правое поля между каждой карточкой.
Примечание . Карточки отображаются вертикально на маленьких экранах (менее 576 пикселей), С верхним и нижним полем:
Пример
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>