Как создавать карты в Bootstrap 5?

<

div itemprop=»articleBody»>

Bootstrap 4 представил новый компонент под названием карты. Компоненты, такие как панели, эскизы и лунки в Bootstrap 3, были удалены и сделаны как единый компонент, называемый карточками в Bootstrap 4. Карточки являются мобильными элементами и стали наиболее популярными при использовании в Google Material Design. В этом руководстве мы обсудим, как создавать различные карточки в реальном времени с помощью последней версии Bootstrap 5.

Вы можете скачать примеры, использованные в этом руководстве. здесь.

Учебное пособие по Bootstrap 5 Cards

Это руководство охватывает следующие главы:

  1. Что такое карточный компонент?
  2. Базовая карта Bootstrap 5
  3. Калибровка карт
  4. Карточка с субтитрами и ссылками
  5. Выравнивание текста
  6. Добавление верхнего и нижнего колонтитулов
  7. Использование вкладок навигации
  8. Изображение внизу карточки
  9. Карточка с наложенным изображением
  10. Перевернутая или черная карта
  11. Карты с цветами фона
  12. Контурные карты
  13. Макеты карточек

1. Что такое карты в Bootstrap?

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

2. Базовые карты

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

Базовая карта Bootstrap 4

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

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Basic Card with Image, Title and Description -->
<div class="card" style="width:20rem;">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

В идеале нет необходимости в скриптах для карточек, если в блоке карточек используются только простые элементы. Как вы заметили, для создания карточки используется множество классов CSS.

  • Карточка должна быть обозначена знаком «.карта», Заключенный в тег .
  • Изображение — необязательный элемент карты. Чтобы добавить изображение вверху, вы должны добавить класс «.card-img-top». Дополнительный класс «.img- жидкость”Добавляется, чтобы изображение было отзывчивым и соответствовало ширине контейнера.
  • На карточке может быть несколько блоков карточек, заключенных в отдельный тег с классом CSS «.card-body». Каждый блок карточки содержит содержимое этого блока, такое как заголовок, описание и т. Д.
  • В нашем примере мы использовали заголовок

    для заголовка с классом «.card-title». После заголовка у нас есть краткое описание с использованием тега с классом «.card- текст». Наконец, у нас есть кнопка, отождествленная с обычным классом кнопок Bootstrap.

Помните, что «.card» и «.card-body» достаточно, чтобы иметь карту с любым типом содержимого внутри блока.

3. Размер компонента карты

Компонент карты по умолчанию является плавным и распространяется на всю ширину контейнера. В приведенном выше базовом примере карты мы использовали «style =» width: 20rem; »», чтобы ограничить ширину до 20rem. Вы можете использовать разные способы ограничения ширины.

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

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

Приступим к модификации базовой карточки, чтобы вместо кнопки были субтитры и ссылки. Субтитры могут быть добавлены с использованием класса «.card-subtitle», а нижнее поле должно быть добавлено для создания необходимого промежутка между заголовком и подзаголовком. Ссылки создаются с использованием стандартных тегов привязки HTML.

<div class="card" style="width:20rem;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This card has no image but has subtitle and two links instead of button.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="card-link">Link 1</a>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="card-link">Link 2</a>
</div>
</div>

Это должно привести к следующему результату в браузере:

Карточка Bootstrap 4 с субтитрами и ссылками

5. Карточка с выравниванием текста

По умолчанию элементы карты выровнены по левому краю, который можно изменить вправо и по центру, используя «.text-right» а также «.text-center»Классы соответственно к«.card-block» класс.

<!-- Card with Center Text Alignment -->
<div class="card" style="width:20rem;">
<div class="card-body text-center">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card with center text alignment.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Button</a>
</div>
</div>
<!-- Card with Right Text Alignment -->
<div class="card" style="width:20rem;">
<div class="card-body text-right">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card with right text alignment.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Button</a>
</div>
</div>

Окончательный результат будет выглядеть так:

Карточка с выравниванием текста по центру и правому краю

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

6. Добавление верхнего и нижнего колонтитула

А как насчет добавления верхнего и нижнего колонтитулов к карточке, аналогичных компоненту панели в Bootstrap 3? Да, вы можете добавить верхний и нижний колонтитулы, используя «.card-header» а также «.card-footer»Классы, как показано ниже:

<div class="card" style="width:20rem;">
<div class="card-header">
This is a Header
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card component with header and footer.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer">
This is a Footer
</div>
</div>

Не забудьте добавить классы верхнего или нижнего колонтитула для разделения

<

div> теги до и после «.card-block» раздел. Вывод карточки с верхним и нижним колонтитулами приведен ниже:

Карточка с верхним и нижним колонтитулами

7. Использование вкладок навигации в карточке

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

Карточка с навигацией

Код карты с навигацией приведен ниже:

<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link active" href="https://www.webnots.com/bootstrap-cards-tutorial/#">Tab1</a>
</li>
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link" href="https://www.webnots.com/bootstrap-cards-tutorial/#">Tab2</a>
</li>
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link disabled" href="https://www.webnots.com/bootstrap-cards-tutorial/#">Tab3</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">This is a title for tab 1</h4>
<p class="card-text">This card uses navigation with default navigation components.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Button</a>
</div>
</div>

8. Изображение внизу

