Bootstrap - 定價範例

定價是什麼？

在我們深入研究使用Bootstrap創建定價範例之前，讓我們花一會兒時間來了解在網頁設計和商業環境中，定價究竟意味著什麼。

Bootstrap-Pricing Demo

定價是任何產品或服務提供中的關鍵元素。這是企業向潛在客戶傳達他們產品價值的方式。在網頁設計中，定價部分或頁面是展示不同方案或套餐的地方，通常以清晰、對比格式的形式。

把它想成像餐廳的菜單一樣。你希望客戶能夠輕鬆地看到有什麼可供選擇以及相應的價格，這樣他們就可以做出知情的決定。這正是我們即將使用Bootstrap創建的！

為什麼要用Bootstrap來定價？

Bootstrap是一個強大的前端框架，它可以讓創建有響應性、專業看起來的網站變得非常容易。它對於定價部分尤其有用，因為：

它提供了專為顯示定價信息而設計的預設組件。
它出廠即具有響應性，意味著你的定價部分將在所有設備上都有出色的顯示效果。
它是可定製的，讓你可以匹配品牌的外觀和感覺。

現在，讓我們捋起袖子開始建立我們的定價範例！

設置Bootstrap環境

首先，我們需要設置Bootstrap環境。別擔心這聽起來很複雜——其實非常簡單！

創建一個新的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>
<!-- 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結構並包含了Bootstrap的CSS和JavaScript文件從CDN（內容分發網絡）中。這就像為我們的房子打好基礎——現在我們準備開始建造！

創建定價部分

現在，讓我們創建我們的定價部分。我們將使用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