Bootstrap - Cards: 入門指南
你好，未來的網頁開發者們！今天，我們將要深入Bootstrap Cards的奇妙世界。作為你們友好的鄰居電腦老師，我非常高興能夠引導你們開展這次旅程。讓我們想像我們正在一起建造一個數字剪貼簿——這就是我們將要用Bootstrap Cards做的事情！
Bootstrap Card是什麼？
在我們投入代碼之前，讓我們先了解什麼是Bootstrap Card。把它想像成一個靈活的容器，就像一個盒子，你可以在裡面放置不同類型的內容——文字、圖像、鏈接等等。它就像你小時候可能收集的交易卡片的數字版本，但更加酷炫和多功能！
基本卡片結構
讓我們從最基本的卡片結構開始：
<div class="card">
<div class="card-body">
<h5 class="card-title">你好，我是卡片！</h5>
<p class="card-text">我可以包含各種有趣的資訊。</p>
</div>
</div>這段代碼創建了一個帶有標題和文本的簡單卡片。card類別創建容器，card-body包裝內容。
內容類型
現在，讓我們探索我們可以在卡片中放置的不同類型的內容：
標題、文本和鏈接
<div class="card">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<h6 class="card-subtitle mb-2 text-muted">卡片副標題</h6>
<p class="card-text">一些快速的範例文本，用於在卡片標題上建立並構成卡片內容的主要部分。</p>
<a href="#" class="card-link">卡片鏈接</a>
<a href="#" class="card-link">另一個鏈接</a>
</div>
</div>這個例子展示了我們如何在卡片中添加副標題、更多文本和鏈接。這就像在我們的數字剪貼簿頁面上添加不同的部分！
圖像
讓我們添加一些視覺吸引力——圖像：
<div class="card">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">看看這張美麗的圖像！</p>
</div>
</div>card-img-top類別將圖像放置在卡片的頂部。這就像在你的剪貼簿頁面上方的頂部貼上一張照片！
列表組
我們甚至可以在卡片中添加列表：
<div class="card">
<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>這創建了一個帶有列表的卡片。對於待辦事項或總結非常適合！
大雜燴
現在，讓我們把我們學到的所有內容結合成一個“大雜燴”卡片：
<div class="card" style="width: 18rem;">
<img src="path/to/your/image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">一些快速的範例文本，用於在卡片標題上建立並構成卡片內容的主要部分。</p>
</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-body">
<a href="#" class="card-link">卡片鏈接</a>
<a href="#" class="card-link">另一個鏈接</a>
</div>
</div>這張卡片擁有所有東西——圖像、標題、文本、列表和鏈接。它是卡片的瑞士軍刀！
頭部和尾部
我們可以在卡片中添加頭部和尾部以獲得額外的結構：
<div class="card">
<div class="card-header">
精選
</div>
<div class="card-body">
<h5 class="card-title">特別標題處理</h5>
<p class="card-text">以下有支持性文字，作為引導至額外內容的自然導入。</p>
<a href="#" class="btn btn-primary">去某處</a>
</div>
<div class="card-footer text-muted">
2天前
</div>
</div>頭部和尾部給我們的卡片一個漂亮、精緻的外觀。
尺寸
我們可以使用網格類別或自定義CSS來控制卡片的大小：
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">卡片標題</h5>
<p class="card-text">這張卡片寬度為75%。</p>
</div>
</div>這張卡片將佔其容器寬度的75%。
使用網格標記
我們可以使用Bootstrap的網格系統來組織我們的卡片：
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特別標題處理</h5>
<p class="card-text">以下有支持性文字，作為引導至額外內容的自然導入。</p>
<a href="#" class="btn btn-primary">去某處</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">特別標題處理</h5>
<p class="card-text">以下有支持性文字，作為引導至額外內容的自然導入。</p>
<a href="#" class="btn btn-primary">去某處</a>
</div>
</div>
</div>
</div>這會在較大的屏幕上創建兩個並排的卡片，在小屏幕上則堆疊。
導航
我們甚至可以把卡片變成導航元素：
<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="#">活動</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">鏈接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用的</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">特別標題處理</h5>
<p class="card-text">以下有支持性文字，作為引導至額外內容的自然導入。</p>
<a href="#" class="btn btn-primary">去某處</a>
</div>
</div>這創建了一個帶有導航標籤在頂部的卡片。
卡片樣式
Bootstrap為卡片提供了多種樣式：
背景和顏色
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">頭部</div>
<div class="card-body">
<h5 class="card-title">主要卡片標題</h5>
<p class="card-text">一些快速的範例文本，用於在卡片標題上建立並構成卡片內容的主要部分。</p>
</div>
</div>這創建了一個藍色背景和白色文字的卡片。你可以將bg-primary替換為其他顏色類別，如bg-success、bg-warning等。
結論
好了，各位！我們已經穿越了Bootstrap Cards的土地，從基本結構到進階佈局。記住，熟能生巧。嘗試組合不同的元素和樣式來創造你獨特的卡片。誰知道呢？你可能會創造出網頁設計中的下一個大熱門！現在就去創造驚人的卡片佈局吧！記住，在網頁開發中，也像在生活中一樣，要Think outside the box——或者說，在這個案例中，是在盒子裡——卡片中！快樂編程！
Credits: Image by storyset