4 Bootstrap4組件——卡片
.card卡片組件是BootStrap 4新增的一組重要樣式，它是一個靈活的、可擴展的內容管理器，可以包含圖片、列表、文本、鏈接等多種組合，卡片有可選的卡片頭和卡片腳、一個大範圍的內容、上下文背景色以及強大的顯示選項。 使用.card構建卡片
<div class="card"></div>
1 卡片內容
1.1 卡片標題
使用.card-title（標題）和.card-subtitle（小標題）構建卡片標題
<div class="card">
<h1 class="card-title">卡片標題</h1>
<h5 class="card-subtitle text-muted">小標題</h5>
<div class="card-body">卡片主體</div>
</div>
1.2卡片主體
使用.card-body構建卡片主體內容
<div class="card">
<div class="card-body">卡片主體</div>
</div>
1.2.1 文本
卡片主體使用.card-text代表文本內容
<div class="container">
<div class="card">
<h1 class="card-title">卡片標題</h1>
<h5 class="card-subtitle text-muted">小標題</h5>
<div class="card-body">
<p class="card-text">卡片主體</p>
</div>
</div>
</div>
1.2.2 超鏈接
卡片主體使用.card-link代表超鏈接
<div class="container">
<div class="card">
<h1 class="card-title">卡片標題</h1>
<h5 class="card-subtitle text-muted">小標題</h5>
<div class="card-body">
<p class="card-text">卡片主體</p>
<a href="#" class="card-link">註冊</a>
<a href="#" class="card-link">登錄</a>
</div>
</div>
</div>
1.3 圖片
使用.card-img-top定義一張圖片在卡片的頂部
<div class="container">
<div class="card">
<img src="#" class="card-img-top">
<h1 class="card-title">卡片標題</h1>
<h5 class="card-subtitle text-muted">小標題</h5>
<div class="card-body">
<p class="card-text">卡片主體</p>
<a href="#" class="card-link">註冊</a>
<a href="#" class="card-link">登錄</a>
</div>
</div>
</div>
1.4 列表組
1.4.1 基本結構
使用.list-group構建列表組
<div class="container">
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
</div>
</div>
1.4.2 列表標題
使用.card-header定義列表組標題
<div class="container">
<div class="card">
<div class="card-header">列表標題</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
</div>
</div>
1.4.3 列表頁眉頁腳
使用.card-footer配合.card-header構建頁眉頁腳
<div class="container">
<div class="card">
<div class="card-header">頁眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
<div class="card-footer">頁腳</div>
</div>
</div>
2 縮放
卡片沒有特定的寬度width定義，除非另有定義聲明，否則它們的真實寬度將是100%，您可以根據需要使用自定義CSS，引入柵格系統。
2.1 使用柵格系統
使用柵格系統，根據需求按行與列來裝載卡片。
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-6">
<div class="card">
<div class="card-header">頁眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
<div class="card-footer">頁腳</div>
</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="card">
<div class="card-header">頁眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
<div class="card-footer">頁腳</div>
</div>
</div>
</div>
</div>
2.2 使用全局樣式
使用.w-25，.w-50，.w-75，.w-100來設置卡片顯示的百分比
<div class="container">
<div class="card w-50 float-left">
<div class="card-header">頁眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
<div class="card-footer">頁腳</div>
</div>
<div class="card w-50 float-left">
<div class="card-header">頁眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">列表1</li>
<li class="list-group-item">列表2</li>
<li class="list-group-item">列表3</li>
</ul>
<div class="card-footer">頁腳</div>
</div>
</div>
2.3 文本對齊方式
使用我們的文本對齊類來更改或特定部份的文本對齊。
使用.text-left,.text-center,.text-right可以設置文本特定部分的文本對齊。
2.4 導航
卡片使用.card-header-tabs可以配合列表ul實現導航
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
將ul添加.nav-pills和.card-header-pills實再按鈕導航
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
2.5 圖片
2.5.1 圖片覆蓋
卡片中包含一些選項來搭配圖像，選擇在卡片的任何一端附加.cad-img-*，用卡片內容覆蓋圖像（如同背景），或者只是將圖像置入到卡片當中。
<div class="container">
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">文本內容</p>
<p class="card-text"><small class="text-muted">註釋文本</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">文本內容</p>
<p class="card-text"><small class="text-muted">註釋文本</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
</div>
2.5.2圖片疊加覆蓋
使用.card-img-overlay可以實現圖片作爲背景，這種做並不是真的做爲背景，而是通過定位讓文字浮動在圖片上。
<div class="card mb-3">
<img class="card-img-overlay" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">文本內容</p>
<p class="card-text"><small class="text-muted">註釋文本</small></p>
</div>
</div>