# 04.卡片一
[toc]{type: "ol", level: [4]}
### 卡片
#### 设置卡片
```html
<div class="card" style="width: 200px">
<!--将内容写入卡片框架中-->
</div>
```
#### 卡片头部
```html
<div class="card-header">
卡片头部
</div>
```
#### 卡片内容
```html
<div class="card-body">
卡片内容
</div>
```
#### 添加列表
```html
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
```
#### 添加图片
```html
<img src="../img/panda.jpeg" class="card-img-bottom" alt="panda">
```
#### 添加链接
```html
<a href="https://www.ideas.top/" class="card-link">I have a good idea</a>
```
#### 卡片尾部
```html
<div class="card-footer">
卡片尾部
</div>
```
![卡片一-卡片](04.卡片一-卡片.png)