Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Giá cả Demo

Giá cả là gì?

Trước khi chúng ta bắt đầu tạo một demo giá cả bằng Bootstrap, hãy dành một chút thời gian để hiểu giá cả thực sự có nghĩa là gì trong bối cảnh thiết kế web và kinh doanh.

Bootstrap-Pricing Demo

Giá cả là một yếu tố quan trọng của bất kỳ sản phẩm hoặc dịch vụ nào. Đó là cách các doanh nghiệp truyền đạt giá trị của các sản phẩm hoặc dịch vụ của họ đến khách hàng tiềm năng. Trong thiết kế web, phần giá cả hoặc trang giá cả là nơi bạn trưng bày các gói hoặc kế hoạch khác nhau, thường theo một định dạng rõ ràng và so sánh.

Hãy tưởng tượng nó như một thực đơn tại một nhà hàng. Bạn muốn khách hàng dễ dàng thấy những gì có sẵn và ở mức giá nào, để họ có thể đưa ra quyết định thông minh. Đó chính xác là điều chúng ta sẽ tạo ra với Bootstrap!

Tại sao sử dụng Bootstrap cho Giá cả?

Bootstrap là một khung công tác front-end mạnh mẽ giúp tạo ra các trang web chuyên nghiệp và tương ứng một cách dễ dàng. Nó đặc biệt hữu ích cho các phần giá cả vì:

  1. Nó cung cấp các thành phần tiền thiết kế hoàn hảo để hiển thị thông tin giá cả.
  2. Nó tương ứng từ đầu, có nghĩa là phần giá cả của bạn sẽ trông tuyệt vời trên tất cả các thiết bị.
  3. Nó có thể tùy chỉnh, cho phép bạn phù hợp với diện mạo thương hiệu của bạn.

Bây giờ, hãy c rolled up our sleeves and start building our pricing demo!

Thiết lập Môi trường Bootstrap

Đầu tiên, chúng ta cần thiết lập môi trường Bootstrap. Đừng lo lắng nếu điều này听起来 phức tạp - thực ra nó rất đơn giản!

Tạo một tệp HTML mới và dán mã sau:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Pricing Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung của bạn sẽ điền vào đây -->

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

Điều này thiết lập một cấu trúc HTML cơ bản và bao gồm các tệp CSS và JavaScript của Bootstrap từ CDN (Content Delivery Network). Nó giống như đặt nền móng cho ngôi nhà của chúng ta - bây giờ chúng ta sẵn sàng bắt đầu xây dựng!

Tạo Phần Giá cả

Bây giờ, hãy tạo phần giá cả của chúng ta. Chúng ta sẽ sử dụng thành phần thẻ của Bootstrap để tạo ba cấp giá cả: Cơ bản, Pro và Doanh nghiệp.

Thêm mã sau bên trong thẻ <body>:

<div class="container py-5">
<h1 class="text-center mb-5">Our Pricing Plans</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">Basic</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
</div>
</div>
</div>
<!-- Lặp lại cấu trúc này cho các kế hoạch Pro và Doanh nghiệp -->
</div>
</div>

Hãy phân tích này:

  • Chúng ta sử dụng một container để đặt nội dung của mình vào giữa và thêm một chút padding.
  • Các lớp row và col tạo ra một hệ thống lưới tương ứng.
  • Mỗi cấp giá cả được đại diện bởi một thành phần card.
  • Chúng ta sử dụng các lớp tiện ích của Bootstrap như text-center, mb-4, v.v., để định dạng các phần tử của mình mà không cần viết CSS tùy chỉnh.

Tùy chỉnh Màu sắc

Bootstrap rất tuyệt vời từ đầu, nhưng hãy thêm một số chi tiết tùy chỉnh để làm nổi bật demo giá cả của chúng ta!

Thêm thẻ <style> này vào phần <head>:

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

CSS tùy chỉnh này sẽ:

  • Làm lớn hơn giá cả
  • Đưa nền cho tiêu đề thẻ
  • Thay đổi màu nút khi di chuột vào

Thêm Tương tác

Hãy thêm một chút tương tác vào demo giá cả của chúng ta. Chúng ta sẽ làm nổi bật kế hoạch "Pro" khi di chuột vào.

Thêm đoạn mã JavaScript này ở cuối thẻ <body>:

<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>

Đoạn mã này sẽ làm lớn hơn một chút thẻ "Pro" khi di chuột vào, tạo ra một hiệu ứng tinh tế nhưng thu hút.

Thiết kế Tương ứng

Một trong những điều tốt nhất về Bootstrap là tính tương ứng tích hợp sẵn. Demo giá cả của chúng ta sẽ tự động điều chỉnh để trông tuyệt vời trên tất cả các kích thước màn hình. Tuy nhiên, chúng ta có thể cải thiện điều này thêm.

Thêm các lớp này vào thẻ row của bạn:

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

Lớp g-4 thêm các khe hở giữa các cột của chúng ta, và row-cols-1 row-cols-md-3 đảm bảo rằng trên màn hình nhỏ, các thẻ của chúng ta sẽ xếp叠 dọc, trong khi trên màn hình trung bình và lớn hơn, chúng sẽ hiển thị trong ba cột.

Kết luận

Chúc mừng! Bạn vừa tạo ra một demo giá cả chuyên nghiệp bằng Bootstrap. Hãy tóm tắt những gì chúng ta đã học:

  1. Chúng ta thiết lập môi trường Bootstrap.
  2. Chúng ta tạo một phần giá cả tương ứng sử dụng các thành phần lưới và thẻ của Bootstrap.
  3. Chúng ta tùy chỉnh giao diện với một chút CSS đơn giản.
  4. Chúng ta thêm tương tác với JavaScript.
  5. Chúng ta đảm bảo rằng thiết kế của chúng ta tương ứng và trông tuyệt vời trên tất cả các thiết bị.

Nhớ rằng, thực hành làm nên hoàn hảo. Thử thay đổi demo này - thay đổi màu sắc, thêm nhiều cấp độ hơn, hoặc bao gồm các tính năng khác nhau. Càng chơi với Bootstrap, bạn sẽ càng thoải mái với các tính năng mạnh mẽ của nó.

Chúc mừng coding, và mong rằng các demo giá cả của bạn luôn chuyển đổi!

Phương pháp Mô tả
Thiết lập Bootstrap Bao gồm các tệp CSS và JS của Bootstrap trong HTML
Tạo Thẻ Giá cả Sử dụng thành phần thẻ của Bootstrap để hiển thị các cấp giá cả
Lưới Tương ứng Sử dụng hệ thống lưới của Bootstrap để tạo布局 tương ứng
Định dạng Tùy chỉnh Thêm CSS tùy chỉnh để cải thiện giao diện
Tương tác Sử dụng JavaScript để thêm hiệu ứng di chuột
Thiết kế Tương ứng Đảm bảo rằng giao diện điều chỉnh cho các kích thước màn hình khác nhau

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Đăng nhập Bootstrap
Hướng Dẫn Tiếp Theo:
Demo Checkout Bootstrap