Карточки Bootstrap 4

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

О карточках

Карточка – это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, - карты заменили наши старые панели, «колодцы» (закругленная граница вокруг элемента с серой заливкой и паддингом) и маленькие версии изображений - «тамбнейлы». Схожая с этими элементами функциональность доступна для карточек в виде классов-модификаторов.

Пример

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

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

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

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

Идти куда-нибудь

<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 к тэгу <h*>. Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link в тэг <a>.

«Подназвания» добавляются классом .card-subtitle в тэг <h*>. Если элементы с классами .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. Текст внутри этого класса может быть оформлен стандартными тегами HTML.

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

Списки

Создавайте списки содержимого в карточке с помощью «расширенных» списков.

An item
A second item
A third item

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  </ul>
 </div>

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

An item
A second item
A third item

<div class="card" style="width: 18rem;">
  <div class="card-header">
  Рекомендуемые
  </div>
  <ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  </ul>
 </div>

An item
A second item
A third item

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

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
  Подвал карточки
  </div>
 </div>

«Плавильный котел» (в смысле – бросайте все что есть)

Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.

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

An item
A second item
A third item

Ссылка карточки Другая ссылка

<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">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third 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 к элементам <h*>.

Особое обращение с титулом

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

Идти куда-нибудь

<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 days ago

<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 days ago
  </div>
 </div>

Размеры

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