Карточки

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

На этой странице
О нас
Пример
Типы контента
Тело
Заголовки, текст и ссылки
Изображения
Список групп
Кухонная раковина
Верхний и нижний колонтитулы
Определение Размера
Использование разметки сетки
Использование утилит
Использование пользовательского CSS
Выравнивание текста
Навигация
Изображения
Заглавные буквы изображений
Наложение изображений
Горизонтальный
Стили карт
Фон и цвет
Граница
Утилиты Mixins
Макет карты
Группы карт
Сеточные карты
Каменная кладка
CSS
Переменные
Переменные Sass
реклама через Carbon
Ознакомьтесь с последними предложениями по удалённой работе от Authentic Jobs.
реклама через Carbon
О нас
Карточка — это гибкий и расширяемый контейнер для контента. Она включает в себя опции для верхних и нижних колонтитулов, широкий спектр контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с Bootstrap 3, то знаете, что карточки заменяют наши старые панели, блоки и миниатюры. Аналогичные функции этих компонентов доступны в виде классов-модификаторов для карточек.

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

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

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

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

Тело
Основным элементом карточки является .card-body. Используйте его всякий раз, когда вам нужен дополнительный раздел внутри карточки.

Это текст внутри карточки.

Заголовки, текст и ссылки
Названия карточек используются путем добавления .card-title к тегу <h*>. Точно так же добавляются и размещаются рядом друг с другом ссылки путем добавления .card-link к тегу .

Субтитры используются путем добавления .card-subtitle к тегу <h*>. Если элементы .card-title и .card-subtitle помещены в элемент .card-body, заголовок карточки и подзаголовок будут красиво выровнены.

Изображения
.card-img-top и .card-img-bottom соответственно задают закругление верхнего и нижнего углов в соответствии с границами карточки. С помощью .card-text к карточке можно добавить текст. Текст в .card-text также можно стилизовать с помощью стандартных HTML-тегов.

Some quick example text to build on the card title and make up the bulk of the card’s content.

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

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

• An item
• A second item
• A third item

Card link
Another link

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

Стили карт
Карточки содержат различные варианты настройки фона, границ и цвета.

Фон и цвет
Добавлено в версии 5.2.0
Задайте background-color с контрастным фоном color с помощью наших.text-bg-{color}помощников. Раньше для выбора .text-{color} и .bg-{color} инструментов для оформления требовалось вручную сопоставлять их, но вы можете использовать их по-прежнему, если хотите.

Граница
Используйте утилиты для работы с границами, чтобы изменить только border-color карточки. Обратите внимание, что вы можете добавить .text-{color} классы к родительской .card или к части содержимого карточки, как показано ниже.