Bootstrap - Sign In Demo

Overview

Halo teman-teman pengembang web yang sedang berkembang! Hari ini, kita akan memulai perjalanan yang menarik untuk membuat halaman sign-in yang indah dan berfungsi menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya disini untuk mengarahkan Anda melalui proses ini langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Pada akhir panduan ini, Anda akan memiliki halaman sign-in yang terlihat profesional dan Anda bisa banggakan!

Bootstrap-Sign In Demo

Apa Itu Bootstrap?

Sebelum kita masuk ke kode, mari bicarakan tentang 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. Ini adalah kerangka CSS yang bebas dan open-source yang membantu kita membuat website yang 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 pribadi menyukai Visual Studio Code, tapi Notepad cukup baik untuk pemula), dan buat file baru bernama index.html. Ini akan menjadi dasar halaman sign-in kita.

<!DOCTYPE html>
<html lang="id">
<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. Picturing ini sebagai kerangka halaman web kita. Bagian <head> adalah tempat kita menempatkan informasi tentang halaman kita, dan <body> adalah tempat semua konten yang terlihat akan diletakkan.

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 menautkan 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 diletakkan di sini -->
</form>
</div>
</div>
</div>
</body>

mariuraikan ini:

container: Kelas Bootstrap ini membuat wadah lebar tetap responsif.
mt-5: Menambahkan margin ke atas (picturing ini seperti mendorong segala sesuatu ke bawah sedikit).
row dan col-md-6: Ini membuat kolom yang diperhitungkan di tengah yang setengah lebar pada layar berukuran 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 yang dilakukan setiap bagian:

mb-3: Menambahkan margin ke bawah setiap div untuk memberikan jarak.
form-label: Meng gayakan label untuk input kita.
form-control: Meng gayakan input kita agar terlihat rapi dan konsisten.
form-check dan form-check-input: Meng gayakan checkbox dan tombol radio.
btn btn-primary: Membuat tombol yang terlihat bagus dengan warna utama.

Menambahkan Gaya

Mari kita membuat halaman sign-in kita terlihat lebih baik dengan beberapa CSS khusus. 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 memberikan warna biru ke judul untuk mencocokkan tema Bootstrap.

Penyetelan Akhir: Desain Responsif

Salah satu hal yang menarik tentang Bootstrap adalah bahwa itu responsif secara default. Ini berarti halaman sign-in kita akan terlihat bagus baik di desktop maupun perangkat mobile. Namun, mari kita tambahkan one more 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, di perangkat kecil, form akan mengambil 8 kolom, dan di perangkat ekstra kecil, form akan mengambil 10 kolom, memastikan bahwa itu selalu mudah dibaca dan digunakan.

Konklusi

Dan begitulah! Anda telah menciptakan 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 horizontal
col-*	Menentukan lebar kolom untuk berbagai ukuran layar
form-control	Meng gayakan input form
form-label	Meng gayakan label form
form-check	Meng gayakan checkbox dan tombol radio
btn	Membuat tombol
btn-primary	Meng gayakan tombol dengan warna utama
mt-*	Menambahkan margin ke atas
mb-*	Menambahkan margin ke bawah

Ingat, pengembangan web adalah tentang praktik 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!

Selamat coding, para ahli web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:

Demo Album Bootstrap

Tutorial Selanjutnya:

Demo Penentuan Harga Bootstrap