Bootstrap - Panduan Harga Demo
Apa Itu Harga?
Sebelum kita membanjiri membuat demo harga menggunakan Bootstrap, mari kitaambil sedikit waktu untuk memahami apa arti harga dalam konteks desain web dan bisnis.
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 harga adalah tempat Anda memperlihatkan rencana atau paket yang berbeda, biasanya dalam format perbandingan yang jelas.
Pertimbangkan ini seperti menu di restoran. Anda ingin pelanggan mudah melihat apa saja yang tersedia dan biayanya, sehingga mereka dapat membuat keputusan yang informatif. Itu persis apa yang kita akan buat dengan Bootstrap!
Mengapa Menggunakan Bootstrap untuk Harga?
Bootstrap adalah kerangka front-end yang kuat yang membuat menciptakan website responsif dan profesional mudah. Ini sangat berguna untuk bagian harga karena:
- Itu menawarkan komponen yang terdesain sebelumnya yang sempurna untuk menampilkan informasi harga.
- Itu responsif sejak awal, artinya bagian harga Anda akan terlihat bagus pada semua perangkat.
- Itu dapat diubahsuai, memungkinkan Anda menyesuaikan tampilan merek Anda.
Sekarang, mari kita lipat lengan dan mulai membuat demo harga kita!
Menyiapkan Lingkungan Bootstrap
Pertama-tama, kita perlu mengatur lingkungan Bootstrap kita. Jangan khawatir jika ini terdengar sulit – sebenarnya sangat mudah!
Buat file HTML baru dan salin kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Panduan Harga Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten Anda akan masuk 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 menyiapkan fondasi untuk rumah kita – sekarang kita siap membangun!
Membuat Bagian Harga
Sekarang, mari kita buat bagian harga kita. Kita akan menggunakan komponen kartu Bootstrap untuk membuat tiga tingkat harga: Basic, Pro, dan Enterprise.
Tambahkan kode berikut di dalam tag <body>:
<div class="container py-5">
<h1 class="text-center mb-5">Rencana 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">$0<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 wadah untuk memusatkan konten kita dan menambahkan sedikit padding.
- Klas
rowdancolmembuat sistem grid responsif. - Setiap tingkat harga dipresentasikan oleh komponen
card. - Kita menggunakan kelas utilitas Bootstrap seperti
text-center,mb-4, dll., untuk menyiapkan elemen kita tanpa menulis CSS khusus.
Menyesuaikan Penampilan
Bootstrap sangat bagus sejak awal, tapi mari kita tambahkan beberapa sentuhan khusus untuk membuat demo harga kita tampak!
Tambahkan tag <style> ini di dalam 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 yang terang ke header kartu
- Mengubah warna tombol saat diarahkan
Menambah Interaktivitas
Mari kita tambahkan sedikit interaktivitas ke demo harga kita. Kita akan membuat kartu "Pro" tampak menonjol saat diarahkan.
Tambahkan JavaScript ini di akhir tag <body> Anda:
<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 sedikit kartu "Pro" saat tetikus mengarah kepadanya, menciptakan efek yang halus dan menarik.
Desain Responsif
Salah satu hal terbaik tentang Bootstrap adalah responsifitas bawaannya. Demo 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 secara vertikal, sedangkan pada layar medium dan lebih besar, mereka ditampilkan dalam tiga kolom.
Kesimpulan
Selamat! Anda telah menciptakan demo harga yang profesional menggunakan Bootstrap. Mari kita rangkum apa yang kita pelajari:
- Kita mengatur lingkungan Bootstrap.
- Kita membuat bagian harga responsif menggunakan grid dan komponen kartu Bootstrap.
- Kita menyesuaikan penampilan dengan CSS sederhana.
- Kita menambahkan interaktivitas dengan JavaScript.
- Kita memastikan desain kita responsif dan terlihat bagus pada semua perangkat.
Ingat, latihan membuat Anda mahir. Cobalah memodifikasi demo ini – ubah warna, tambahkan tingkat harga lain, atau termasuk fitur yang berbeda. Semakin Anda bermain dengan Bootstrap, semakin Anda akan merasakan kenyamanannya.
Selamat coding, dan may demo harga Anda selalu menghasilkan konversi!
Credits: Image by storyset