Карты
Карточки Bootstrap представляют собой гибкий и расширяемый контейнер содержимого с множеством вариантов и опций.
О
Карточка — это гибкий и расширяемый контейнер содержимого. Он включает в себя параметры верхних и нижних колонтитулов, широкий спектр контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с 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>
Список групп
Создавайте списки содержимого на карточке с помощью группы списка сброса.
- Пункт
- Второй элемент
- Третий элемент
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Пункт
- Второй элемент
- Третий элемент
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Пункт
- Второй элемент
- Третий элемент
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Кухонная мойка
Смешивайте и подбирайте несколько типов контента, чтобы создать нужную вам карточку, или добавляйте туда все подряд. Ниже показаны стили изображений, блоки, стили текста и группа списков — все они упакованы в карточку фиксированной ширины.
Название карты
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
- Пункт
- Второй элемент
- Третий элемент
<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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</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>
Известная цитата, содержащаяся в элементе blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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-end" 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="..." class="img-fluid rounded-start" 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 text-dark 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-dark 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 text-dark 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>
Передача смысла вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .visually-hidden
классом.
Граница
Используйте пограничные утилиты , чтобы изменить только 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>
Утилиты миксинов
Вы также можете изменить границы верхнего и нижнего колонтитула карты по мере необходимости и даже удалить их 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>
Каменная кладка
Мы v4
использовали технику, основанную только на CSS, для имитации поведения Masonry - подобных столбцов, но эта техника сопровождалась множеством неприятных побочных эффектов . Если вы хотите иметь этот тип макета в v5
, вы можете просто использовать плагин Masonry. Masonry не включен в Bootstrap , но мы сделали демонстрационный пример , чтобы помочь вам начать работу.
Сасс
Переменные
$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;