Nusagatech

Cara Membuat Halaman Login Menggunakan Bootstrap

Tutorial Bootstrap

Sebagai developer web, kita tentu pernah membuat halaman login untuk membolehkan pengguna mengakses fitur tertentu dalam aplikasi. Sejak diluncurkannya bootstrap, tugas seorang desainer web lebih ringan dalam membuat tampilan web yang enak dipandang. Dengan menggunakan bootstrap, kita tidak perlu lagi membuat style (css) sendiri. Tinggal menggunakan style yang sudah disediakan oleh bootstrap.

Merancang Desain Menggunakan Bootstrap

Untuk dapat menggunakan boostrap, kita perlu menyematkan (embed) bootstrap terlebih dahulu. Contohnya sebagai berikut:

Kode di atas diletakkan di dalam kode head sebuah dokumen HTML.

Merancang Tampilan Login

Kode html yang digunakan untuk membuat tampilan login menggunakan bootstrap adalah di bawah ini:

Simpan kode htmldi atas pada sebuah file dengan nama login.html.

Kode CSS atau style yang digunakan untuk mempercantik tampilan halaman login diatas adalah sebagai berikut.

Simpan kode css di atas padasebuah file dengan nama style.css. File style.css ini nanti akan diembed ke login.html.

Kode HTML LengkapHalaman Login

Kode lengkap pembuatan halaman login di atas adalah seperti di bawah ini:

Demo Halaman Login

Kata Kunci

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: nusagates@gmail.com. Hubungi via 0822 2500 5825

Tanggapan Kamu?

Back to top button
Close