Bootstrap 卡片
-
定义和使用
Bootstrap 中的卡片是带边框的框,其内容周围有一些填充;它包括页眉,页脚,内容,颜色等选项。要创建 Bootstrap 基本卡片是使用 .card 类创建的,并且卡中的内容具有.card-body 类:
尝试一下<div class="container"> <div class="card"> <div class="card-body">基本的卡片</div> </div> </div>
输出结果如下:基本的卡片 -
页眉和页脚
.card-header 类向卡片添加标题,.card-footer 类向卡片添加页脚:
尝试一下<div class="container"> <div class="card"> <div class="card-header">页眉</div> <div class="card-body">内容</div> <div class="card-footer">页脚</div> </div> </div>
输出结果如下:页眉内容 -
带有背景色的卡片
要为卡片添加背景颜色,可以使用 CSS 类名 .bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark 和 .bg-light。
尝试一下<div class="container"> <div class="card"> <div class="card-body">Basic card</div> </div> <div class="card bg-primary text-white"> <div class="card-body">Primary card</div> </div> <div class="card bg-success text-white"> <div class="card-body">Success card</div> </div> <div class="card bg-info text-white"> <div class="card-body">Info card</div> </div> <div class="card bg-warning text-white"> <div class="card-body">Warning card</div> </div> <div class="card bg-danger text-white"> <div class="card-body">Danger card</div> </div> <div class="card bg-secondary text-white"> <div class="card-body">Secondary card</div> </div> <div class="card bg-dark text-white"> <div class="card-body">Dark card</div> </div> <div class="card bg-light text-dark"> <div class="card-body">Light card</div> </div> </div>
输出结果如下:Basic cardPrimary cardSuccess cardInfo cardWarning cardDanger cardSecondary cardDark cardLight card -
标题,文字和链接
使用 .card-title 将名片标题添加到任何标题元素。.card-text 类用于删除 <p> 元素的底边距,如果它是 .card-body 中的最后一个子级(或唯一的子级)。 .card-link 类为任何链接添加蓝色,并具有悬停效果。
尝试一下<div class="container"> <div class="card"> <div class="card-body"> <h4 class="card-title">卡标题</h4> <p class="card-text">一些示例文本 一些示例文本</p> <a href="#" class="card-link">卡链接</a> <a href="#" class="card-link">另一个链接</a> </div> </div> </div>
输出结果如下: -
卡片图像
将 .card-img-top 或 .card-img-bottom 添加到 <img>,以将图片放在卡内的顶部或底部;请注意,我们已在 .card-body 外部添加了图片以覆盖整个宽度:
尝试一下<div class="container"> <div class="card" style="width:400px"> <img style="width:100%" class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">张三</h4> <p class="card-text">一些内容示例</p> <a href="#" class="btn btn-primary">个人资料</a> </div> </div> <div class="card" style="width:400px"> <div class="card-body"> <h4 class="card-title">卡丽</h4> <p class="card-text">一些内容示例</p> <a href="#" class="btn btn-primary">个人资料</a> </div> <img style="width:100%" class="card-img-bottom" src="img_avatar6.png" alt="Card image"> </div> </div>
延伸链接
将 .stretched-link 类添加到卡片内的链接中,它将使整个卡片可单击和可悬停(卡将充当链接):
尝试一下<a href="#" class="btn btn-primary stretched-link">个人资料</a>
图片背景
将图像变成卡片背景,并使用 .card-img-overlay 在图像顶部添加文本:
尝试一下<div class="container"> <div class="card" style="width:500px"> <img style="width:100%" class="card-img-top" src="img_avatar1.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">张三</h4> <p class="card-text">一些内容示例一些内容示例</p> <a href="#" class="btn btn-primary">个人资料</a> </div> </div> </div>
输出结果如下: -
多列卡片
.card-columns 类创建类似于砖石的纸牌网格(如pinterest);当您插入更多卡时,布局将自动调整。注意:卡片垂直显示在小屏幕(小于576像素)上:
尝试一下<div class="container"> <div class="card-columns"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">第一张卡中的一些文字</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">第二张卡中的一些文字</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">第三张卡中的一些文字</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">第四张卡中的一些文字</p> </div> </div> <div class="card bg-light"> <div class="card-body text-center"> <p class="card-text">第五张卡中的一些文字</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">第六张卡中的一些文字</p> </div> </div> </div> </div>
输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
第五张卡中的一些文字
第六张卡中的一些文字
-
宽高相等的卡片
.card-deck 类创建高度和宽度相等的卡片网格;当您插入更多卡片时,布局将自动调整。注意:卡片垂直显示在小屏幕(小于576像素)上:
尝试一下<div class="container"> <div class="card-deck"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">第一张卡中的一些文字</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">第二张卡中的一些文字</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">第三张卡中的一些文字</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">第四张卡中的一些文字</p> </div> </div> </div> </div>
输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
-
卡片组
.card-group 类似于 .card-deck;唯一的区别是 .card-group 类删除了每张卡之间的左右空白。注意:卡片会垂直显示在小屏幕(小于576像素)上,并具有上下边距:
尝试一下<div class="container"> <div class="card-group"> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text">第一张卡中的一些文字</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">第二张卡中的一些文字</p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text">第三张卡中的一些文字</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">第四张卡中的一些文字</p> </div> </div> </div> </div>
输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
-