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

В нашем предыдущем уроке мы объяснили различные способы создания карточек как отдельного компонента. Поскольку карточки представляют собой набор различных элементов, вы можете использовать их для создания полных макетов страниц, таких как индексные страницы блога масонства. Bootstrap 5 предлагает три класса CSS по умолчанию для создания макетов страниц с карточками. В этом руководстве мы подробнее рассмотрим создание макетов карточек.

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

Типы макетов карточек

Bootstrap использует следующие три класса CSS для создания макетов карточек:

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

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

Макет 1: Макет группы карточек

Вы можете использовать.card-group”Для группировки отдельных карточек в макет гибкого блока с столбцами одинаковой высоты. Ниже приведен пример группировки трех карточек в виде макета вместе с использованием групп карточек.

Макет групп загрузочных карточек

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

<!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>
<!-- Start of Card Groups Layout -->
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 3">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<!-- End of Card Groups Layout -->
<!-- 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>

Макет 2: Макет колоды карт

Значок «.колода карт”Создает макет, аналогичный группе карт, за исключением того, что между отдельными картами будет небольшой промежуток, как показано ниже:

Макет колоды Bootstrap Card

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

Ниже приведен полный код для создания макета колоды карт.

<!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>
<!-- Start of Card Deck Layout -->
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and the height will be auto aligned with flex box. You can enter longer text to check the cards are aligned perfectly with same height without any gap.</p>
</div>
<div class="card-footer">
<small class="text-muted">Here is a footer</small>
</div>
</div>
</div>
<!-- End of Card Deck Layout -->
<!-- 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>

Макет 3: макет столбцов карточек или макет кладки

Макет кладки — один из популярных способов продемонстрировать индексную страницу блога, где отдельные блоки помещаются в доступное пространство. Здесь высота отдельной карты будет отличаться в зависимости от фактического размера карты. Ниже показано, как будет выглядеть макет кладки с использованием «.card-columns» класс.

Макет кладки Bootstrap с колонками для карточек

Полный код вышеуказанной схемы кладки приведен ниже:

<!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>
<!-- Start of Card Columns Layout -->
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 1">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a very long description of the card and you can enter longer text to check the cards are aligned perfectly like on the masonry layout.</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Columns 2">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a shorter description of the card.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card p-3 bg-dark text-white">
<blockquote class="blockquote mb-0">
<p>This is a blockquote and you can enter any quote from anyone.</p>
<footer>
<small class="text-muted">
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card bg-primary p-3 text-center text-white">
<blockquote class="blockquote mb-0">
<p>Here is a description for primary card.</p>
<footer>
<small>
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p>Here is a short description of the card without image.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Here is a short description without title and image.</p>
<footer>
<small>
Said by <cite title="Source Title">Someone</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Here is a long description for your card, enter anything you would like to enter here.</p>
<p class="card-text"><small class="text-muted">Here is a footer</small></p>
</div>
</div>
<div class="card">
<img class="card-img img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Image Only Card">
</div>
</div>
<!-- End of Card Columns Layout -->
<!-- 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>

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

На заметку:

  • Возможно, вам потребуется добавить 100% ширины к изображениям, используемым в макете кладки, например .img-fluid {ширина: 100%;}.
  • Помните «.p-3»Используется для добавления отступа к карточке, который содержит только текст описания для добавления 1rem отступа.
  • Макеты карточек не работают на мобильных устройствах с начальной версией Bootstrap 5.

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


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

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

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