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>