Bootstrap - 定价演示

什么是定价？

在我们深入使用Bootstrap创建定价演示之前，让我们先花点时间了解定价在网页设计和商业环境中的实际含义。

Bootstrap-Pricing Demo

定价是任何产品或服务要约中的关键要素。它是企业向潜在客户传达其产品或服务价值的方式。在网页设计中，定价部分或页面是展示不同计划或套餐的地方，通常以清晰、对比的格式呈现。

把它想象成餐厅的菜单。你希望客户能够轻松看到有哪些选择以及相应的费用，这样他们就能做出明智的决定。这正是我们即将使用Bootstrap来创建的内容！

为什么使用Bootstrap进行定价？

Bootstrap是一个强大的前端框架，可以轻松创建响应式、专业的网站。它对于定价部分尤其有用，因为：

它提供了预先设计的组件，非常适合显示定价信息。
它开箱即用就是响应式的，意味着你的定价部分将在所有设备上看起来都很棒。
它是可定制的，允许你匹配品牌的外观和感觉。

现在，让我们卷起袖子，开始构建我们的定价演示！

设置Bootstrap环境

首先，我们需要设置Bootstrap环境。别担心，听起来可能很复杂，但实际上非常简单！

创建一个新的HTML文件并粘贴以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 定价演示</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的内容将放在这里 -->

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

这设置了一个基本的HTML结构，并从CDN（内容分发网络）包含了Bootstrap的CSS和JavaScript文件。这就像为我们的房子打基础——现在我们准备好开始建设了！

创建定价部分

现在，让我们创建我们的定价部分。我们将使用Bootstrap的卡片组件来创建三个定价层级：基础版、专业版和企业版。

将以下代码添加到<body>标签内：

<div class="container py-5">
<h1 class="text-center mb-5">我们的定价计划</h1>
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
<h4 class="my-0 fw-normal">基础版</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">0元<small class="text-muted fw-light">/月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>包含10个用户</li>
<li>2 GB存储空间</li>
<li>邮件支持</li>
<li>帮助中心访问权限</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">免费注册</button>
</div>
</div>
</div>
<!-- 为专业版和企业版重复这个结构 -->
</div>
</div>

让我们分解一下：

我们使用了一个容器来居中我们的内容并添加一些填充。
row和col类创建了一个响应式网格系统。
每个定价层级由一个card组件表示。
我们使用Bootstrap的实用类如text-center、mb-4等，来样式化我们的元素，而不需要编写自定义CSS。

定制外观

Bootstrap开箱即用很好，但让我们添加一些自定义触摸，使我们的定价演示更加醒目！

在<head>部分添加这个<style>标签：

<style>
.pricing-card-title {
font-size: 2.5rem;
}
.card-header {
background-color: #f8f9fa;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: white;
}
</style>

这段自定义CSS将：

使价格更大
给卡片标题一个浅色背景
改变按钮在悬停时的颜色

添加交互性

让我们为我们的定价演示添加一点交互性。我们将使“专业版”计划在悬停时突出显示。

在<body>标签的末尾添加以下JavaScript：

<script>
document.addEventListener('DOMContentLoaded', function() {
const proCard = document.querySelectorAll('.card')[1];
proCard.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.05)';
this.style.transition = 'transform 0.3s ease';
});
proCard.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)';
});
});
</script>

这段脚本将在鼠标悬停时略微放大“专业版”卡片，创建一个微妙但引人入胜的效果。

响应式设计

Bootstrap最好的特性之一就是它的内置响应性。我们的定价演示将自动调整，以在所有屏幕尺寸上看起来都很棒。然而，我们可以进一步增强这一点。

在你的row div中添加这些类：

<div class="row row-cols-1 row-cols-md-3 mb-3 text-center g-4">

g-4类在我们的列之间添加了间隔，而row-cols-1 row-cols-md-3确保在小屏幕上，我们的卡片垂直堆叠，而在中屏幕或更大的屏幕上，它们以三列显示。

结论

恭喜你！你刚刚使用Bootstrap创建了一个专业的定价演示。让我们回顾一下我们学到的东西：

我们设置了Bootstrap环境。
我们使用Bootstrap的网格和卡片组件创建了一个响应式的定价部分。
我们用一些简单的CSS定制了外观。
我们用JavaScript添加了交互性。
我们确保我们的设计是响应式的，并且在所有设备上看起来都很棒。

记住，熟能生巧。尝试修改这个演示——改变颜色、添加更多层级或包含不同的功能。你越玩Bootstrap，就越熟悉其强大的特性。

快乐编码，愿你的定价演示总能转化成功！

方法	描述
设置Bootstrap	在你的HTML中包含Bootstrap CSS和JS文件
创建定价卡片	使用Bootstrap的卡片组件显示定价层级
响应式网格	利用Bootstrap的网格系统进行响应式布局
自定义样式	添加自定义CSS以增强Bootstrap的默认样式
交互性	使用JavaScript添加悬停效果和动画
响应式设计	确保布局调整以适应不同的屏幕尺寸

Credits: Image by storyset