Bootstrap - 相簿範例

歡迎，有志於網頁開發的各位！今天，我們將要進入Bootstrap的精彩世界，並創建一個美麗的相簿範例。作為你們親切的鄰居計算機科學老師，我在這裡指引你們一步步完成這個旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起踏上這場編程冒險！

Bootstrap-Album Demo

什麼是相簿？

在深入代碼之前，我們先來聊聊在網頁設計中相簿是什麼。把它當作一個數字相簿，但它不僅僅是照片，還可以展示各種類型的內容。它是展示一系列項目的視覺吸引力方式，無論這些項目是產品、作品集還是部落格文章。

在我們的案例中，我們將創建一個響應式的卡片網格，每張卡片代表我們相簿中的一個項目。這就像在桌子上排列一堆寶麗來照片，但我們是在網頁上進行！

建立我們的專案

步驟 1：HTML結構

讓我們從為我們的相簿範例設置基本的HTML結構開始。我們將使用Bootstrap的CSS和JavaScript文件來讓我們的生活更簡單。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 相簿範例</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 我們的相簿內容將放在這裡 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

這是我們的基礎。把它當作我們即將在上面作畫的空畫布。<link>標籤引入了Bootstrap的樣式，而底部的<script>標籤則加載了它的JavaScript功能。

創建相簿佈局

步驟 2：添加頭部

讓我們為我們的相簿添加一個簡單的頭部：

<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>我的超棒相簿</strong>
</a>
</div>
</div>
</header>

這會在我們頁面的頂部創建一個深色的導航欄。這就像我們相簿的封面上方！

步驟 3：主內容區域

現在，讓我們設置主內容區域，我們的相簿項目將居住在這裡：

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- 相簿項目將放在這裡 -->
</div>
</div>
</div>
</main>

這個結構為我們的相簿創建了一個淺色背景，並設置了一個響應式網格。這就像佈置一個空白的相簿頁面，準備我們填滿回憶！

步驟 4：創建相簿項目

現在來到有趣的部分——讓我們為我們的相簿添加一些項目：

<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>佔位符</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">縮略圖</text>
</svg>
<div class="card-body">
<p class="card-text">這是一張更寬的卡片，下面有支持文字，作為附加內容的自然引導。</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
<button type="button" class="btn btn-sm btn-outline-secondary">編輯</button>
</div>
<small class="text-muted">9 分鐘</small>
</div>
</div>
</div>
</div>

這段代碼創建了一個單個相簿項目。<svg>元素是圖像的佔位符。在實際项目中，你會將其替換為指向你實際圖像的<img>標籤。

要創建多個項目，只需將此代碼塊複製並粘貼到前面創建的row div中的多次。

增強我們的相簿

步驟 5：添加底部

讓我們用一個簡單的底部來完成我們的相簿：

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">回到頂部</a>
</p>
<p class="mb-1">相簿範例是 © Bootstrap，但請下載並為自己定制它！</p>
</div>
</footer>

這為我們頁面的底部添加了一個 nice 觸感，給予了應有的認可，並提供了一個方便的“回到頂部”鏈接。

組合所有內容

現在我們已經走過了所有的組件，讓我們看看我們完整的HTML文件是什麼樣的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 相簿範例</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>我的超棒相簿</strong>
</a>
</div>
</div>
</header>

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- 相簿項目 1 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>佔位符</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">縮略圖</text>
</svg>
<div class="card-body">
<p class="card-text">這是一張更寬的卡片，下面有支持文字，作為附加內容的自然引導。</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
<button type="button" class="btn btn-sm btn-outline-secondary">編輯</button>
</div>
<small class="text-muted">9 分鐘</small>
</div>
</div>
</div>
</div>
<!-- 重複上面的相簿項目結構以添加更多項目 -->
</div>
</div>
</div>
</main>

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">回到頂部</a>
</p>
<p class="mb-1">相簿範例是 © Bootstrap，但請下載並為自己定制它！</p>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

結論

這就是了，各位！我們使用Bootstrap創建了一個美麗的、響應式的相簿範例。記住，這只是開始。隨意定制顏色、添加你自己的圖像和玩轉佈局。網頁開發就是關於實驗和創造力！

當我們結束時，我會想起一個學生曾經告訴我，“先生，我從未想到過我可以用HTML創建出這麼專業看起來的東西！”這就是像Bootstrap這樣的框架的魔力——它給你一個起跑點，讓你可以專注於內容和創意。

持續練習，持續探索，最重要的是，享受其中！直到下個時候，快樂編程！

Credits: Image by storyset