Bootstrap - 產品展示

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入Bootstrap的世界，專注於創建一個吸引人的產品展示頁面。作為你們友好的鄰居計算機科學老師，我很興奮能夠引導你們進行這次冒險。如果你是編程新手，別擔心——我們會從基礎開始，逐步學習。讓我們開始吧！

Bootstrap-Product Demo

Bootstrap是什麼？

在我們投入產品展示之前，讓我們花一會兒時間了解Bootstrap是什麼。想像你正在蓋房子。Bootstrap就像是一套預製的牆壁、門和窗戶，你可以輕鬆地組合它們來創造你的夢想之家。在網頁開發術語中，Bootstrap是一個免費且開源的CSS框架，它能夠幫助你快速且輕鬆地構建響應式、移動優先的網站。

建立我們的專案

步驟1：引入Bootstrap

要開始使用Bootstrap，我們需要在HTML文件中引入它。我們可以在HTML的<head>部分添加以下代碼：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

這些代碼將我們的專案連接到Bootstrap的CSS和JavaScript文件，給我們提供所有Bootstrap的功能。

步驟2：基本HTML結構

現在，讓我們創建我們產品展示頁面的基本結構：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>惊人的產品展示</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>

這個結構設置了我們的HTML文件，包含了必要的Bootstrap鏈接和內容的占位符。

創建產品展示

步驟3：導航欄

讓我們從為我們的頁面添加一個導航欄開始：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">惊人的產品</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">價格</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">聯繫</a>
</li>
</ul>
</div>
</div>
</nav>

這段代碼創建了一個響應式的導航欄，包含品牌名稱和菜單項目。navbar-expand-lg類保證菜單在大屏幕上會展開，在小屏幕上會坍塌為漢堡菜單。

步驟4：英雄區塊

接下來，讓我們添加一個英雄區塊來展示我們的產品：

<section class="bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4">引進惊人的產品</h1>
<p class="lead">你所等待的革命性解決方案。</p>
<a href="#" class="btn btn-light btn-lg">了解更多</a>
</div>
<div class="col-lg-6">
<img src="product-image.jpg" alt="惊人的產品" class="img-fluid rounded">
</div>
</div>
</div>
</section>

這個英雄區塊使用Bootstrap的網格系統來創建兩列佈局。左列包含產品標題、描述和呼叫行動按鈕，而右列則顯示產品圖片。

步驟5：功能區塊

讓我們突出我們產品的特點：

<section id="features" class="py-5">
<div class="container">
<h2 class="text-center mb-5">特點</h2>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">易於使用</h5>
<p class="card-text">我們的產品設計簡單，確保用戶體驗順暢。</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">強大的性能</h5>
<p class="card-text">體驗迅雷不及掩耳的性能，將革命化你的工作流程。</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">24/7支援</h5>
<p class="card-text">我們的專業支援團隊隨時準備為您提供協助，全天候無休。</p>
</div>
</div>
</div>
</div>
</div>
</section>

這個功能區塊使用Bootstrap的卡片來以視覺上吸引人的方式展示每個特點。col-md-4類保證卡片在中等屏幕和大屏幕上以三列佈局。

步驟6：價格區塊

現在，讓我們添加一個價格區塊：

<section id="pricing" class="bg-light py-5">
<div class="container">
<h2 class="text-center mb-5">價格方案</h2>
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card">
<div class="card-header">
<h5 class="card-title text-center">基礎</h5>
</div>
<div class="card-body">
<h3 class="card-title text-center">$9.99<small class="text-muted">/月</small></h3>
<ul class="list-unstyled mt-3 mb-4">
<li class="text-center">包含10個用戶</li>
<li class="text-center">2 GB存儲空間</li>
<li class="text-center">電子郵件支援</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">免費註冊</button>
</div>
</div>
</div>
<!-- 為其他方案添加更多價格卡片 -->
</div>
</div>
</section>

這個價格區塊使用Bootstrap的卡片來展示不同的價格方案。你可以複製卡片的結構來添加更多方案。

步驟7：聯繫表單

最後，讓我們添加一個聯繫表單：

<section id="contact" class="py-5">
<div class="container">
<h2 class="text-center mb-5">聯繫我們</h2>
<div class="row justify-content-center">
<div class="col-lg-6">
<form>
<div class="mb-3">
<label for="name" class="form-label">名稱</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">消息</label>
<textarea class="form-control" id="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">發送消息</button>
</form>
</div>
</div>
</div>
</section>

這個聯繫表單使用Bootstrap的表單類來創建一個乾淨且響應式的佈局。

結論

恭喜你！你剛剛使用Bootstrap創建了一個美麗的產品展示頁面。這只是你可以使用這個強大框架做到的事情的開始。當你繼續探索和實驗時，你會發現更多創建驚艷、響應式網站的辦法。

記住，網頁開發就像學習烹飪一樣——它需要練習、耐心和嘗試新事物的願望。不要害怕犯錯誤；它們都是學習過程的一部分。持續編碼，持續學習，最重要的是，玩得開心！

這裡是一個總結我們在這個教學中使用的關鍵Bootstrap類的表格：

類	用途
container	創建一個固定寬度的響應式容器
row	創建一個水平列的組
col-*	定義不同屏幕尺寸下的列寬
navbar	創建一個導航欄
btn	樣式化按鈕
card	創建一個灵活的内容容器
form-control	樣式化表單輸入和文本區
text-center	居中文本内容
bg-*	設置背景颜色
py-*	設置垂直填充
mb-*	設置底部邊距

在您繼續使用Bootstrap的旅程中，請將這個表格隨身攜帶。祝您編程愉快！

Credits: Image by storyset