Карточки
Карточки Bootstrap предоставляют собой гибкий и расширяемый контейнер контента с множеством вариантов и опций.
О карточках
Карточка - это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, углубления и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов-модификаторов для карточек.
Пример
Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами Bootstrap, т.к. они созданы с помощью «флексбокса». По умолчанию они не имеют margin, поэтому при необходимости используйте утилиты отступов.
Внизу – пример базовой карточки фиксированной ширины со смешанным содержимым. Карточки не имеют фиксированной ширины по умолчанию, так что они будут автоматически заполнять полную ширину родительского элемента. Этот параметр можно настроить с помощью различных опций размеров.
Название карточки
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><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="btn btn-primary">Go somewhere</a></div></div>Типы содержимого
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, списки, и т.д. Примеры - ниже.
Тело
«Фундамент» карточки – класс .card-body. Используйте его всегда, когда вам нужна выделенная секция внутри карточки.
<divclass="card"><divclass="card-body"> This is some text within a 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.
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card"style="width: 18rem;"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div>Группы списков
Создавайте списки содержимого в карточке с помощью «расширенных» списков.
- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul></div>- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><divclass="card-header"> Featured </div><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul></div>- An item
- A second item
- A third item
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><divclass="card-footer"> Card footer </div></div>«Плавильный котел» (В смысле: бросайте все что есть)
Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.
Заголовок карточки
Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.
- An item
- A second item
- A third item
<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">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third 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 bg-dark text-white"><imgsrc="..."class="card-img"alt="..."><divclass="card-img-overlay"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><pclass="card-text">Last updated 3 mins ago</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>Стили карточек
У карточек есть множество опций для настройки их фона, границ и цвета.
Фон и цвет
Используйте цвет текста и утилиты фона, чтобы изменить внешний вид карточки.
Primary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Secondary Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Success Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Danger Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Warning Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Info Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Light Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
Dark Заголовок карточки
Несколько быстрых примеров текста для построения на основе Заголовок карточки и составления основной части содержимого карточки.
<divclass="card text-white 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-white 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-white 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-white 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-dark 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-dark 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-dark 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-white 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.
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Название карточки
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>При использовании групп карточек с «подвалами» содержимое карточек расположится автоматически.
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This card has supporting text below as a natural lead-in to additional content.
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<divclass="card-group"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div>Сеточные карты
Используйте систему сеток Bootstrap и ее классы столбцов .row-cols чтобы контролировать количество отображаемых в строке столбцов сетки (обернутых вокруг ваших карт). Например, указав .row-cols-1 карты раскладываются по одному столбцу, а указав .row-cols-md-2 разбивает четыре карты на равную ширину по нескольким рядам от средней до точки останова.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div></div>Измените на .row-cols-3 и вы увидите четвертую карту.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p></div></div></div><divclass="col"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div></div>Когда вам понадобится одинаковая высота, добавьте .h-100 к карточкам. Если вы хотите иметь одинаковую высоту по умолчанию, вы можете установить $card-height: 100% в Sass.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This is a short card.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content.
Название карточки
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</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">This is a short card.</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">This is a longer card with supporting text below as a natural lead-in to additional content.</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">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div></div></div></div>Как и в случае с группами карточек, нижние колонтитулы карточек выстраиваются автоматически.
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Название карточки
This card has supporting text below as a natural lead-in to additional content.
Название карточки
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
<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">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</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">This card has supporting text below as a natural lead-in to additional content.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</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">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p></div><divclass="card-footer"><smallclass="text-muted">Last updated 3 mins ago</small></div></div></div></div>Masonry
В версии v4 мы использовали только метод CSS, чтобы имитировать поведение столбцов, подобных Masonry, но этот метод имел множество неприятных побочных эффектов. Если вы хотите иметь этот тип макета в версии v5, то вы можете просто использовать плагин Masonry. Masonry не входит в Bootstrap, но мы сделали демонстрационный пример, который поможет вам начать работу.
Sass
Переменные
$card-spacer-y:$spacer;$card-spacer-x:$spacer;$card-title-spacer-y:$spacer*.5;$card-border-width:$border-width;$card-border-radius:$border-radius;$card-border-color:rgba($black,.125);$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;