Перейти к основному содержанию

Cards (карточки)

Карточки Bootstrap предоставляют гибкий и расширяемый контейнер контента с множеством вариантов и опций.

Содержание

О карточках

Карты являются гибким и расширяемым содержимым контейнером. Он включает в себя варианты верхних и нижних колонтитулов, широкий выбор контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с Bootstrap 3, карточки заменяют наши старые панели, лунки и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов модификаторов для карточек.

Пример

Карточки создаются с минимальным количеством разметки и стилей, но все же обеспечивают тонну контроля и настройки. Созданные с помощью flexbox, они легко выравниваются и хорошо сочетаются с другими компонентами Bootstrap. margin по умолчанию их нет , поэтому при необходимости используйте служебные программы для определения интервалов.

Ниже приведен пример базовой карточки со смешанным содержанием и фиксированной шириной. Карточки не имеют фиксированной ширины для начала, поэтому они естественным образом заполняют всю ширину родительского элемента. Это легко настроить с помощью наших различных вариантов размеров .

PlaceholderImage cap
Название карточки

Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.

Иди куда-нибудь
<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.

PlaceholderImage cap

Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.

<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>

Несколько типов контента

Комбинируйте несколько типов контента, чтобы создать нужную карточку, или добавьте туда все. Ниже показаны стили изображений, блоки, стили текста и группа списков - все они заключены в карточку фиксированной ширины.

PlaceholderImage cap
Название карточки

Небольшой пример текста, который будет построен на названии карты и составляет основную часть содержимого карты.

  • 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>

Изображения

Карточки включают несколько вариантов работы с изображениями. Выберите добавление «колпачков изображений» на любом конце карточки, наложение изображений с содержимым карточки или просто встраивание изображения в карточку.

Изображения шапки

Подобно верхним и нижним колонтитулам, карточки могут включать верхние и нижние «колонтитулы» - изображения вверху или внизу карточки.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. Назад

Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. Назад

PlaceholderImage cap
<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>

Накладываемые изображения

Превратите изображение в фон карты и наложите на нее текст. В зависимости от изображения вам могут потребоваться или не потребоваться дополнительные стили или утилиты.

PlaceholderCard image
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. Назад

<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 останова. В зависимости от содержимого вашей карты могут потребоваться дополнительные корректировки.

PlaceholderImage
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 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 точки останова.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

Последнее обновление 3 мин. Назад

PlaceholderImage cap
Название карточки

Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.

Последнее обновление 3 мин. Назад

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.

Последнее обновление 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>

При использовании групп карточек с нижним колонтитулом их содержимое будет автоматически выровнено.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.

<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 разделение четырех карточек на равную ширину в нескольких строках от средней точки останова вверх.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

<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 и вы увидите четвертую обертку карты.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

<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.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Это короткая карточка.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту.

PlaceholderImage cap
Название карточки

Это более длинная карточка с вспомогательным текстом ниже, которая является естественным переходом к дополнительному контенту. Этот контент немного длиннее.

<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>

Как и в случае с группами карточек, нижние колонтитулы карточек выстраиваются автоматически.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Этот контент немного длиннее.

PlaceholderImage cap
Название карточки

Под этой карточкой есть вспомогательный текст, который является естественным введением к дополнительному содержанию.

PlaceholderImage cap
Название карточки

Это более широкая карточка с вспомогательным текстом ниже как естественный ввод к дополнительному контенту. Эта карточка имеет даже более длинный контент, чем первая, чтобы показать действие одинаковой высоты.

<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 , но мы сделали демонстрационный пример, который поможет вам начать работу.

Комментарии для сайта Cackle