bootstrap专栏 06.组件 05.卡片2

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