У карты по умолчанию будет изображение поверх карты, как показано в базовом примере карты. Вы можете переместить изображение на карточку, используя «.card-img-bottom”И переместите тег под блок карты.

<div class="card" style="width:20rem;">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p>
<p class="card-text"><small class="text-muted">Enter some text here...</small></p>
</div>
<img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down">
</div>

Карточка с изображением вниз будет выглядеть так:

Карточка с изображением вниз

9. Карточка с наложенным изображением

Вместо того, чтобы располагать изображение вверх или вниз, вы можете добавить все текстовые элементы поверх изображения, как наложение, как показано ниже:

Карточка с наложением изображения
<div class="card bg-dark text-white" style="width:20rem;">
<img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a short description to explain what this card is about.</p>
<p class="card-text"><small class="text-muted">Enter some text here...</small></p>
</div>
</div>

Значок «.card-img-overlay”Класс используется в теге

, который охватывает все текстовые элементы для наложения их на изображение. Здесь мы использовали «.card-inverse», Чтобы преобразовать текст в светлый цвет, поскольку мы использовали темное фоновое изображение. Подробнее об перевернутой карте вы можете прочитать в следующем примере.

10. Перевернутая или черная карта

По умолчанию текстовые элементы карточки используют темные цвета, предполагая, что цвет фона светлый (обычно белый). Цвет текста можно легко инвертировать в светлый, используя «.text-белый» класс. Помните, что это только инвертирует цвета текста, и вам следует вручную объявить фон темным цветом, используя «.bg-темный», Чтобы обеспечить удобочитаемость.

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

<div class="card bg-dark text-white mb-3" style="background-color: #333;">
<div class="card-body">
<h3 class="card-title">Special title treatment</h3>
<p class="card-text">This is a card with inverse color and background is set as black.</p>
<a href="https://www.webnots.com/bootstrap-cards-tutorial/#" class="btn btn-primary">Go somehwere</a>
</div>
</div>

Перевернутая карта должна выглядеть так:

Обратная карта

11. Карточка с разными цветами фона

Смотреть карты с белым фоном будет скучно. Используйте любой из вспомогательных классов фона, чтобы добавить красочный фон к компоненту карточки. Вы можете выбрать один из цветов фона, например основной, дополнительный, успех, светлый, темный, предупреждение, информацию или опасность. Ниже представлена ​​карточка с заголовком и разными цветами фона.

<div class="card text-white bg-primary mb-3">
<div class="card-header">Primary</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3">
<div class="card-header">Secondary</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with secondary color background.</p>
</div>
</div>
<div class="card text-white bg-success mb-3">
<div class="card-header">Success</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with green color background.</p>
</div>
</div>
<div class="card text-white bg-info mb-3">
<div class="card-header">Info</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with blue color background.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3 text-center">
<div class="card-header">Warning</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3 text-center">
<div class="card-header">Danger</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with red color background and aligned center.</p>
</div>
</div> 
<div class="card bg-light mb-3 text-center">
<div class="card-header">Light</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with light color background and aligned center.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3 text-center">
<div class="card-header">Dark</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with dark color background and aligned center.</p>
</div>
</div>

Не забудьте включить «.text-белый», Поскольку все эти фоны имеют более темный цвет, поэтому текст должен быть более светлым.

Карточки с разным цветом фона показаны ниже:

Открытка с разными цветами фона 1
Карточка с разными цветами фона 2
Открытка с разными цветами фона 3

12. Контурные карты

Карточки с контуром будут иметь простой белый фон с разными цветами границ с использованием символа «.card-outline-primary«,».card-контур-вторичный«,».card-outline-success«,».card-контур-информация«,».card-контур-предупреждение» а также».card-контур-опасность»Классы.

<div class="card border-primary mb-3 text-center">
<div class="card-header">Primary Border</div>
<div class="card-body text-primary">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-secondary mb-3 text-center">
<div class="card-header">Secondary Border</div>
<div class="card-body text-secondary">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-light mb-3 text-center">
<div class="card-header">Light Border</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with primary color background.</p>
</div>
</div>
<div class="card border-dark mb-3 text-center">
<div class="card-header">Dark Border</div>
<div class="card-body text-dark">
<p>This is a card text paragraph with secondary color background without title.</p>
<footer>Quote by <cite title="Source Title">Someone said</cite></footer>
</div>
</div>
<div class="card border-success mb-3 text-center">
<div class="card-header">Success Border</div>
<div class="card-body text-success">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with green color background.</p>
</div>
</div>
<div class="card border-info mb-3 text-center">
<div class="card-header">Info Border</div>
<div class="card-body text-info">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with blue color background.</p>
</div>
</div>
<div class="card border-warning mb-3 text-center">
<div class="card-header">Warning Border</div>
<div class="card-body text-warning">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with yellow color background.</p>
</div>
</div>
<div class="card border-danger text-center">
<div class="card-header">Danger Border</div>
<div class="card-body text-danger">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card text paragraph with red color background.</p>
</div>
</div>

Карточки с набросками будут выглядеть так:

Bootstrap 4 Пограничные карты - 1
Bootstrap 4 Пограничные карты - 2
Bootstrap 4 Пограничные карты - 3

13. Макеты карт в Bootstrap 5

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

  • карточная группа
  • колода карт
  • карточки-столбцы

Мы обсудим эти классы компоновки карточек в нашем следующем уроке.


Изучите Bootstrap 5 (Индекс)


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.