Bootstrap4 Tutoriel de base

Bootstrap4 Menus déroulants Bootstrap4 Groupes de listes

Bootstrap4 Carte (Card)

Bootstrap4Une nouvelle carte flexible et extensible a été introduite pour remplacer les anciens composants panel, well et thumbnail. Elle inclut des options d'en-tête et de pied de page, divers contenus, couleurs de contexte de fond et des options de visualisation puissantes. Dans la partie suivante, vous verrez comment utiliser le composant card.

Carte simple

Nous pouvons utiliser Bootstrap4 La .card et .card-body 类来创建一个简单的卡片，示例如下:

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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>

Vérifiez le test ‹/›

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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>

Vérifiez le test ‹/›

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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">Basic　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-primary　text-white">
　　　　<div class="card-body">Primary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-success　text-white">
　　　　<div class="card-body">Success　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-info　text-white">
　　　　<div class="card-body">Info　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-warning　text-white">
　　　　<div class="card-body">Warning　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-danger　text-white">
　　　　<div class="card-body">Danger　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-secondary　text-white">
　　　　<div class="card-body">Secondary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-dark　text-white">
　　　　<div class="card-body">Dark　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-light　text-dark">
　　　　<div class="card-body">Light　card</div>
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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">Card　title</h4>
　　　　　　<p class="card-text">Some　example　text.　Some　example　text.</p>
　　　　　　<a　href="#"　class="card-link">Card　link</a>
　　　　　　<a　href="#"　class="card-link">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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>Carte d'image</h2>
　　<p>Image en haut (card-img-top):</p>
　　<div class="card" style="largeur:400px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/"img_avatar.png" alt="Image de carte" style="largeur:100%">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Un texte d'exemple, un texte d'exemple. John Doe est un architecte et ingénieur</p>
　　　　　　<a href="#" class="btn btn-primary">Voir Profil</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>Image en bas (card-img-bottom):</p>
　　<div class="card" style="largeur:400px">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Jane Doe</h4>
　　　　　　<p class="card-text">Un texte d'exemple, un texte d'exemple. Jane Doe est un architecte et ingénieur</p>
　　　　　　<a href="#" class="btn btn-primary">Voir Profil</a>
　　　　</div>
　　　　<img class="card-img-bottom" src="https://static.oldtoolbag.com/images/mix/"img_avatar.png" alt="Image de carte" style="largeur:100%">
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

Si l'image doit être définie comme arrière-plan, vous pouvez utiliser .card-img-overlay de classe :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="largeur=device-largeur,　initial-scale=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>Texte couvrant l'image</h2>
　　<p>Si l'image doit être définie comme arrière-plan, vous pouvez utiliser .card-img-overlay de classe :</p>
　　<div class="card img-fluid" style="largeur:500px">
　　　　<img class="card-img-top" src="https://static.oldtoolbag.com/images/mix/"img_avatar.png" alt="Image de carte" style="largeur:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Quelque exemple de texte, quelques exemples de texte. Quelque exemple de texte, quelques exemples de texte. Quelque exemple de texte, quelques exemples de texte. Quelque exemple de texte, quelques exemples de texte.</p>
　　　　　　<a href="#" class="btn btn-primary">Voir Profil</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

Bootstrap4 Menus déroulants Bootstrap4 Groupes de listes