bootstrap专栏 06.组件 04.卡片1

# 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)