Bootstrap 4 Cards
Карты
Карта в 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 CSS</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Наложения изображений карты
Превратите изображение в фон карты и используйте .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 CSS</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Card Columns
Некоторый текст внутри первой карточки
Некоторый текст внутри второй карточки
Некоторый текст внутри третьей карты
Некоторый текст внутри четвертой карточки
Текст внутри пятой карты
Текст внутри шестой карты
.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
Some text inside the first card
Some more text to increase the height
Some more text to increase the height
Some more text to increase the height
Some text inside the second card
Some text inside the third card
Some text inside the fourth card
Класс карт-палубы создает сетку карт с одинаковой высотой и шириной. Компоновка будет автоматически корректироваться при вставке дополнительных карточек.
Примечание: Карты отображаются вертикально на маленьких экранах (менее 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
Some text inside the first card
Some more text to increase the height
Some more text to increase the height
Some more text to increase the height
Some text inside the second card
Some text inside the third card
Some text inside the fourth card
.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>