BootStrap笔记-卡片的使用
运行截图如下；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CN_TEST1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- bootstrap css核心文件-->
<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!-- bootstrap使用到了jquery，需要提前引用-->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- 弹窗、提示、下拉菜单-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!-- bootstrap核心文件-->
<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="card">
<div class="card-body">Card</div>
</div>
<br/>
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
<br/>
<h2>多颜色Card</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-primary text-white">Primary card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-success text-white">Success card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-info">Info card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-warning text-white">Warning card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-danger text-white">Danger card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg badge-secondary text-white">Secondary card</div>
</div>
<br/>
<div class="card">
<div class="card-body bg-dark text-light">Dark card</div>
</div>
<br/>
<!-- 标题、文本、链接-->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Hello World</p>
<a href="#" class="card-link">link one</a>
<a href="#" class="card-link">link two</a>
</div>
</div>
<br/>
<!-- 图片-->
<div class="card" style="width: 500px">
<img class="card-img-top" src="pic/it1995.jpg"/>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Hello World</p>
<a href="#" class="card-link">link one</a>
<a href="#" class="card-link">link two</a>
</div>
</div>
<br/>
<!-- 图片设置为背景-->
<div class="card" style="width: 500px">
<img class="card-img-top" src="pic/it1995.jpg"/>
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Hello World</p>
<a href="#" class="card-link">link one</a>
<a href="#" class="card-link">link two</a>
</div>
</div>
</div>
</body>
</html>解释：
①在div中先添加card类，在到内部的div中设置card-body，就能创建卡片了；
②卡片通常分为三个部分分别是：card-header、card-body、card-footer；
③图片卡片里面，在img中添加card-img-top和card-img-bottom设置图片在文字的什么地方。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/122660743
内容来源于网络，如有侵权，请联系作者删除！
