.card
卡片元件是BootStrap 4 新增的一組重要樣式，它是一一個靈活的、可擴充的内容器，包含了可選的卡片頭和卡片腳、一個大範圍的内容、上下文背景色以及強大的顯示選項。
卡片内容
卡片支援多種多樣的内容，包括
圖檔、文本、列組、連結等，混合并比對多種内容類型以建立你想要的卡片。
主體：.card-body- 引用
.card-body
.card
- 通過
.card-title
<h*>
- 通過
.card-subtitle
<h*>
.card-title
.card-subtitle
.card-body
- 将
.card-link
<a>
-
.card-img-top
-
.card-text
.card-text
<div class="row">
<div class="col-lg-4">
<div class="card">
<img class="card-img-top" src="images/img_02.jpg" alt="">
<div class="card-body">
<h3 class="card-title">這是卡片的标題</h3>
<h4 class="card-subtitle mb-3">這是卡片的幅标題</h4>
<p class="card-text">這是卡片的文本内容，需要添加一個card-text的class</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link">連結1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link">連結2</a>
</div>
</div>
</div>
</div>
建立一個包含内容的清單組卡片。
<div class="row">
<!-- 清單組、頁眉、頁腳 -->
<div class="col-lg-4">
<div class="card">
<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>
</ul>
<div class="card-footer">這是卡片的底部，也叫頁腳</div>
</div>
</div>
</div>
卡片組合模式
混合并結合多種内容形式來建立個性化卡片，下例即是将圖像、塊、文字以及清單整合在一個固定寬度的卡片中。
<!-- 組合模式 -->
<div class="row mt-5">
<div class="col-lg-4">
<div class="card">
<div class="card-header">陳數</div>
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-info">連結2</a>
</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>
</ul>
<div class="card-footer">頁腳</div>
</div>
</div>
</div>
常見的卡片
<div class="row mt-5">
<div class="col">
<div class="card text-center">
<div class="card-header">Featured</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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
</div>
</div>
寬度設定
卡片沒有特定的寬度
width
定義，除非另有定義聲明，否則它們的真實寬度将是100%，您可以根據需要使用自定義CSS也可以使用内聯樣式設定寬度。
<!-- 寬度設定 -->
<div class="row mt-5">
<div class="card" style="width: 20rem;">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
</div>
</div>
文本對齊
.text-center / .text-right / .text-left 。<!-- 對齊 -->
<div class="row mt-5">
<div class="col-lg-4">
<div class="card text-left">
<div class="card-body">
<h5 class="card-title">左對齊</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">居中對齊</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card text-right">
<div class="card-body">
<h5 class="card-title">右對齊</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
</div>
</div>
</div>
</div>
導航
使用 Bootstrap導航元件将導航元件添加到卡片的标題或塊中。
<!-- 導航 -->
<div class="row mt-5">
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="nav-link active">Active</a>
</li>
<li class="nav-item">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="nav-link">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">結合導航</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="card-link btn btn-primary">連結1</a>
</div>
</div>
</div>
圖檔
卡片中包含一些選項來搭配圖像，選擇在卡片的任何一端附加
.cad-img-*
，用卡片内容覆寫圖像（如同背景），或者隻是将圖像置入到卡片當中。
1、圖檔覆寫：可以使用用 Image caps在卡片頂部或是底部，定義圖檔，如同頁眉頁腳效果。
<!-- 圖像 -->
<div class="row mt-5">
<div class="card">
<!-- 圖檔在上邊 -->
<img class="card-img-top" src="images/banner.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<!-- 圖檔在下邊 -->
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
<img class="card-img-bottom" src="images/banner.jpg" alt="">
</div>
</div>
将圖像轉換為卡片背景，并覆寫卡片的文字。根據圖像，你可以選擇是否需要額外的樣式或其它屬性定義。
<!-- 文本放在圖檔身上 -->
<div class="row mt-5">
<div class="card">
<img class="card-img-top" src="images/banner.jpg" alt="">
<div class="card-img-overlay text-white">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small>2 days ago</small></p>
</div>
</div>
</div>
注意，内容不應大于圖像的高度。 如果内容大于圖像，則内容将顯示在圖像外部。
水準排列
使用網格和實用程式類的組合，可以以移動友好和響應方式使卡水準。 在下面的示例中，我們使用
.no-gutters
删除網格排水溝，并使用
.col-md-*
類使卡在
md
斷點處水準。
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="images/banner.jpg" class="card-img" alt>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
背景和顔色
text-* / bg-*| 背景顔色 | 文本顔色 |
|---|---|
| bg-primary | text-primary |
| bg-secondary | text-secondary |
| bg-success | text-success |
| bg-danger | text-danger |
| bg-warning | text-warning |
| bg-info | text-info |
| bg-light | text-light |
| bg-dark | text-dark |
邊框
使用邊框通用樣式來改變卡片的
border-color
、
.text-{color}
，或者在父層的
.card
上顯示内容。
頁眉的頁腳的邊框：使用
.bg-transparent
删除其
background-color
背景顔色。
<!-- 頁眉的頁腳的邊框 -->
<div class="row mt-5">
<div class="col-3">
<div class="card border-success">
<div class="card-header bg-transparent border-success">卡片的頭部</div>
<div class="card-body text-primary">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
</div>
<div class="card-footer bg-transparent border-success">卡片的底部</div>
</div>
</div>
</div>
卡片排版
1、卡片組：将多個卡片結為一個群組，使用他們具有相同的寬度和高度列。卡片組使用
display: flex;
來實作統一的布局。
<!-- 卡片排版-卡片組-->
<div class="row mt-5 card-group">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
當使用帶頁腳的卡片圖時，他們的内容會自動水準對齊和栅格式布局。
卡片之間互不相連的，但是尺寸是一樣。
<!-- 卡片排版-卡片之間互不相連的，但是尺寸是一樣-->
<div class="row mt-5 card-deck">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
将卡片包在
.card-columns
中，可以做出Masonry網站的瀑布式排列卡片效果，卡片是使用
column
屬性，而不是基于 flexbox彈性布局，進而實作更友善實用的浮動對齊，順序是從上到下、從左到右。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" target="_blank" rel="external nofollow"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Bootstrap的卡片樣式</title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container mt-2">
<!-- 卡片排版-瀑布流式排列 -->
<div class="row mt-5">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題1</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題2</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題3</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題4</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">這是卡片的标題5</h5>
<p class="card-text">
這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一個card-text的class。這是卡片的文本内容，需要添加一，需要添加一個card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>