Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Cover Demo

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan masuk ke dunia yang menarik Bootstrap dan menjelajahi komponen yang indah yang disebut "Cover." Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk menghidahkan Anda dalam perjalanan ini. Jadi, ambil minuman kesukaan Anda, duduk dengan nyaman, dan mari kita mulai petualangan coding ini bersama!

Bootstrap-Cover Demo

Apa Itu Cover?

Sebelum kita masuk ke kode, mari kita pahami apa arti "cover" dalam konteks desain web. Sebuah cover, biasanya disebut sebagai "hero section" atau "jumbotron," adalah area besar dan menarik di bagian atas halaman web. Itu seperti cover buku – dirancang untuk menarik perhatian dan memberikan pengunjung gambaran cepat apa yang tentang situs Anda.

Bayangkan Anda masuk ke restoran mewah. Hal pertama yang Anda lihat adalah pintu masuk yang indah yang menentukan nuansa pengalaman makan Anda. Itu persis apa yang cover lakukan untuk situs Anda!

Menyiapkan Proyek Kami

Untuk memulai, kita perlu mengatur proyek kita dengan Bootstrap. Jangan khawatir jika Anda belum pernah melakukan ini sebelumnya – saya akan mengarahkan Anda melalui setiap langkah!

Langkah 1: Buat Struktur HTML

Pertama, mari kita buat file HTML dasar:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Cover Saya yang Menakjubkan</title>
<!-- Kita akan menambahkan Bootstrap CSS di sini -->
</head>
<body>
<!-- Cover kita akan berada di sini -->
</body>
</html>

Ini seperti menyiapkan kanvas kosong sebelum kita mulai menggambar. Kita telah membuat dokumen HTML kosong dengan bagian kepala dan tubuh.

Langkah 2: Tambahkan Bootstrap CSS

Sekarang, mari kita menambahkan keajaiban Bootstrap! Tambahkan baris ini di dalam seksi <head>:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Baris ini menghubungkan ke file CSS Bootstrap. Itu seperti memberikan halaman web kita pakaian mewah untuk dipilih!

Membuat Cover

Sekarang kita memiliki dasar, mari kita bangun cover kita!

Langkah 3: Tambahkan Struktur Cover

Dalam tag <body>, tambahkan kode berikut:

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Beranda</a>
<a class="nav-link" href="#">Fitur</a>
<a class="nav-link" href="#">Kontak</a>
</nav>
</div>
</header>

<main class="px-3">
<h1>Cover halaman Anda.</h1>
<p class="lead">Cover adalah template satu halaman untuk membuat halaman utama sederhana dan indah. Unduh, sunting teks, dan tambahkan foto latar penuh Anda sendiri untuk membuatnya menjadi milik Anda.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Pelajari lebih lanjut</a>
</p>
</main>

<footer class="mt-auto text-white-50">
<p>Template cover untuk <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, oleh <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>

Wah, itu banyak kode! Mari kita pecahkan ini:

  1. Outer <div> membuat wadah fleksibel untuk cover kita.
  2. Dalamnya, kita memiliki tiga seksi utama: <header>, <main>, dan <footer>.
  3. <header> mengandung judul dan tautan navigasi.
  4. Seksi <main> memiliki konten utama - judul, deskripsi, dan tombol.
  5. <footer> menyediakan beberapa kredit (yang Anda dapat kustomisasi).

Langkah 4: Tambahkan CSS Khusus

Untuk membuat cover kita terlihat lebih baik, mari kita tambahkan sedikit CSS khusus. Dalam seksi <head>, tambahkan:

<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>

CSS ini melakukan beberapa hal:

  • Mengatur panjang maksimum untuk cover-container.
  • Memberikan latar belakang gelap dan teks putih kepada tubuh.
  • Menambahkan bayangan halus untuk memberikan kedalaman.
  • Mengganti gaya tautan navigasi.

Menggabungkan Semua

Sekarang kita memiliki semua bagian, mari kita lihat cover indah kita dalam aksi! Ini adalah kode lengkap:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Cover Saya yang Menakjubkan</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Beranda</a>
<a class="nav-link" href="#">Fitur</a>
<a class="nav-link" href="#">Kontak</a>
</nav>
</div>
</header>

<main class="px-3">
<h1>Cover halaman Anda.</h1>
<p class="lead">Cover adalah template satu halaman untuk membuat halaman utama sederhana dan indah. Unduh, sunting teks, dan tambahkan foto latar penuh Anda sendiri untuk membuatnya menjadi milik Anda.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Pelajari lebih lanjut</a>
</p>
</main>

<footer class="mt-auto text-white-50">
<p>Template cover untuk <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, oleh <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>

Kesimpulan

Selamat! Anda telah membuat halaman cover Bootstrap pertama Anda. Apakah ini menakjubkan bagaimana beberapa baris HTML dan CSS dapat menciptakan desain yang profesional terlihat?

Ingat, ini hanya awal. Jangan ragu untuk mencoba warna yang berbeda, menambahkan konten Anda sendiri, atau bahkan mencakup gambar latar penuh untuk membuatnya menjadi milik Anda. Dunia pengembangan web penuh dengan kemungkinan, dan Anda baru saja mengambil langkah pertama ke dalam petualangan ini!

Jaga terus berlatih, tetap curiga, dan terutama, bersenang-senang dalam coding! Sampaijumpa lagi, selamat desain web!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Produk Bootstrap
Tutorial Seterusnya:
Demo Dashboard Bootstrap