Bootstrap - 結帳範例

概述

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，使用Bootstrap來創建一個結帳頁面。作為你們親切的家園計算機老師，我非常高興能夠引導你們走過這個過程。如果你是編程新手，別擔心 - 我們會一步一步地進行，最後你將會有一個專業看起來的結帳表單，你可以為之自豪！

Bootstrap-Checkout Demo

Bootstrap是什麼？

在我們深入之前，讓我們來談談Bootstrap。想像你正在蓋房子。如果你不必從頭開始創造每一塊磚，而是可以直接使用預製的牆壁和屋頂，那該有多好？對於網頁開發來說，Bootstrap就是這樣的存在 - 一套預製的組件和樣式，讓創建有吸引力的網站變得更加容易和快速。

建立我們的專案

步驟1：引入Bootstrap

首先，我們需要在專案中引入Bootstrap。這就像在開始工作前準備我們的工具箱。將以下行添加到你的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的樣式和腳本，所以我們不需要下載任何東西。

步驟2：基本的HTML結構

現在，讓我們設置我們的基本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>
<div class="container">
<h1>結帳表單</h1>
<!-- 我們的表單將放在這裡 -->
</div>

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

這將創建一個基本的網頁，有一個標題和一個用於我們表單的容器。container類是Bootstrap類，它將我們的内容居中並給它一些好看的內距。

建立結帳表單

步驟3：創建表單

現在，讓我們在容器中添加我們的表單：

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">名字</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">姓氏</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">電子郵件</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">地址</label>
<input type="text" class="form-control" id="address" placeholder="1234 主街" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">下訂單</button>
</form>

讓我們分解這個：

我們使用Bootstrap的網格系統，使用row和col-md-6來創建有兩列的名字和姓氏。
mb-3類為每個表單組添加到底部的間距。
form-label和form-control是Bootstrap類，用於樣式化我們的標籤和輸入。
btn類為我們的提交按鈕提供基本樣式。

步驟4：添加支付信息

讓我們添加一個支付信息的部分：

<h4 class="mb-3">支付</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">信用卡</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">借記卡</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">卡上姓名</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">信用卡號碼</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">有效期</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

在這裡，我們添加了選擇支付方法的單選按鈕和用於卡詳細信息的字段。gy-3類為行之間添加了垂直間距。

提升用戶體驗

步驟5：添加驗證反饋

Bootstrap提供了表單驗證反饋的類。讓我們為我們的名字輸入添加一些：

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">名字</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
看起來不錯！
</div>
<div class="invalid-feedback">
請輸入你的名字。
</div>
</div>

為了讓這個工作，我們需要添加一些JavaScript：

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

這段腳本在提交表單時添加was-validated類到表單，這會觸發驗證反饋的顯示。

結論

恭喜你！你剛剛使用Bootstrap創建了一個專業看起來的結帳表單。讓我們回顧一下我們學到了什麼：

如何在我們的專案中引入Bootstrap
使用Bootstrap的網格系統進行佈局
使用Bootstrap類樣式化表單元素
添加驗證反饋

記住，熟能生巧。嘗試修改這個表單，添加新字段或更改樣式。你實驗得越多，你就會變得越厲害！

這裡是我們使用的主要Bootstrap類的表格：

類	目的
container	居中內容並添加內距
row	創建有列的水平組
col-md-6	在中等屏幕和更大的屏幕上創建50%寬的列
form-label	樣式化表單標籤
form-control	樣式化表單輸入
btn	基本按鈕樣式
btn-primary	給按鈕一個藍色
btn-lg	使按鈕變大
form-check	樣式化復選框和單選按鈕
valid-feedback	為有效輸入顯示反饋
invalid-feedback	為無效輸入顯示反饋

快樂編程，記住 - 每個專家都曾經是初學者。持續練習，你會對你能夠創造的事物感到驚奇！

Credits: Image by storyset