# 05.卡片二
[toc]{type: "ol", level: [3,4]}
### 卡片
#### 横向导航
- nav-tabs
> 设置为横向导航
- active
> 默认激活状态
- disabled
> 不可点击
```html
<div class="card w-25">
<div class="card-header">
<!--变为横向列表导航-->
<ul class="nav nav-tabs card-header-tabs">
<li><a class="nav-link active" href="#">主页</a></li>
<li><a class="nav-link" href="#">内容</a></li>
<li><a class="nav-link disabled" href="#">其他</a></li>
</ul>
</div>
<div class="card-body">
卡片内容
</div>
</div>
```
#### 文字置顶
> 用于给卡片添加背景
```html
<div class="card w-25">
<img src="../img/panda.jpeg" alt="panda">
<div class="card-img-overlay" style="color: goldenrod">
<h2>我在图片上方显示</h2>
</div>
</div>
```
![卡片二-卡片](05.卡片二-卡片.png)