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="zh-CN">
<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会将我们的内容居中并添加一些内边距。

构建结账表单

步骤3：创建表单

现在，让我们在容器内添加我们的表单：

<form class="needs-validation" novalidate>
<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 class="valid-feedback">
看起来不错！
</div>
<div class="invalid-feedback">
请输入你的名字。
</div>
</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 class="valid-feedback">
看起来不错！
</div>
<div class="invalid-feedback">
请输入你的姓氏。
</div>
</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 class="invalid-feedback">
请输入有效的邮箱地址。
</div>
</div>

<div class="mb-3">
<label for="address" class="form-label">地址</label>
<input type="text" class="form-control" id="address" placeholder="1234 主街" required>
<div class="invalid-feedback">
请输入你的地址。
</div>
</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类进行基本样式设置，btn-primary给按钮一个蓝色，btn-lg使按钮更大。

步骤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 class="invalid-feedback">
请输入持卡人姓名。
</div>
</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 class="invalid-feedback">
请输入信用卡号码。
</div>
</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 class="invalid-feedback">
请输入有效期。
</div>
</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 class="invalid-feedback">
请输入CVV。
</div>
</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