Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Demo Penawaran Harga

Apa Itu Penawaran Harga?

Sebelum kita memasuki pembuatan demo penawaran harga menggunakan Bootstrap, mari kitaambil sedikit waktu untuk memahami apa arti sebenarnya penawaran harga dalam kontek desain web dan bisnis.

Bootstrap-Pricing Demo

Penawaran harga adalah elemen penting dari setiap penawaran produk atau layanan. Ini adalah cara bisnis mengkomunikasikan nilai penawarannya kepada pelanggan potensial. Dalam desain web, sebuah bagian atau halaman penawaran harga adalah tempat Anda menampilkan berbagai rencana atau paket, biasanya dalam format yang jelas dan dapat dibandingkan.

Pikirkan seperti menu di restoran. Anda ingin pelanggan mudah melihat apa saja yang tersedia dan harga apa,sehingga mereka dapat membuat keputusan yang berdasarkan informasi. Itu persis apa yang kita akan buat dengan Bootstrap!

Mengapa Menggunakan Bootstrap untuk Penawaran Harga?

Bootstrap adalah kerangka front-end yang kuat yang membuat pembuatan website responsif dan profesional mudah. Ini sangat berguna untuk bagian penawaran harga karena:

  1. Itu menawarkan komponen yang terdesain sebelumnya yang sempurna untuk menampilkan informasi penawaran harga.
  2. Itu responsif secara default, berarti bagian penawaran harga Anda akan terlihat bagus pada semua perangkat.
  3. Itu dapat dikustomisasi, memungkinkan Anda menyesuaikan penampilan merek Anda.

Sekarang, mari kita lipat lengan dan mulai membuat demo penawaran harga kita!

Menyiapkan Lingkungan Bootstrap

Pertama-tama, kita perlu menyiapkan lingkungan Bootstrap kita. Jangan khawatir jika ini terdengar sulit – sebenarnya sangat mudah!

Buat file HTML baru dan salin kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Demo Penawaran Harga</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Isi Anda akan dimasukkan di sini -->

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

Ini menyiapkan struktur HTML dasar dan menyertakan file CSS dan JavaScript Bootstrap dari CDN (Content Delivery Network). Itu seperti mengatur dasar rumah kita – sekarang kita siap untuk mulai membangun!

Membuat Bagian Penawaran Harga

Sekarang, mari kita buat bagian penawaran harga kita. Kita akan menggunakan komponen kartu Bootstrap untuk membuat tiga tingkat penawaran harga: Basic, Pro, dan Enterprise.

Masukkan kode berikut di dalam tag <body>:

<div class="container py-5">
<h1 class="text-center mb-5">Rencana Penawaran Harga Kami</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">Rp0<small class="text-muted fw-light">/bln</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 pengguna termasuk</li>
<li>2 GB penyimpanan</li>
<li>Dukungan email</li>
<li>Akses pusat bantuan</li>
</ul>
<button type="button" class="w-100 btn btn-lg btn-outline-primary">Daftar gratis</button>
</div>
</div>
</div>
<!-- Ulangi struktur ini untuk rencana Pro dan Enterprise -->
</div>
</div>

mari kitauraikan ini:

  • Kita menggunakan sebuah kontainer untuk menengahkan konten kita dan menambahkan sedikit padding.
  • Klas row dan col membuat sistem grid responsif.
  • Setiap tingkat penawaran harga diwakili oleh komponen card.
  • Kita menggunakan kelas utilitas Bootstrap seperti text-center, mb-4, dll., untuk menggaya elemen kita tanpa menulis CSS khusus.

Menyesuaikan Penampilan

Bootstrap sudah bagus secara default, tetapi mari kita tambahkan beberapa sentuhan khusus untuk membuat demo penawaran harga kita tampak menarik!

Tambahkan tag <style> ini di bagian <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 khusus ini akan:

  • Menambahkan ukuran harga
  • Memberikan latar belakang terang ke header kartu
  • Mengubah warna tombol saat diarahkan

Menambah Interaktivitas

Mari kita tambahkan sedikit interaktivitas ke demo penawaran harga kita. Kita akan membuat kartu "Pro" tampak menonjol saat diarahkan.

Tambahkan JavaScript ini di akhir tag <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>

Skrip ini akan memperbesar kartu "Pro" saat tetikus mengarah kepadanya, menciptakan efek subtil tapi menarik.

Desain Responsif

Salah satu hal terbaik tentang Bootstrap adalah responsifitas bawaannya. Demo penawaran harga kita akan secara otomatis menyesuaikan untuk terlihat bagus pada semua ukuran layar. Namun, kita dapat meningkatkan ini lebih jauh.

Tambahkan kelas ini ke div row Anda:

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

Kelas g-4 menambahkan jarak antara kolom, dan row-cols-1 row-cols-md-3 memastikan bahwa pada layar kecil, kartu kita bertumpuk vertikal, sedangkan pada layar medium dan yang lebih besar, mereka ditampilkan dalam tiga kolom.

Kesimpulan

Selamat! Anda telah membuat demo penawaran harga yang profesional menggunakan Bootstrap. Mari kita ringkaskan apa yang kita pelajari:

  1. Kita menyiapkan lingkungan Bootstrap.
  2. Kita membuat bagian penawaran harga responsif menggunakan grid dan komponen kartu Bootstrap.
  3. Kita menyesuaikan penampilannya dengan CSS sederhana.
  4. Kita menambahkan interaktivitas dengan JavaScript.
  5. Kita memastikan desain kita responsif dan terlihat bagus pada semua perangkat.

Ingat, latihan membuat Anda mahir. Cobalah memodifikasi demo ini – ubah warna, tambahkan lebih banyak tingkat, atau sisipkan fitur yang berbeda. Semakin banyak Anda bermain dengan Bootstrap, semakin nyaman Anda akan menjadi dengan fiturnya yang kuat.

Selamat coding, dan semoga demo penawaran harga Anda selalu mengkonversi!

Metode Deskripsi
Menyiapkan Bootstrap Sertakan file CSS dan JS Bootstrap di HTML Anda
Membuat Kartu Penawaran Harga Gunakan komponen kartu Bootstrap untuk menampilkan tingkat penawaran harga
Grid Responsif Gunakan sistem grid Bootstrap untuk layout responsif
Styling Khusus Tambahkan CSS khusus untuk meningkatkan gaya Bootstrap
Interaktivitas Gunakan JavaScript untuk menambah efek hover dan animasi
Desain Responsif Pastikan layout Anda menyesuaikan untuk berbagai ukuran layar

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Masuk Bootstrap
Tutorial Selanjutnya:
Demo Checkout Bootstrap