17. BootStrap 卡片组件Cards （1）

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

一卡是一个灵活的，可扩展的内容容器。它包括页眉和页脚选项、种类繁多的内容、上下文背景颜色和强大的显示选项。如果您熟悉 Bootstrap 3，卡片将取代我们旧的面板、井和缩略图。与这些组件类似的功能可用作卡片的修饰符类。

 

内容类型

卡片支持多种内容，包括图像、文本、列表组、链接等。以下是支持内容的示例。

.card是基类：

身体

卡片的构建块是.card-body. 每当您需要卡片中的填充部分时都可以使用它。

.card-title是卡片的标题，.card-subtitle是卡片的副标题

例：

<!--卡片的构建块是.card-body. 每当您需要卡片中的填充部分时都可以使用它。
    .card-title是卡片的标题，.card-subtitle是卡片的副标题
    如果不指定宽度 会默认100% 因为是响应式
-->
<div class="card w-25 text-center">
    <div class="card-body">
        <h1class="card-title">card-title卡片标题</h1>
        <h4class="card-subtitle">card-subtitle卡片副标题</h4>

        card-body -- 卡片主题

    </div>

</div>

卡片的结构：

卡片的构建主体如下：
头card-header
身体card-body
脚card-footer

卡片主体文本 card-text

例：

<!--
卡片的构建主体如下：
头card-header
身体card-body
脚card-footer

---------
卡片主体文本 card-text
-->
<div class="card w-25 text-center">
    <div class="card-header">卡片头</div>
    <div class="card-body">
        <div class="card-text">卡片主体文本</div>
    </div>
    <div class="card-footer">卡片尾</div>
</div>

卡片的 链接 和 文本：

例：

<!--
链接 和 文本：
card-link 卡片链接
card-text 卡片主体文本

-->
<div class="card w-25 text-center">
    <div class="card-header">卡片头</div>
    <div class="card-body">
        <div class="card-text">卡片主体文本</div>
        <br>
        <a class="card-link" href="#"><-联系博主</a>
        <a href="#" class="card-link ">下一片-></a>
    </div>
    <div class="card-footer">卡片尾</div>
</div>

卡片 + 列表组

主要是列表 后面学才写...

<div class="card w-25 text-center">
    <div class="card-header">一线城市</div>
<!--  列表先看着 后面在做笔记 -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">北京</li>
        <li class="list-group-item">上海</li>
        <li class="list-group-item">广州</li>
        <li class="list-group-item">深圳</li>
    </ul>
    <div class="card-footer">
        <a href="#" class="card-link">查看二线城市···</a>
    </div>
</div>

图片

.card-img 是基类

.card-img-top将图像放置在卡片的顶部。

.card-img-top将图像作为卡片的背景。

.card-img-top将图像放置在卡片的底部。

<!--最简单的卡片图：-->
<div class="card w-25 text-center">
    <div class="card-body ">
        <img class="card-img" src="1.jpg">
    </div>
    <div  class="card-header"> 我一路种下了蘑菇、只为让你知道回家的路。
        <br>
        <span class="d-block text-right">——迅捷斥候</span>
    </div>
</div>

<!--
card-img-top
card-img-bottom
card-img-overlay
这仨自己设置试试看
-->

自己动手来个 栅格布局 来三个卡片list

<div class="container-fluid">
    <div class="row">
        <div class="col-4 text-center"><div class="card">
    <div class="card-header"><span class="text-success">No.1</span> 中国</div>
    <div class="card-body">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">一轮：10</li>
            <li class="list-group-item">二轮：8</li>
            <li class="list-group-item">三轮：9</li>
        </ul>
    </div>
    <div class="card-footer">&copy;世界科技竞赛排行榜</div>
</div></div>
        <div class="col-4 text-center"><div class="card">
    <div class="card-header"><span class="text-info">No.2</span> 美国</div>
    <div class="card-body">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">一轮：6</li>
            <li class="list-group-item">二轮：2</li>
            <li class="list-group-item">三轮：3</li>
        </ul>
    </div>
    <div class="card-footer">&copy;世界科技竞赛排行榜</div>
</div></div>
        <div class="col-4 text-center"><div class="card">
    <div class="card-header"><span class="text-warning">No.3</span> 日本</div>
    <div class="card-body">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">一轮：5</li>
            <li class="list-group-item">二轮：3</li>
            <li class="list-group-item">三轮：2</li>
        </ul>
    </div>
    <div class="card-footer">&copy;世界科技竞赛排行榜</div>
</div></div>
    </div>
</div>