Карточки
Карточки 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.
Переход куда-нибудь<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">Переход куда-нибудь</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.
Ссылка картыДругая ссылка<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">Ссылка карты</a><ahref="#"class="card-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>Списки
Создавайте списки содержимого в карточке с помощью «расширенных» списков.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<divclass="card"style="width: 18rem;"><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<divclass="card"style="width: 18rem;"><divclass="card-header"> Featured </div><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul></div>«Плавильный котел» (в смысле – бросайте все что есть)
Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.
Название карточки
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<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></div><ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Vestibulum at eros</li></ul><divclass="card-body"><ahref="#"class="card-link">Card link</a><ahref="#"class="card-link">Another link</a></div></div>Заголовок и «подвал»
Добавьте заголовок и\или подвал к карточке.
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card"><divclass="card-header"> Featured </div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Заголовки карточек можно стилизовать добавлением стиля .card-header к <h*>.
Featured
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card"><h5class="card-header">Featured</h5><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<divclass="card"><divclass="card-header"> Quote </div><divclass="card-body"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Someone famous in <citetitle="Source Title">Source Title</cite></footer></blockquote></div></div>Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card text-center"><divclass="card-header"> Featured </div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div><divclass="card-footer text-muted"> 2 days ago </div></div>Размеры
У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.
Использование разметки сеток
Используя сетку, оборачивайте карточки в колонки и ряды, если необходимо.
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудьСпециальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="row"><divclass="col-sm-6"><divclass="card"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</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">With supporting text below as a natural lead-in to additional content.</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">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div><divclass="card w-50"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Кнопка</a></div></div>Обычный CSS
Используйте обычный CSS для установки ширины.
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Выравнивание текста
Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудьСпециальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудьСпециальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</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">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div><divclass="card text-right"style="width: 18rem;"><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Навигация
Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.
Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-tabs card-header-tabs"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Специальный заголовок
With supporting text below as a natural lead-in to additional content.
Переход куда-нибудь<divclass="card text-center"><divclass="card-header"><ulclass="nav nav-pills card-header-pills"><liclass="nav-item"><aclass="nav-link active"href="#">Active</a></li><liclass="nav-item"><aclass="nav-link"href="#">Link</a></li><liclass="nav-item"><aclass="nav-link disabled"href="#">Disabled</a></li></ul></div><divclass="card-body"><h5class="card-title">Специальный заголовок</h5><pclass="card-text">With supporting text below as a natural lead-in to additional content.</p><ahref="#"class="btn btn-primary">Переход куда-нибудь</a></div></div>Изображения
В карточках есть настройки для работы с изображениями. Вы можете добавить «уменьшенное изображение» к низу карточки, наложить содержимое карточки на изображение либо просто вставить его в карточку.
Маленькие изображения
По аналогии с заголовками и «подвалами», карточки могут иметь image cap вверху и внизу – маленькие изображения.
Название карточки
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 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
<divclass="card mb-3"><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"><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><imgsrc="..."class="card-img-top"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>Обратите внимание, что содержание не должно быть больше, чем высота изображения. Если содержимое больше изображения, оно будет отображаться за пределами изображения.
Горизонтальный
Используя комбинацию классов сетки и утилит, карты можно сделать горизонтальными для мобильных устройств и быстро реагировать. В приведенном ниже примере мы удаляем разводы сетки с помощью .no-gutters и используем классы .col-md-*, чтобы сделать карту горизонтальной в точке останова md. В зависимости от содержимого вашей карты могут потребоваться дополнительные настройки.
Название карточки
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
<divclass="card mb-3"style="max-width: 540px;"><divclass="row no-gutters"><divclass="col-md-4"><imgsrc="..."class="card-img"alt="..."></div><divclass="col-md-8"><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></div></div>Стили карточек
У карточек есть множество опций для настройки их фона, границ и цвета.
Фон и цвет
Используйте утилиты фона и текста для изменения внешнего вида карточки.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Primary 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></div></div><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Secondary 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></div></div><divclass="card text-white bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Success 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></div></div><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Danger 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></div></div><divclass="card text-white bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Warning 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></div></div><divclass="card text-white bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Info 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></div></div><divclass="card bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light 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></div></div><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Dark 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></div></div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Границы
Используйте утилиты границ для изменения атрибута border-color карточки. Заметьте, что вы можете вставить классы .text-{color} в родительский элемент класса .card или в поднабор содержимого карточки – как показано ниже.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card border-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-primary"><h5class="card-title">Primary 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></div></div><divclass="card border-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-secondary"><h5class="card-title">Secondary 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></div></div><divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-success"><h5class="card-title">Success 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></div></div><divclass="card border-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-danger"><h5class="card-title">Danger 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></div></div><divclass="card border-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-warning"><h5class="card-title">Warning 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></div></div><divclass="card border-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-info"><h5class="card-title">Info 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></div></div><divclass="card border-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body"><h5class="card-title">Light 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></div></div><divclass="card border-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div><divclass="card-body text-dark"><h5class="card-title">Dark 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></div></div>Утилиты миксинов
Вы также можете изменить границы заголовка карточки и «подвала», и даже удалить их background-color с помощью класса .bg-transparent.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<divclass="card border-success mb-3"style="max-width: 18rem;"><divclass="card-header bg-transparent border-success">Header</div><divclass="card-body text-success"><h5class="card-title">Success 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></div><divclass="card-footer bg-transparent border-success">Footer</div></div>Расположение карточек
В дополнение к стилизации содержимого карточек, Bootstrap включает несколько параметров расположения серий карточек. В настоящее время эти параметры не являются отзывчивыми.
Группы карточек
Используйте их для отрисовки карточек как единого, прикрепленного элемента с колонками равной ширины и высоты. Группы карточек используют display: flex; для достижения таких свойств размеров.
Название карточки
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>«Карточный стол»
Нужен набор карточек равной ширины и высоты, не прикрепленных друг к другу? Используйте «карточный стол».
Название карточки
This is a longer 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-deck"><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><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-deck"><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>Колонки карточек
Карточки можно выстроить в Masonry-подобные колонки с помощью CSS, обернув их в .card-columns. Для облегчения выравнивания карточки созданы на основе column, а не на flexbox.
Внимание! Размеры карточек могут быть разными, поэтому положение колонок тоже может разниться. Чтобы карточки не выходили из колонок, задайте display: inline-block, т.к. column-break-inside: avoid не совсем рабочее решение.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Название карточки
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Название карточки
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Название карточки
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
<divclass="card-columns"><divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Card title that wraps to a new line</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><divclass="card p-3"><blockquoteclass="blockquote mb-0 card-body"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></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 bg-primary text-white text-center p-3"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p><footerclass="blockquote-footer text-white"><small> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></div><divclass="card text-center"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This card has a regular title and short paragraphy of text below it.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div><divclass="card"><imgsrc="..."class="card-img-top"alt="..."></div><divclass="card p-3 text-right"><blockquoteclass="blockquote mb-0"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer"><smallclass="text-muted"> Someone famous in <citetitle="Source Title">Source Title</cite></small></footer></blockquote></div><divclass="card"><divclass="card-body"><h5class="card-title">Название карточки</h5><pclass="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p><pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p></div></div></div>Колонки карточек также можно растянуть и настроить с помощью кода. Ниже показано расширение класса .card-columns с использованием такого же CSS, как мы использовали в колонках, - который создает набор отзывчивых ярусов для изменения числа колонок.
.card-columns{@includemedia-breakpoint-only(lg){column-count:4;}@includemedia-breakpoint-only(xl){column-count:5;}}