Bootstrap - Sign In Demo

Overview

Hai there, para web developer yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik untuk membuat halaman sign-in yang indah dan fungsional menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda langkah demi langkah dalam proses ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkat per tingkat. Pada akhir panduan ini, Anda akan memiliki halaman sign-in yang profesional dan Anda bisa bangga dengannya!

Bootstrap-Sign In Demo

Apa Itu Bootstrap?

Sebelum kita masuk ke kode, mari bicarakan Bootstrap. Bayangkan Anda membangun sebuah rumah. Anda bisa membuat setiap batu dari awal, atau Anda bisa menggunakan material yang sudah jadi untuk mempercepat proses. Bootstrap adalah seperti material yang sudah jadi untuk pengembangan web. Itu adalah kerangka CSS yang gratis dan open-source yang membantu kita membuat website responsif dan mobile-first secara cepat dan mudah.

Menyiapkan Proyek Kita

Langkah 1: Buat File HTML

Pertama-tama, mari kita buat file HTML kita. Buka editor teks favorit Anda (saya secara pribadi menyukai Visual Studio Code, tapi Notepad cukup bagus untuk pemula), dan buat file baru bernama index.html. Ini akan menjadi dasar halaman sign-in kita.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sign In Demo</title>
</head>
<body>

</body>
</html>

Ini adalah struktur HTML dasar kita. P想象kannya sebagai kerangka halaman web kita. Bagian <head> adalah tempat kita meletakkan informasi tentang halaman kita, dan <body> adalah tempat semua konten yang terlihat akan masuk.

Langkah 2: Sertakan Bootstrap

Sekarang, mari kita tambahkan beberapa otot ke kerangkanya dengan menyertakan Bootstrap. Kita akan melakukan ini dengan menambahkan beberapa tautan di bagian <head> file HTML kita:

<head>
<!-- ... kode sebelumnya ... -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

Baris ini seperti memberikan halaman web kita kostum superhero. Mereka menghubungkan ke file CSS dan JavaScript Bootstrap, yang akan memberikan kita akses ke semua komponen dan gaya yang sudah dibuat sebelumnya.

Membuat Form Sign-In

Langkah 1: Struktur Form Dasar

Mari kita mulai membangun form sign-in kita. Tambahkan kode berikut di dalam tag <body>:

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Sign In</h2>
<!-- Field form akan dimasukkan di sini -->
</form>
</div>
</div>
</div>
</body>

mariuraikan ini:

container: Kelas Bootstrap ini membuat wadah lebar tetap responsif.
mt-5: Menambahkan margin ke atas (pikirkan itu seperti mendorong segala sesuatu ke bawah sedikit).
row dan col-md-6: Membuat kolom yang terpusat yang setengah lebar pada layar medium dan yang lebih besar.

Langkah 2: Menambahkan Field Form

Sekarang, mari kita tambahkan field form kita. Ganti komentar di dalam form dengan:

<div class="mb-3">
<label for="email" class="form-label">Alamat Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Kata Sandi</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Sign In</button>

Ini apa gunanya setiap bagian:

mb-3: Menambahkan margin ke bawah setiap div untuk memberikan ruang.
form-label: Menyusun label untuk input kita.
form-control: Mengbuat input kita terlihat rapi dan konsisten.
form-check dan form-check-input: Menyusun checkbox.
btn btn-primary: Membuat tombol yang terlihat bagus.
mt-*: Menambahkan margin ke atas.
mb-*: Menambahkan margin ke bawah.

Menambahkan Gaya

Marilah kita membuat halaman sign-in kita terlihat lebih baik dengan sedikit gaya CSS. Tambahkan ini ke bagian <head>:

<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>

CSS ini memberikan halaman kita background abu-abu terang, menambahkan wadah putih dengan bayangan halus untuk form kita, dan mencolorkan judul biru untuk mencocokkan tema Bootstrap.

Sentuhan Akhir: Desain Responsif

Salah satu hal yang bagus tentang Bootstrap adalah bahwa itu responsif secara default. Ini artinya halaman sign-in kita akan terlihat bagus baik di desktop maupun perangkat mobile. Namun, mari kita tambahkan salah satu penyesuaian untuk membuatnya sempurna:

<div class="col-md-6 col-sm-8 col-10">

Ganti col-md-6 di dalam kontainer form Anda dengan baris ini. Sekarang, pada perangkat kecil, form akan mengambil 8 kolom, dan pada perangkat ekstra kecil, itu akan mengambil 10 kolom, memastikan itu selalu mudah dibaca dan digunakan.

Konklusi

Dan itu dia! Anda telah membuat halaman sign-in yang indah dan responsif menggunakan Bootstrap. Berikut adalah tabel yang menggabungkan kelas Bootstrap utama yang kita gunakan:

Kelas	Tujuan
container	Membuat wadah lebar tetap responsif
row	Membuat grup kolom horisontal
col-*	Menentukan lebar kolom untuk ukuran layar yang berbeda
form-control	Menggunakan gaya form input
form-label	Menggunakan gaya form label
form-check	Menggunakan gaya checkbox dan tombol radio
btn	Membuat tombol
btn-primary	Menggunakan gaya tombol warna utama
mt-*	Menambahkan margin ke atas
mb-*	Menambahkan margin ke bawah

Ingat, pengembangan web adalah tentang latihan dan kreativitas. Jangan takut untuk mencoba warna, tata letak, dan komponen Bootstrap yang berbeda. Siapa tahu? Proyek berikutnya Anda mungkin menjadi hal yang besar di internet!

Happy coding, para web wizard masa depan!

Credits: Image by storyset