Карточки Bootstrap являются важным инструментом для организации и представления контента в веб-проектах. Они предоставляют простой, но универсальный способ создания визуально привлекательных макетов, которые бесшовно адаптируются к различным устройствам. К концу этой статьи вы узнаете, как эффективно использовать компоненты карточек Bootstrap в своих проектах.
Почему выбирают Bootstrap?
Bootstrap остается одним из самых популярных фреймворков для создания адаптивных и ориентированных на мобильные устройства веб-макетов. Его ключевые преимущества включают:
- Быстрый и простой адаптивный дизайн: Вам нужны только базовые знания HTML и CSS, чтобы создать потрясающие макеты.
- Подход “сначала мобильные устройства”: Bootstrap придает приоритет мобильной адаптивности с самого начала.
- Совместимость с браузерами: Он работает безупречно во всех основных браузерах.
- Система сетки на основе Flexbox: Упрощает задачи выравнивания и распределения пространства.
- Широкий ассортимент компонентов: Широкий спектр повторно используемых элементов, таких как кнопки, модальные окна и карточки.
Последняя версия Bootstrap представляет собой значительные улучшения, такие как поддержка Flexbox и универсальный компонент карточки, который заменяет более старые компоненты, такие как панели и миниатюры.
Ключевые выводы
Карты Bootstrap — это универсальные инструменты для создания организованных, адаптивных макетов. Они позволяют отображать различные типы контента, такие как текст, изображения и мультимедиа, в стильном контейнере. Ниже приведены некоторые ключевые особенности, которые делают их незаменимыми для разработчиков:
- Простота использования: Вы можете быстро создать карту, комбинируя элементы, такие как div class=”card-body”, который определяет область контента, и p class=”card-text”, где располагается текстовая информация.
- Поддержка нескольких типов контента: Добавьте заголовок карты, изображения или группы списков, чтобы эффективно структурировать ваш контент.
- Адаптивность: Используя сетку и точки останова Bootstrap, карты могут адаптироваться к любому размеру устройства — от мобильного до настольного.
- Настраиваемый дизайн: Утилитарные классы позволяют вам изменять внешний вид, включая цвета, границы и выравнивание текста.
- Расширенные макеты: Такие функции, как группы карт, колоды и макеты в стиле “плитки”, обеспечивают бесшовное выравнивание и организацию.
Что такое компонент карты Bootstrap?
Bootstrap представляет собой универсальный и современный компонент пользовательского интерфейса, называемый картами, который служит гибким и стильным контейнером для отображения различных типов контента. С минимальным стандартным стилем карты Bootstrap можно легко улучшить, используя широкий спектр утилитарных классов.
Этот компонент построен на основе Flexbox, что позволяет точно выравнивать и распределять пространство. Разработчики могут использовать утилиты Bootstrap для работы с отступами и внутренними отступами, чтобы эффективно управлять полями и отступами.
Карты удобно вмещают разные типы контента, такие как заголовок, подзаголовок, основной текст и изображения и т. д., а также необязательные разделы заголовка и подвала. Вы также можете включить различные разделы (блоки карт) для создания разных типов карт в зависимости от ваших потребностей.
Основные классы карт Bootstrap
Ниже приведены основные утилитарные классы карт Bootstrap вместе с их назначением:
- card: Основной контейнерный класс, который определяет компонент карты.
- card-body: Создает основную область контента внутри карты.
- card-title: Задает стиль заголовка карты, обычно используется с тегами заголовков, такими как <h5>.
- card-text: Используется для стандартного текстового содержимого внутри карты.
- card-header: Добавляет стилизованный заголовок в верхней части карты.
- card-footer: Добавляет стилизованную нижнюю часть карты.
- card-img-top: Размещает изображение в верхней части карты.
- card-img-bottom: Размещает изображение в нижней части карты.
- list-group: Создает группу списков внутри карты.
- list-group-item: Стилизует отдельные элементы в группе списков.
- card-group: Группирует несколько карточек вместе с равной шириной и высотой.
- card-deck: Выравнивает несколько карточек с интервалами, устарело в Bootstrap 5.
- text-*: Утилитарные классы для стилизации цвета текста (например, text-primary, text-success).
- bg-*: Утилитарные классы для стилизации цвета фона (например, bg-light, bg-dark).
Этот краткий обзор перечисляет основные классы, используемые для создания и настройки карточек в Bootstrap.
Как включить Bootstrap в ваш проект
Вы можете начать использовать Bootstrap в своем проекте легко, включив его из сети доставки контента (CDN) или загрузив необходимые файлы с getbootstrap.com
В этом примере мы продемонстрируем, как настроить простую HTML-страницу, используя CDN для включения компонента карточки Bootstrap. Этот метод позволяет быстро создавать и стилизовать карточки без дополнительной конфигурации.
Следуйте указанным ниже шагам, чтобы создать ваш файл index.html и включить Bootstrap 5.3.3:
<!doctype html>
<html lang="en">
<head>
<!-- Обязательные мета-теги -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Bootstrap Card Example</title>
</head>
<body>
<div class="container mt-5">
<div class="card" style="width: 18rem;">
<div class="card-header bg-primary text-white">
Example Card Header
</div>
<div class="card-body">
<h5 class="card-title">Example Card Title</h5>
<p class="card-text">This is an example card created using Bootstrap 5. It includes styling for the
header, title, and text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<!-- Пакет Bootstrap с Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Мы включили файлы Bootstrap через CDN, обеспечивая доступ к последней версии фреймворка. Добавлено деление контейнера, которое служит основой для вашего контента, позволяя вам сразу начать создавать с помощью компонента карточки Bootstrap.
Для получения дополнительной информации вы можете ознакомиться с документацией шаблона-стартера.
Создание базовых карточек Bootstrap
Чтобы создать простую карточку, выполните следующие шаги:
- Используйте класс .card с тегом <div>, чтобы создать внешний контейнер.
- Добавьте класс .card-body к внутреннему тегу <div>, чтобы определить тело карточки.
- Используйте классы .card-title и .card-subtitle с тегами заголовков (<h5> и <h6>), чтобы добавить заголовок и подзаголовок карточки.
- Используйте класс .card-text с тегами <p>, чтобы включить текстовый контент.
- Используйте класс .card-img-top с тегом <img>, чтобы добавить изображение в верхней части карточки.
Это основные строительные блоки базового макета карточки. Вот пример:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Этот код создает карточку с изображением, заголовком, подзаголовком, текстом и кнопкой, и она будет подстраиваться под ширину родительского контейнера, если не указано иное с помощью свойства style=”width: 30rem;”.
Это скриншот результата:
Горизонтальные карточки в Bootstrap
Горизонтальные карточки позволяют отображать контент в режиме параллельного размещения, что делает их идеальными для компактного и организованного дизайна. Вы можете создать их, используя сеточные классы для адаптивного поведения, обеспечивая отличный внешний вид карточки на всех устройствах.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="https://picsum.photos/id/0/800" class="img-fluid rounded-start" alt="Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a card with text beside an image, perfect for showcasing content
side-by-side.
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Это скриншот результата:
Группы списков в карточках Bootstrap
Bootstrap позволяет улучшить ваши карточки, включив в них группы списков, что упрощает отображение структурированного и организованного контента. Классы list-group и list-group-flush интегрируются без проблем внутри карточек, позволяя разработчикам создавать визуально привлекательные списки.
Вот как можно создать карточку с очищенной группой списка:
<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>
Улучшение функциональности карточки
Добавление заголовков и подвалов
Вы можете улучшить ваши карточки, включив заголовки и подвалы с помощью классов .card-header и .card-footer. Вот пример:
<div class="row">
<div class="col-sm-3">
<div class="card">
<div class="card-header">
This is a header
</div>
<img class="card-img-top" src="https://source.unsplash.com/daily" alt="Card image top">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle">Card subtitle</h4>
<p class="card-text">This is a simple Card example</p>
</div>
<div class="card-footer">
This is a footer
</div>
</div>
</div>
</div> Это скриншот результата:
Этот макет добавляет больше контекста к карточке с оформленным заголовком и подвалом.
Наложение текста на изображения
Используйте .card-img-overlay для наложения контента поверх изображения. Просто заменив класс card-body на класс card-img-overlay, мы можем использовать изображение как наложение:
<div class="card" style="width: 30rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Это скриншот результата:
Добавление крышек с изображением карточек
Добавьте изображения в верхнюю или нижнюю часть карточки, используя .card-img-top или .card-img-bottom.
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<p class="card-text">This card has an image cap at both the top and bottom.</p>
</div>
<img src="https://picsum.photos/id/0/800" class="card-img-bottom" alt="Card image bottom">
</div>Это скриншот результата:
Верхнее и нижнее изображения карточки называются image caps.
Адаптивный дизайн с помощью карточек Bootstrap
Адаптивный дизайн гарантирует, что ваши карточки выглядят отлично на всех устройствах. Используйте сетку Bootstrap для управления макетом.
Пример кода
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://picsum.photos/id/85/800" class="card-img-top" alt="Card image">
<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">This is a simple card example created using Bootstrap 5.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Это скриншот результата:
Настройка высоты и ширины карточки Bootstrap
Чтобы установить определенную ширину для карточки, вы можете использовать атрибут style или утилиты Bootstrap. Вот пример:
<div class="card" style="width: 10rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a simple card example with a custom width.</p>
</div>
</div>Это скриншот результата:
Ширина этой карточки ограничена 10rem, что можно изменить в зависимости от ваших дизайнерских потребностей.
Обычно высота карточки автоматически подстраивается под содержимое карточки по вертикали, но мы также можем управлять ею с помощью пользовательских CSS (например, style=”height: 10rem;”) или утилит изменения размеров Bootstrap (например, <div class=”card h-200″>).
Пожалуйста, обратите внимание, что последнее обновление Bootstrap перешло на единицы rem вместо единиц px, потому что rem является масштабируемой единицей измерения — поэтому она лучше работает с пользовательскими настройками, что делает текст более доступным. Результатом является масштабирование всех элементов на странице вместе с размером экрана.
Вы можете узнать больше о новых функциях Bootstrap в статье “Bootstrap: Super Smart Features to Win You Over” на SitePoint.
Использование системы сетки для управления шириной
Другой вариант управления шириной компонента карточки Bootstrap – использовать сетку Bootstrap (строки и столбцы):
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example card using the grid system.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<div class="card-body">
<h5 class="card-title">Another Card</h5>
<p class="card-text">This card sits next to the first one.</p>
</div>
</div>
</div>
</div>Это скриншот результата:
В этом примере две карточки отображаются рядом, каждая занимает четыре столбца (col-md-4) на средних и больших экранах.
Стили карточек
Bootstrap предоставляет различные варианты настройки карточек, включая цвета фона, границы и стили текста.
Цвета фона и текста
Вы можете изменить цвета фона и текста карточки, используя утилитарные классы, например, .bg-primary или .text-white.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Primary Card Title</h5>
<p class="card-text">Quick text to demonstrate card styling.</p>
</div>
</div>Цвета границ
Используйте классы .border-{color} , чтобы настроить цвет границы ваших карточек. Текст внутри карточки также можно стилизовать с помощью .text-{color}.
<div class="card border-success mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-success">
<h5 class="card-title">Success Card Title</h5>
<p class="card-text">Simple content styled with a border.</p>
</div>
</div>Прозрачные заголовки и нижние колонтитулы
Удалите цвет фона из заголовков и нижних колонтитулов, используя .bg-transparent и настройте их границы.
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-info">Header</div>
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-info">
<h5 class="card-title">Info Card Title</h5>
<p class="card-text">Example content inside a card.</p>
</div>
<div class="card-footer bg-transparent border-info">Footer</div>
</div>Смешивание фонов и границ
Комбинируйте утилиты для фона и границ для создания уникальных стилей.
<div class="card bg-light border-dark mb-3" style="max-width: 18rem;">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Placeholder Image">
<div class="card-body text-dark">
<h5 class="card-title">Mixed Style Card</h5>
<p class="card-text">Custom card combining background and border.</p>
</div>
</div>Вот результат, демонстрирующий четыре различных стиля карточек в одиночном макете:
Bootstrap позволяет создавать карточки с различными стилями заголовков
- ‘основной заголовок карточки’ для основных разделов
- ‘легкий заголовок карточки’ для тонких дизайнов
- ‘вторичный заголовок карточки’ для карточки с поддерживающим текстом.
- ‘темный заголовок карточки’ для смелого вида
- ‘успешный заголовок карточки’ для позитивных сообщений
- ‘опасный заголовок карточки’ для предупреждений.
С этими универсальными вариантами стилей карточек вы также можете создать уникальные дизайны, такие как «предупреждающий заголовок карточки», «информационный заголовок карточки», чтобы выделить критическую информацию или привлечь внимание к конкретным деталям безупречно.
Добавление навигации
Еще одна хорошая особенность компонента карточки Bootstrap – возможность добавления расширенных шаблонов навигации в раздел заголовка, таких как вкладки и навигационные пилюли.
Добавление вкладок в заголовок карточки
Чтобы добавить вкладки в заголовок карточки, используйте классы .nav-tabs и .card-header-tabs в неупорядоченном списке (<ul>). Вот пример:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a tabbed navigation element in its header.</p>
</div>
</div>Это скриншот результата:
Добавление Pills в заголовок карточки
Также можно добавить навигационные pills, просто заменив .nav-tabs на .nav-pills и .card-header-tabs на .card-header-pill в теге <ul>:
<div class="card" style="width: 30rem;">
<div class="card-header">
<ul class="nav nav-pills card-header-pill">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<img src="https://picsum.photos/id/0/800" class="card-img-top" alt="Card image top">
<h5 class="card-title pt-3">Card with Tabs</h5>
<p class="card-text">This card includes a pill-style navigation element in its header.</p>
</div>
</div>Это скриншот результата:
Более подробную информацию об этом можно найти в документации по компонентам навигации Bootstrap
Добавление ссылок в компонент карточки Bootstrap
Мы можем быстро добавить ссылки внутри карточек, используя тег <a> с классом .card-link :
<div class="card">
<div class="card-body">
<h3 class="card-title">Adding Links</h3>
<p class="card-text">These are simple links</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
<div class="card-footer">
This is a footer
</div>
</div>Это скриншот результата:
Выравнивание и трансформация текста в компонентах карточки Bootstrap
Bootstrap предоставляет классы утилит текста для выравнивания и трансформации текста внутри компонента карточки. Для выравнивания текста можно использовать следующие классы:
- .text-start для выравнивания текста по левому краю карточки
- .text-end для выравнивания текста по правому краю карточки
- .text-center для выравнивания текста по центру карточки
- .text-justify для выравнивания текста по ширине карточки (применяется в старых версиях, устарело в Bootstrap 5)
- .text-nowrap для предотвращения переноса текста
Вы также можете преобразовывать текст, используя следующие классы:
- .text-lowercase для преобразования текста в нижний регистр
- .text-uppercase для преобразования текста в верхний регистр
- .text-capitalize для написания заглавной буквы в начале каждого слова
Настройка фона, цвета текста и границ карточки Bootstrap
Вы можете настроить фон, текст и границы карточки Bootstrap, используя классы утилит для текста и фона. Вот несколько примеров:
- Цвет текста: Используйте .text-primary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark или .text-white, чтобы изменить цвет текста.
- Цвета фона: Используйте .bg-primary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark или .bg-white, чтобы изменить цвет фона.
- Цвета границы: Используйте .border-primary, .border-success, .border-danger, .border-warning, .border-info, .border-light, .border-dark или .border-white, чтобы стилизовать цвет границы.
Демонстрация CodePen ниже показывает все различные виды карточек, которые можно создать с помощью Bootstrap. Не стесняйтесь экспериментировать с ним самостоятельно:
Создание сложных макетов с помощью компонента карточки Bootstrap
Карточка Bootstrap – универсальный компонент пользовательского интерфейса, широко используемый в современных веб-макетах для отображения смешанных типов контента (таких как текст и изображения) как отдельной сущности или сгруппированных коллекций.
Карточки особенно полезны для адаптивного дизайна и часто используются в макетах, подобных макету Мэйсонри, также известному как макет в стиле Pinterest.
Карточки могут использоваться для создания макетов галерей изображений, блогов или товаров электронной коммерции. Основные платформы, такие как Google и Facebook, широко используют карточки для организации и отображения контента на своих веб-приложениях.
Ранее для создания таких продвинутых макетов требовалось глубокое знание CSS и HTML. Однако благодаря последним функциям Bootstrap разработчики могут легко создавать адаптивные и визуально привлекательные макеты на основе карточек.
Классы, такие как .card-group, .card-deck и .card-columns, упрощают процесс организации карточек с согласованным стилем и выравниванием.
Группировка/Вложение карточек
Группы карточек в Bootstrap – это эффективный способ отображения нескольких компонентов карточек как единого, присоединенного объекта с одинаковой шириной и высотой.
Этот макет достигается с использованием свойства display: flex;, обеспечивая идеальное выравнивание всех карточек. Он особенно полезен для адаптивного дизайна и современных веб-макетов, где согласованные размеры карточек необходимы.
Для создания группы карточек используйте класс .card-group как обертку div, содержащую отдельные карточки.
Вот пример группы из трех карточек:
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://source.unsplash.com/featured/" alt="Card image top">
<div class="card-img-overlay">
<div class="card-group">
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/475/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 1</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">This is an example of a grouped card.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/58/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 2</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">Grouped cards ensure uniform styling.</p>
</div>
</div>
<div class="card text-white">
<img class="card-img-top" src="https://picsum.photos/id/75/800" alt="Card image top">
<div class="card-img-overlay">
<h3 class="card-title">Card Title 3</h3>
<h4 class="card-subtitle">Card Subtitle</h4>
<p class="card-text">They are responsive and visually appealing.</p>
</div>
</div>
</div>Это скриншот результата:
Как видно, три карточки прикреплены и имеют одинаковую ширину и высоту.
Карточные колоды
В предыдущих версиях Bootstrap для создания раскладок карточек, где карточки имели одинаковую ширину и высоту, но не были прикреплены друг к другу, использовался класс .card-deck. Однако в Bootstrap 5 рекомендуется использовать систему сеток для этой цели. Этот подход предлагает большую гибкость и отзывчивость.
Чтобы добиться аналогичной раскладки, используйте класс .row с .col для управления промежутками и выравниванием карточек. Вот пример:
<div class="row row-cols-1 row-cols-md-3 g-4">
Как мы видим, карточки одного размера с небольшим отступом между ними.
Карточные столбцы
В предыдущих версиях Bootstrap использовался класс .card-columns для создания раскладки в стиле Мейсона, где карточки добавлялись сверху вниз и слева направо. Однако в Bootstrap 5 эта функция была удалена.
Чтобы добиться аналогичной раскладки, вы можете использовать систему сеток в сочетании с CSS-раскладкой Мейсона или JavaScript-плагином, таким как Masonry.js, для более сложного поведения.
Вот как создать простую раскладку в стиле Мейсона, используя систему сеток и CSS:
Оптимизация производительности
Эффективная производительность имеет решающее значение для создания карточек Bootstrap, которые загружаются быстро и адаптируются без проблем. Вот практические методы для улучшения производительности при интеграции компонентов карточек Bootstrap, таких как div class card body и h5 class card title.
Ленивая загрузка изображений
Ленивая загрузка задерживает загрузку изображений до тех пор, пока они не станут видимыми в области просмотра, оптимизируя скорость страницы. Используйте атрибут loading=”lazy” с верхним изображением карточки для эффективного решения.
<img src="https://picsum.photos/300/200" loading="lazy" class="card-img-top" alt="Lazy Loaded Image">Оптимизация размеров изображений
Измените размер изображений, чтобы они соответствовали размерам контейнера, обеспечивая более быстрое время загрузки. Используйте img-fluid с классом div card img для автоматического масштабирования изображений.
<img src="https://picsum.photos/300/200" class="card-img-top img-fluid" alt="Resized Image">Это гарантирует, что верхнее изображение карточки идеально вписывается, независимо от ширины родительского элемента.
Минификация CSS и JavaScript
Минифицируйте стили и скрипты, чтобы уменьшить размеры файлов. Объедините несколько элементов div class card header и минимизируйте пользовательский CSS для более быстрой отрисовки.
Оптимизированный пример
Вместо применения повторяющихся или пользовательских стилей, таких как это:
<div class="card" style="border: 1px solid blue; text-align: center; padding: 20px;">
<div class="card-body">
<h5 style="font-size: 1.5rem; font-weight: bold;">Custom CSS Header</h5>
<p style="font-size: 1rem; color: #555;">This card uses inline styles, which are inefficient.</p>
</div>
</div>Используйте утилитарные классы Bootstrap для более чистой и поддерживаемой структуры:
<div class="card border-primary text-center p-3">
<div class="card-body">
<h5 class="card-title text-uppercase fw-bold">Utility Classes Header</h5>
<p class="card-text text-secondary">Using Bootstrap's utility classes ensures better performance and maintainability.</p>
</div>
</div>Используйте SVG для иконок
SVG легкие и масштабируемые, что делает их идеальными для заголовков карточек и декоративных элементов. Они загружаются быстрее и сохраняют четкость на разных устройствах.
Пример
<div class="card text-center">
<div class="card-header bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="bi bi-check-circle" fill="currentColor">
<path d="M16 8.98l.686-.688L7.733.011 6.023 1.72 14.98 10.676z"/>
</svg>
<h5 class="card-title">SVG Optimized Header</h5>
</div>
<div class="card-body">
<p class="card-text">SVGs provide clear visuals with minimal overhead.</p>
</div>
</div>Предварительная загрузка и предзагрузка ресурсов
Используйте rel=”preload” для загрузки критически важных ресурсов и rel=”prefetch” для предвосхищения будущих потребностей. Это особенно полезно для тяжелого контента карточек.
Пример
<link rel="preload" href="https://example.com/styles.css" as="style">
<link rel="prefetch" href="https://example.com/next-page.html">Снижение сложности DOM
Избегайте чрезмерно вложенных структур div class card, которые могут замедлить отрисовку. Упрощайте макеты для оптимизации производительности.
Перед оптимизацией
<div class="card">
<div class="card-body">
<div>
<div>
<p>Nested Content</p>
</div>
</div>
</div>
</div>После оптимизации
<div class="card">
<div class="card-body">
<p class="card-text">Optimized Content</p>
</div>
</div>Оптимизация шрифтов
Предварительная загрузка пользовательских шрифтов или использование системных шрифтов для снижения задержки. Чистый класс div card body также может дополнительно подчеркнуть визуальное привлекательность ваших карточек.
Пример
<div class="card">
<div class="card-body" style="font-family: 'Roboto', sans-serif;">
<h5 class="card-title">Optimized Font</h5>
<p class="card-text">Preloading ensures faster rendering for card content.</p>
</div>
</div>Заключение
Компонент карточки Bootstrap – мощное дополнение к фреймворку Bootstrap, которое позволяет разработчикам создавать современные веб-страницы, не углубляясь в то, как работает CSS. Вы можете добавить макеты карточек для представления галерей изображений, виджетов панели управления и отображения блоговых записей или продуктов для веб-сайта электронной коммерции, добавив CSS-классы.
Благодаря новым функциям и компонентам Bootstrap остается мощным CSS-фреймворком, доступным каждому, особенно разработчикам, которым необходимо создавать собственные адаптивные и современные макеты, но у которых не хватает времени, бюджета или глубоких знаний CSS, необходимых для создания пользовательского кода.
Если вы освоили основы Bootstrap, но задаетесь вопросом, как развить свои навыки Bootstrap на новом уровне, ознакомьтесь с нашим курсом Building Your First Website with Bootstrap 4 для быстрого и увлекательного знакомства с возможностями Bootstrap.
Часто задаваемые вопросы по освоению компонентов карточек Bootstrap для адаптивного дизайна
Что такое компонент карточки Bootstrap?
Компонент карточки Bootstrap — это современный и гибкий контейнер для содержимого, который позволяет создавать визуально привлекательные макеты для текста, изображений и мультимедиа. Карточки являются частью фреймворка Bootstrap, разработанного для помощи разработчикам в организации информации в адаптивном и удобном для мобильных устройств формате.
Как создать компонент карточки Bootstrap?
Создание компонента карточки Bootstrap просто. Вы можете использовать div с классом card в качестве контейнера и добавлять в него содержимое, такое как заголовки, текст и изображения. Вот пример:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card body.</p>
</div>
</div>Как установить высоту и ширину карточки в Bootstrap?
Вы можете настроить ширину и высоту карточки Bootstrap, используя встроенные стили или утилитарные классы Bootstrap. Например:
<div class="card" style="width: 20rem; height: 15rem;">
<div class="card-body">
<h5 class="card-title">Custom Card</h5>
<p class="card-text">This card has a custom height and width.</p>
</div>
</div>В качестве альтернативы вы также можете использовать утилитарные классы высоты карточки Bootstrap, такие как w-50 или h-100, чтобы задать размеры карточки адаптивно.
Как изменить размер карточки в Bootstrap?
Чтобы изменить размер карточки, вы можете использовать утилитарные классы размера карточки Bootstrap, такие как w-25, w-50 или w-75 для ширины и h-auto или h-100 для высоты. Это гарантирует, что ваша карточка адаптируется к макету без необходимости добавления дополнительного CSS. Вот пример:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Responsive Card</h5>
<p class="card-text">This card resizes based on its parent container.</p>
</div>
</div>Как создать заголовок карточки в Bootstrap?
Чтобы добавить заголовок к вашей карточке, используйте элемент <h5> с классом=”card-title”. Этот класс обеспечивает единообразный стиль заголовка в соответствии со стандартами дизайна Bootstrap.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is an example of a Bootstrap card with a title.</p>
</div>
</div>Как я могу использовать класс card-body в Bootstrap?
Класс card-body – это утилитарный класс, который обеспечивает отступы и организует контент внутри карточки Bootstrap. Он является основным контейнером для содержимого карточки.
<div class="card">
<div class="card-body">
<h5 class="card-title">Using card-body</h5>
<p class="card-text">This is the content inside the card-body section.</p>
</div>
</div>Как исправить размер карточки Bootstrap?
Для исправления размера карточки примените конкретную ширину и высоту с использованием встроенных стилей или утилитарных классов. Например:
<div class="card" style="width: 250px; height: 300px;">
<img src="https://picsum.photos/250/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fixed Size Card</h5>
<p class="card-text">This card has a fixed size for consistency.</p>
</div>
</div>Как настроить размер карточки в Bootstrap?
Размер карточки можно настраивать динамически с помощью утилитарных классов Bootstrap или CSS Grid. Вот пример отзывчивого изменения размера карточки:
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Adjustable size based on parent grid.</p>
</div>
</div>
</div>
</div>Могу ли я настроить фон и границы карточек Bootstrap?
Да, Bootstrap предлагает обширные утилитарные классы настройки. Используйте bg-primary для цветов фона и border-success для стилизации границ. Пример:
<div class="card bg-info border-danger">
<div class="card-body">
<h5 class="card-title">Custom Background</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>Как использовать изображения с карточками?
Bootstrap поддерживает изображения в карточках с помощью card-img-top или card-img-bottom. Пример:
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card includes a top image.</p>
</div>
</div>Как использовать класс div card body в Bootstrap?
Класс div card body в Bootstrap определяет основную область содержимого внутри карточки. Он обеспечивает отступы и обеспечивает последовательные промежутки для текста, изображений и других элементов внутри карточки.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some text within a card body.</p>
</div>
</div>Что такое класс p card text в Bootstrap?
Класс p card text в Bootstrap используется для оформления текстового содержимого внутри тела карточки. Он применяет стандартные стили типографики, чтобы текст выглядел чисто и профессионально.
<div class="card">
<div class="card-body">
<p class="card-text">This is an example of styled text inside a Bootstrap card.</p>
</div>
</div>Как увеличить размер карточки в Bootstrap?
Чтобы увеличить размер карты, отрегулируйте ее ширину и высоту, используя w-100 для полной ширины или укажите размеры с помощью стилей. Пример:
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Large Card</h5>
<p class="card-text">This card has an increased size for visibility.</p>
</div>
</div>Как сделать карты одинаковой высоты?
Используйте .d-flex и .align-items-stretch:
<div class="row g-3">
<div class="col-md-4 d-flex">
<div class="card flex-fill">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Aligned with others.</p>
</div>
</div>
</div>Source:
https://www.sitepoint.com/bootstrap-card-component-introduction/