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