Bootstrap - Cards: A Beginner's Guide

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в чудесный мир Bootstrap Cards. Как ваш добрососедский компьютерный учитель, я рад помочь вам в этом путешествии. Давайте представим, что мы вместе создаем цифровуюBUMажку - это, по сути, то, что мы будем делать с Bootstrap Cards!

Что такое Bootstrap Card?

Прежде чем перейти к коду, давайте поймем, что такое Bootstrap Card. Представьте его как гибкий контейнер, как коробку, в которую можно положить разного рода контент - текст, изображения, ссылки и многое другое. Это как цифровая версия тех trading cards, которые вы, возможно, собирали в детстве, но гораздо круче и多功能нее!

Основная структура карты

Давайте начнем с самой базовой структуры карты:

<div class="card">
<div class="card-body">
<h5 class="card-title">Здравствуйте, я карта!</h5>
<p class="card-text">Я могу содержать всякую интересную информацию.</p>
</div>
</div>

Этот код создает простую карту с заголовком и текстом. Класс card создает контейнер, а card-body обертывает содержимое.

Типы контента

Теперь давайте рассмотрим различные типы контента, которые мы можем положить в наши карты:

Заголовки, текст и ссылки

<div class="card">
<div class="card-body">
<h5 class="card-title">Заголовок карты</h5>
<h6 class="card-subtitle mb-2 text-muted">Подзаголовок карты</h6>
<p class="card-text">Некоторый быстрый пример текста для дополнения заголовка карты и формирования основной массы содержимого карты.</p>
<a href="#" class="card-link">Ссылка на карту</a>
<a href="#" class="card-link">Другая ссылка</a>
</div>
</div>

Этот пример показывает, как мы можем добавить подзаголовок, больше текста и ссылки на нашу карту. Это как добавить разные разделы на нашу цифровуюBUMажку!

Изображения

Давайте добавим немного визуальной привлекательности с изображениями:

<div class="card">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Смотрите на это красивое изображение!</p>
</div>
</div>

Класс card-img-top размещает изображение в верхней части карты. Это как прилепить фотографию в верхней части вашейBUMажки!

Списки

Мы даже можем добавлять списки в наши карты:

<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">Элемент</li>
<li class="list-group-item">Второй элемент</li>
<li class="list-group-item">Третий элемент</li>
</ul>
</div>

Это создает карту с列表ом внутри. Идеально для списков дел или маркеров!

Комбинированный пример

Теперь давайте объединим все, что мы узнали, в одну "комбинированную" карту:

<div class="card" style="width: 18rem;">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Заголовок карты</h5>
<p class="card-text">Некоторый быстрый пример текста для дополнения заголовка карты и формирования основной массы содержимого карты.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Элемент</li>
<li class="list-group-item">Второй элемент</li>
<li class="list-group-item">Третий элемент</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Ссылка на карту</a>
<a href="#" class="card-link">Другая ссылка</a>
</div>
</div>

Эта карта имеет все - изображение, заголовок, текст, список и ссылки. Это как швейцарский армейский нож карт!

Заголовок и footer

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

<div class="card">
<div class="card-header">
Избранное
</div>
<div class="card-body">
<h5 class="card-title">Специальное лечение заголовка</h5>
<p class="card-text">С поддерживающим текстом ниже в качестве естественного введения в дополнительный контент.</p>
<a href="#" class="btn btn-primary">Перейти куда-то</a>
</div>
<div class="card-footer text-muted">
2 дня назад
</div>
</div>

Заголовок и footer придают нашей карте красивый вид.

Размеры

Мы можем контролировать размер наших карт, используя классы сетки или пользовательский CSS:

<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Заголовок карты</h5>
<p class="card-text">Эта карта occupies 75% of its container's width.</p>
</div>
</div>

Эта карта займет 75% ширины своего контейнера.

Использование разметки сетки

Мы можем использовать сеточную систему Bootstrap для организации наших карт:

<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Специальное лечение заголовка</h5>
<p class="card-text">С поддерживающим текстом ниже в качестве естественного введения в дополнительный контент.</p>
<a href="#" class="btn btn-primary">Перейти куда-то</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Специальное лечение заголовка</h5>
<p class="card-text">С поддерживающим текстом ниже в качестве естественного введения в дополнительный контент.</p>
<a href="#" class="btn btn-primary">Перейти куда-то</a>
</div>
</div>
</div>
</div>

Это создает две карты рядом на больших экранах и сложенные на маленьких экранах.

Нavigaция

Мы даже можем превратить наши карты в навигационные элементы:

<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" href="#">Активный</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ссылка</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Отключено</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Специальное лечение заголовка</h5>
<p class="card-text">С поддерживающим текстом ниже в качестве естественного введения в дополнительный контент.</p>
<a href="#" class="btn btn-primary">Перейти куда-то</a>
</div>
</div>

Это создает карту с навигационными вкладками в верхней части.

Стили карт

Bootstrap предлагает различные стили для карт:

Фон и цвет

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Заголовок</div>
<div class="card-body">
<h5 class="card-title">Заголовок карты PRIMARY</h5>
<p class="card-text">Некоторый быстрый пример текста для дополнения заголовка карты и formations the bulk of the card's content.</p>
</div>
</div>

Это создает синюю карту с белым текстом. Вы можете заменить bg-primary на другие классы цвета, такие как bg-success, bg-warning и т.д.

Заключение

И вот мы arrived, друзья! Мы путешествовали по земле Bootstrap Cards, от базовых структур до продвинутых макетов. Помните, практика делает мастера. Попробуйте combining different elements and styles to create your unique cards. Кто знает? Вы можете создать следующее большое дело в веб-дизайне!

Вот таблица, резюмирующая основные классы Bootstrap Card, которые мы рассмотрели:

Класс	Описание
.card	Создает базовый контейнер карты
.card-body	Обертывает содержимое карты
.card-title	Оформляет заголовок карты
.card-text	Оформляет текст карты
.card-link	Оформляет ссылки внутри карты
.card-img-top	Размещает изображение в верхней части карты
.card-header	Создает заголовок карты
.card-footer	Создает footer карты
.bg-*	Меняет цвет фона карты
.text-*	Меняет цвет текста карты

Теперь смело отправляйтесь и создавайте потрясающие макеты карт! Помните, в веб-разработке, как и в жизни, все о том, чтобы думать вне коробки - или в этом случае, внутри карты! Счастливого кодирования!

Credits: Image by storyset