О карточках
Карты являются гибким и расширяемым содержимым контейнером. Он включает в себя варианты верхних и нижних колонтитулов, широкий выбор контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, лунки и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов модификаторов для карточек.
Пример
Карточки создаются с минимальным количеством разметки и стилей, но все же обеспечивают тонну контроля и настройки. Созданные с помощью flexbox, они легко выравниваются и хорошо сочетаются с другими компонентами Bootstrap. margin
по умолчанию их нет , поэтому при необходимости используйте служебные программы для определения интервалов.
Ниже приведен пример базовой карточки со смешанным содержанием и фиксированной шириной. Карточки не имеют фиксированной ширины для начала, поэтому они естественным образом заполняют всю ширину родительского элемента. Это легко настроить с помощью наших различных вариантов размеров .
Название карточки
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Иди куда-нибудь<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Типы контента
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается.
Тело
Строительным блоком карты является файл .card-body
. Используйте его всякий раз, когда вам нужен мягкий раздел на карточке.
<div class="card">
<div class="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
пункт, Название карточки и субтитров совпадают красиво.
Название карточки
Подзаголовок карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Ссылка на карту Другая ссылка<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Изображения
.card-img-top
помещает изображение в верхнюю часть карточки. С помощью .card-text
, можно добавить текст на карту. Текст внутри .card-text
можно также стилизовать с помощью стандартных тегов HTML.
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="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 в
- Вестибулум на эросе
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
- Cras Justo Odio
- Dapibus ac facilisis в
- Вестибулум на эросе
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
- Cras Justo Odio
- Dapibus ac facilisis в
- Вестибулум на эросе
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Несколько типов контента
Комбинируйте несколько типов контента, чтобы создать нужную карточку, или добавьте туда все. Ниже показаны стили изображений, блоки, стили текста и группа списков - все они заключены в карточку фиксированной ширины.
Название карточки
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
- Cras Justo Odio
- Dapibus ac facilisis в
- Вестибулум на эросе
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Верхний и нижний колонтитулы
Добавьте в карточку необязательный верхний и / или нижний колонтитулы.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Заголовки карточек можно стилизовать, добавляя .card-header
к <h*>
элементам.
Рекомендуемые
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число посуере эрат анте.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Размеры
Карты не предполагают никакого специфического width
начала, поэтому они будут иметь ширину 100%, если не указано иное. Вы можете изменить это по мере необходимости с помощью настраиваемого CSS, классов сетки, миксинов Sass сетки или утилит.
Использование разметки сетки
Используя сетку, расположите карточки по столбцам и рядам по мере необходимости.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
Использование утилит
Используйте наши доступные утилиты для изменения размера, чтобы быстро установить ширину карты.
Название карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
КнопкаНазвание карточки
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Кнопка<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
Использование собственного CSS
Используйте собственный CSS в таблицах стилей или как встроенные стили, чтобы задать ширину.
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Выравнивание текста
Вы можете быстро изменить выравнивание текста любой карточки - целиком или в отдельных частях - с помощью наших классов выравнивания текста .
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудьОсобое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Навигация
Добавьте навигацию в заголовок (или блок) карточки с помощью компонентов навигации Bootstrap .
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Особое обращение с титулом
С вспомогательным текстом ниже в качестве естественного перехода к дополнительному контенту.
Иди куда-нибудь<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Изображения
Карточки включают несколько вариантов работы с изображениями. Выберите добавление «колпачков изображений» на любом конце карточки, наложение изображений с содержимым карточки или просто встраивание изображения в карточку.
Изображения шапки
Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижние «колонтитулы» - изображения вверху или внизу карточки.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. Назад
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. Назад
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Накладываемые изображения
Превратите изображение в фон карты и наложите на нее текст. В зависимости от изображения вам могут потребоваться или не потребоваться дополнительные стили или утилиты.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
По горизонтали
Используя комбинацию классов сетки и утилит, карточки можно сделать горизонтальными, чтобы они были удобными для мобильных устройств и гибкими. В приведенном ниже примере мы удаляем желоба сетки .g-0
и используем .col-md-*
классы, чтобы сделать карту горизонтальной в точке md
останова. В зависимости от содержимого вашей карты могут потребоваться дополнительные корректировки.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. Назад
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Стили карточек
Карточки включают различные параметры для настройки их фона, границ и цвета.
Фон и цвет
Используйте текстовые и фоновые утилиты, чтобы изменить внешний вид карточки.
Название основной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название дополнительной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название карточки успеха
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название карточки опасности
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Заголовок карточки предупреждения
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Заголовок информационной карточки
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название световой карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название темной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="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>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="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>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="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>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="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>
<div class="card bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="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>
<div class="card text-body bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="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>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="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>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="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
элемент или подмножество содержимого карты, как показано ниже.
Название основной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название дополнительной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название карточки успеха
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название карточки опасности
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Заголовок карточки предупреждения
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Заголовок информационной карточки
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название световой карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
Название темной карты
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="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>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="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>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="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>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="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>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="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>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="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>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="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>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="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>
Утилиты mixins
Вы также можете при необходимости изменить границы верхнего и нижнего колонтитула карточки и даже удалить их background-color
с помощью .bg-transparent
.
Название карточки успеха
Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="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 class="card-footer bg-transparent border-success">Footer</div>
</div>
Макет карточки
Помимо стилизации содержимого карточек, Bootstrap включает несколько опций для размещения серий карточек. В настоящее время эти параметры макета еще не работают.
Группы карточек
Используйте группы карточек для визуализации карточек как одного присоединенного элемента с столбцами одинаковой ширины и высоты. Группы карточек начинаются стопкой и используются display: flex;
для прикрепления с одинаковыми размерами, начиная с sm
точки останова.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Последнее обновление 3 мин. Назад
Название карточки
Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.
Последнее обновление 3 мин. Назад
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
Последнее обновление 3 мин. Назад
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
При использовании групп карточек с нижним колонтитулом их содержимое будет автоматически выровнено.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Карточки и сетка
Используйте сеточную систему Bootstrap и ее .row-cols
классы, чтобы контролировать, сколько столбцов сетки (обернутых вокруг ваших карточек) вы показываете в каждой строке. Например, вот .row-cols-1
раскладывание карточек в одном столбце и .row-cols-md-2
разделение четырех карточек на равную ширину в нескольких строках от средней точки останова вверх.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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 class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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 class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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
и вы увидите четвертую обертку карты.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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 class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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 class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Это короткая карточка.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.
Название карточки
Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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 class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
Как и в случае с группами карточек, нижние колонтитулы карточек выстраиваются автоматически.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.
Название карточки
Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.
Название карточки
Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="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>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
Masonry
В v4
мы использовали CSS только технику , чтобы имитировать поведение масонри -like колонн, но эта техника пришла с большим количеством неприятных побочных эффектов . Если вы хотите использовать этот тип макета v5
, вы можете просто использовать плагин Masonry. Masonry не входит в Bootstrap , но мы сделали демонстрационный пример, который поможет вам начать работу.