7.Bootstrap卡片与延展链接

基本使用

<div class="card">
    <!-- 卡片图片/上图下文 -->
    <img class="card-img-top">
    <!-- 卡片主体 -->
    <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片文本</p>
        <a class="card-link">卡片链接</a>
    </div>
    <!-- 延展链接 -->
    <a class="stretched-link"></a>
</div>

头部和底部

<div class="card">
    <div class="card-header">头</div>
    <div class="card-body">内容</div>
    <div class="card-footer">尾</div>
</div>

图片

类名	样式
.card-img-top	上图下文
.card-img-bottom	下图上文
.card-img-overlay	背景

延展链接

为a标签设置类 ".stretched-link"，可以将该超链延展至有效点击区域。

需要给包裹元素设置 " position:relative " ， 因为卡片组件已经默认有该样式，所以更加适合使用延展链接