Основной учебник Bootstrap4

Дропдаун-меню Bootstrap4 Группы списков Bootstrap4

Карта Bootstrap4 (Card)

Bootstrap4 ввел новый гибкий и расширяемый контейнер для содержимого card, заменив старые компоненты panel, well и thumbnail. Он включает в себя опции заголовка и подзаголовка, различные содержимое, контекстные цвета фона и мощные параметры отображения. В следующей части вы увидите, как использовать компонент card.

Простая карта

Мы можем создать простую карту с помощью классов .card и .card-body в Bootstrap4, пример приведен ниже:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Простая карта</h2>
　　<div　class="card">
　　　　<div class="card-body">Простая карта</div>
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Карта Bootstrap4 ähnelt dem Panel, Bildvorschaubild und well in Bootstrap 3.

Заголовок и низ

.card-header класс используется для создания стиля заголовка карты, .card-footer класс используется для создания стиля низа карты:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Заголовок и низ карты</h2>
　　<div　class="card">
　　　　<div class="card-header">Заголовок</div>
　　　　<div class="card-body">Содержимое</div>　
　　　　<div class="card-footer">Низ</div>
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Карты с множеством цветов

Bootstrap 4 предоставляет множество классов фона карт: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark и .bg-light。

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Карты с множеством цветов</h2>
　　<div　class="card">
　　　　<div class="card-body">Базовая карта</div>
　　</div>
　　<br>
　　<div class="card bg-primary text-white">
　　　　<div class="card-body">Основная карта</div>
　　</div>
　　<br>
　　<div class="card bg-success text-white">
　　　　<div class="card-body">Карта успеха</div>
　　</div>
　　<br>
　　<div class="card bg-info text-white">
　　　　<div class="card-body">Карта информации</div>
　　</div>
　　<br>
　　<div class="card bg-warning text-white">
　　　　<div class="card-body">Карта предупреждения</div>
　　</div>
　　<br>
　　<div class="card bg-danger text-white">
　　　　<div class="card-body">Карта опасности</div>
　　</div>
　　<br>
　　<div class="card bg-secondary text-white">
　　　　<div class="card-body">Вторичная карта</div>
　　</div>
　　<br>
　　<div　class="card　bg-dark　text-white">
　　　　<div　class="card-body">Тёмная карточка</div>
　　</div>
　　<br>
　　<div　class="card　bg-light　text-dark">
　　　　<div　class="card-body">Лёгкая карточка</div>
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

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

Мы можем использовать класс .card-title на элементе заголовка для настройки заголовка карточки . .card-text класс используется для настройки содержимого текста карточки. .card-link класс используется для установки цвета ссылок.

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Заголовки, текст и ссылки</h2>
　　<div　class="card">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">Заголовок карточки</h4>
　　　　　　<p　class="card-text">Примерный текст. Примерный текст.</p>
　　　　　　<a　href="#"　class="card-link">Ссылка карточки</a>
　　　　　　<a　href="#"　class="card-link">Ещё ссылка</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

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

Мы можем дать <img> Добавить .card-img-top (изображение над текстом) или .card-img-bottom (изображение под текстом) для настройки изображения карточки:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Изображение карточки</h2>
　　<p>Изображение вверху (card-img-top):</p>
　　<div　class="card"　style="width:400px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Карточная изображение" style="ширина:100%">
　　　　<div　class="card-body">
　　　　　　<h4 class="card-title">John Doe</h4>
　　　　　　<p　class="card-text">Примерный текст　примечание примерный текст. John Doe - архитектор и инженер</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>Изображение внизу (card-img-bottom):</p>
　　<div　class="card"　style="width:400px">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">Jane Doe</h4>
　　　　　　<p　class="card-text">Примерный текст　примечание примерный текст. Jane Doe - архитектор и инженер</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　　　<img class="card-img-bottom" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Карточная изображение" style="ширина:100%">
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Если изображение нужно установить в качестве фона, можно использовать класс .card-img-overlay:

Пример

<!DOCTYPE html>
<html>
<head>
　　<title>Пример Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="ширина=device-width, начальный масштаб=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Текст, покрывающий изображение</h2>
　　<p>Если изображение нужно установить в качестве фона, можно использовать класс .card-img-overlay:</p>
　　<div class="card img-fluid" style="ширина:500px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/img_avatar.png" alt="Карточная изображение" style="ширина:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4 class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Некоторый пример текста некий пример текст. Некоторый пример текста некий пример текст. Некоторый пример текста некий пример текст. Некоторый пример текста некий пример текст.</p>
　　　　　　<a href="#" class="btn btn-primary">See Profile</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, как это выглядит ‹/›

Дропдаун-меню Bootstrap4 Группы списков Bootstrap4