Карточки
Карточки 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, заголовок карты и подзаголовок будут выровнены.
Заголовок карточки
Подзаголовок карточки
Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.
Ссылка карточкиДругая ссылка<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><h6class="card-subtitle mb-2 text-body-secondary">Подзаголовок карточки</h6><pclass="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.</p><ahref="#"class="card-link">Ссылка карточки</a><ahref="#"class="card-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 mb-3 mb-sm-0"><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 mb-3"><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 mb-3"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 mb-3"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">Отключенная</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">Отключенная</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"><small>Последнее обновление 3 мин. назад</small></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-body-secondary">Последнее обновление 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"><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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-body-secondary">Последнее обновление 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-title-color:#{$card-title-color};--#{$prefix}card-subtitle-color:#{$card-subtitle-color};--#{$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-title-color:null;$card-subtitle-color:null;$card-border-width:var(--#{$prefix}border-width);$card-border-color:var(--#{$prefix}border-color-translucent);$card-border-radius:var(--#{$prefix}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(var(--#{$prefix}body-color-rgb),.03);$card-cap-color:null;$card-height:null;$card-color:null;$card-bg:var(--#{$prefix}body-bg);$card-img-overlay-padding:$spacer;$card-group-margin:$grid-gutter-width*.5;