Карточки
Карточки Bootstrap предоставляют собой гибкий и расширяемый контейнер контента с множеством вариантов и опций.
О карточках
Карточка - это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, углубления и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов-модификаторов для карточек.
Пример
Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами Bootstrap, т.к. они созданы с помощью «флексбокса». По умолчанию они не имеют margin, поэтому при необходимости используйте утилиты интервал.
Внизу – пример базовой карточки фиксированной ширины со смешанным содержимым. Карточки не имеют фиксированной ширины по умолчанию, так что они будут автоматически заполнять полную ширину родительского элемента. Этот параметр можно настроить с помощью различных параметров размера.
Заголовок карточки
Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карты.
Перейти куда-нибудь<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карты.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Типы содержимого
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, списки, и т.д. Примеры - ниже.
Тело
«Фундамент» карточки – класс .card-body. Используйте его всегда, когда вам нужна выделенная секция внутри карточки.
<divclass="card"><divclass="card-body"> Это некий текст в теле карточки.
</div></div>Названия, текст и ссылки
Названия карточек создаются добавлением класса .card-title к тэгу <h*>. Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link в тэг <a>.
«Подназвания» добавляются классом .card-subtitle в тэг <h*>. Если элементы с классами .card-title и .card-subtitle размещены в элементе с классом .card-body, название и «подназвание» карточки выровняются прекрасно.
Название карточки
Подзаголовок карты
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother link<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Название карточки</h5><h6class="card-subtitle mb-2 text-muted">Подзаголовок карты</h6><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div>Изображения
Класс .card-img-top размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .card-text. Текст внутри этого класса может быть оформлен стандартными тегами HTML.
Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><pclass="card-text">Небольшой пример текста, который должен основываться на названии карточки и составлять основную часть содержимого карточки.</p></div></div>Группы списков
Создавайте списки содержимого в карточке с группой скрытого списка.
- Элемент
- Второй элемент
- Третий элемент
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul></div>- Элемент
- Второй элемент
- Третий элемент
<divclass="card"style="width: 18rem;"><divclass="card-header"> Рекомендуемые
</div><ulclass="list-group list-group-flush"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul></div>- Элемент
- Второй элемент
- Третий элемент
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><divclass="card-footer"> Футер карточки
</div></div>«Плавильный котел» (В смысле: бросайте все что есть)
Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.
Заголовок карточки
Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.
- Элемент
- Второй элемент
- Третий элемент
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.</p></div><ulclass="list-group list-group-flush"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><divclass="card-body"><ahref="#"class="card-link">Ссылка карточки</a><ahref="#"class="card-link">Другая ссылка</a></div></div>Заголовок и «подвал»
Добавьте в карточку необязательный верхний и/или нижний колонтитулы.
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card"><divclass="card-header"> Рекомендуемые </div><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Заголовки карточек можно стилизовать, добавив .card-header к элементам <h*>.
Рекомендуемые
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card"><h5class="card-header">Рекомендуемые</h5><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Известная цитата, содержащаяся в элементе цитаты..
<divclass="card"><divclass="card-header"> Цитата </div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>Известная цитата, содержащаяся в элементе цитаты..</p><footerclass="blockquote-footer">Кто-то известный в <citetitle="Заголовок источника">Заголовке источника</cite></footer></blockquote></div></div>Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card text-center"><divclass="card-header"> Рекомендуемые </div><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div><divclass="card-footer text-muted"> 2 дня спустя </div></div>Размеры
У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.
Использование разметки сеток
При необходимости используйте сетку, чтобы обернуть карточки в колонки и ряды.
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудьОсобое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="row"><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div></div><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div></div></div>Использование утилит
Используйте наши утилиты размеров для быстрой настройки ширины карточки.
Заголовок карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
КнопкаЗаголовок карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Кнопка<divclass="card w-75"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div><divclass="card w-50"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div>Использование собственного CSS
Чтобы задать ширину используйте обычный CSS в таблицах стилей или как встроенные стили.
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Выравнивание текста
Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудьОсобое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудьОсобое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div><divclass="card text-center"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div><divclass="card text-end"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Навигация
Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.
Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"aria-current="true"href="#">Активная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенная</a></li></ul></div><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Особое обращение с заголовком
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Перейти куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Активная</a></li><liclass="nav-item"><aclass="nav-link"href="#">Ссылка</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Отключенная</a></li></ul></div><divclass="card-body"><h5class="card-title">Особое обращение с заголовком</h5><pclass="card-text">С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p><ahref="#"class="btn btn-primary">Перейти куда-нибудь</a></div></div>Изображения
В карточках есть настройки для работы с изображениями. Вы можете добавить «уменьшенное изображение» к низу карточки, наложить содержимое карточки на изображение либо просто вставить его в карточку.
Заглушки изображения
Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижни “заглушки изображения” — изображения вверху или внизу карточки.
Заголовок карточки
Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. назад
Заголовок карточки
Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. назад
<divclass="card mb-3"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div></div><divclass="card"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div><imgsrc="..."class="card-img-bottom"alt="..."></div>«Наложение» изображений
Превратите изображение в фон карты и наложите на нее текст. В зависимости от изображения Вам могут потребоваться или не потребоваться дополнительные стили или утилиты.
<divclass="card text-bg-dark"><imgsrc="..."class="card-img"alt="..."><divclass="card-img-overlay"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text">Последнее обновление 3 мин. назад</p></div></div>По горизонтали
Используя комбинацию классов сетки и утилит, карточки можно сделать горизонтальными, чтобы они были удобными для мобильных устройств и гибкими. В приведенном ниже примере мы удаляем промежутки сетки с помощью .g-0 и используем классы .col-md-*, чтобы сделать карту горизонтальной в контрольной точке md. В зависимости от содержимого Вашей карточке могут потребоваться дополнительные корректировки.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. назад
<divclass="card mb-3"style="max-width: 540px;"><divclass="row g-0"><divclass="col-md-4"><imgsrc="..."class="img-fluid rounded-start"alt="..."></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div></div></div></div>Стили карточек
У карточек есть множество опций для настройки их фона, границ и цвета.
Фон и цвет
Добавлено в версии 5.2.0Установите background-color с контрастным color переднего плана с помощью наших помощников .text-bg-{color}. Раньше требовалось вручную сопоставлять выбранные вами .text-{color} и .bg-{color} утилиты для оформления, которые вы по-прежнему можете использовать, если хотите.
Primary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Secondary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Success Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Danger Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Warning Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Info Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Light Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Dark Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
<divclass="card text-bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Primary Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Secondary Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Success Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Danger Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Warning Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Info Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Light Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card text-bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Хедер</div><divclass="card-body"><h5class="card-title">Dark Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div>Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.
Границы
Используйте утилиты границ для изменения атрибут border-color карточки. Заметьте, что вы можете вставить классы .text-{color} в родительский элемент класса .card или в поднабор содержимого карточки – как показано ниже.
Primary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Secondary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Success Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Danger Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Warning Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Info Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Light Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Dark Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
<divclass="card border-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body text-primary"><h5class="card-title">Primary Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body text-secondary"><h5class="card-title">Secondary Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body text-success"><h5class="card-title">Success Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body text-danger"><h5class="card-title">Danger Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body"><h5class="card-title">Warning Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-info mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body"><h5class="card-title">Info Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-light mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body"><h5class="card-title">Light Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div><divclass="card border-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Шапка</div><divclass="card-body text-dark"><h5class="card-title">Dark Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div></div>Утилиты миксинов
Вы также можете изменить границы заголовка карточки и «подвала», и даже удалить их background-color с помощью класса .bg-transparent.
Success Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
<divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header bg-transparent border-success">Шапка</div><divclass="card-body text-success"><h5class="card-title">Success Заголовок карточки</h5><pclass="card-text">Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.</p></div><divclass="card-footer bg-transparent border-success">Подвал</div></div>Расположение карточек
В дополнение к стилизации содержимого карточек, Bootstrap включает несколько параметров расположения серий карточек. В настоящее время эти параметры не являются отзывчивыми..
Группы карточек
Используйте группы карточек для визуализации карточек как одного присоединенного элемента с столбцами одинаковой ширины и высоты. Группы карточек начинаются в стопке и используют display: flex; для прикрепления с одинаковыми размерами, начиная с контрольной точки sm.
Заголовок карточки
Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. назад
Заголовок карточки
Эта подсказка имеет вспомогательный текст ниже, как естественный ввод к дополнительному контенту.
Последнее обновление 3 мин. назад
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
Последнее обновление 3 мин. назад
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Эта подсказка имеет вспомогательный текст ниже, как естественный ввод к дополнительному контенту.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p><pclass="card-text"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></p></div></div></div>При использовании групп карточек с нижним колонтитулом их содержимое будет автоматически выровнено.
Заголовок карточки
Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карточка с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div></div>Сеточные карты
Используйте систему сеток Bootstrap и ее классы столбцов .row-cols чтобы контролировать количество отображаемых в строке столбцов сетки (обернутых вокруг ваших карт). Например, указав .row-cols-1 карты раскладываются по одному столбцу, а указав .row-cols-md-2 разбивает четыре карты на равную ширину по нескольким рядам от средней до точки останова.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-2 g-4"><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Измените его на .row-cols-3, и Вы увидите обертку четвертой карты.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-3 g-4"><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Если Вам нужна одинаковая высота, добавьте к карточкам .h-100. Если Вы хотите по умолчанию одинаковые высоты, Вы можете установить $card-height: 100% в Sass.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Это короткая карточка.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Заголовок карточки
Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
<divclass="row row-cols-1 row-cols-md-3 g-4"><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это короткая карточка.</p></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.</p></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более длинная карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div></div></div></div>Как и в случае с группами карточек, нижние колонтитулы карточек выстраиваются автоматически.
Заголовок карточки
Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.
Заголовок карточки
Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.
Заголовок карточки
Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<divclass="row row-cols-1 row-cols-md-3 g-4"><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта с вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Этот контент немного длиннее.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div></div><divclass="col"><divclass="card h-100"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Это более широкая карта С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.</p></div><divclass="card-footer"><smallclass="text-muted">Последнее обновление 3 мин. назад</small></div></div></div></div>Masonry
В версии v4 мы использовали только метод CSS, чтобы имитировать поведение столбцов, подобных Masonry, но этот метод имел множество неприятных побочных эффектов. Если вы хотите иметь этот тип макета в версии v5, то вы можете просто использовать плагин Masonry. Masonry не входит в Bootstrap, но мы сделали демонстрационный пример, который поможет вам начать работу.
CSS
Переменные
Добавлено в версии 5.2.0В рамках развивающегося подхода Bootstrap к переменным CSS карты теперь используют локальные переменные CSS на .card для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.
--#{$prefix}card-spacer-y:#{$card-spacer-y};--#{$prefix}card-spacer-x:#{$card-spacer-x};--#{$prefix}card-title-spacer-y:#{$card-title-spacer-y};--#{$prefix}card-border-width:#{$card-border-width};--#{$prefix}card-border-color:#{$card-border-color};--#{$prefix}card-border-radius:#{$card-border-radius};--#{$prefix}card-box-shadow:#{$card-box-shadow};--#{$prefix}card-inner-border-radius:#{$card-inner-border-radius};--#{$prefix}card-cap-padding-y:#{$card-cap-padding-y};--#{$prefix}card-cap-padding-x:#{$card-cap-padding-x};--#{$prefix}card-cap-bg:#{$card-cap-bg};--#{$prefix}card-cap-color:#{$card-cap-color};--#{$prefix}card-height:#{$card-height};--#{$prefix}card-color:#{$card-color};--#{$prefix}card-bg:#{$card-bg};--#{$prefix}card-img-overlay-padding:#{$card-img-overlay-padding};--#{$prefix}card-group-margin:#{$card-group-margin};Переменные Sass
$card-spacer-y:$spacer;$card-spacer-x:$spacer;$card-title-spacer-y:$spacer*.5;$card-border-width:$border-width;$card-border-color:var(--#{$prefix}border-color-translucent);$card-border-radius:$border-radius;$card-box-shadow:null;$card-inner-border-radius:subtract($card-border-radius,$card-border-width);$card-cap-padding-y:$card-spacer-y*.5;$card-cap-padding-x:$card-spacer-x;$card-cap-bg:rgba($black,.03);$card-cap-color:null;$card-height:null;$card-color:null;$card-bg:$white;$card-img-overlay-padding:$spacer;$card-group-margin:$grid-gutter-width*.5;