Belajar Bootstrap Untuk Pemula

Sebelum Memasuki Materi Saya Akan Menjelaskan Apa Itu Bootstrap

Bootstrap adalah open-source framework (kerangka kerja pemrograman) front-end (library) yang bebas (gratis) untuk merancang situs web dan aplikasi web. Framework ini berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Tidak seperti kebanyakan framework web lainnya, framework ini hanya fokus pada pengembangan front-end saja.

Bootstrap

f
Perancang awal	Mark Otto, Jacob Thornton
Pengembang	Bootstrap Core Team
Rilis perdana	19 Agustus 2011; 7 tahun lalu
Rilis stabil	4.1.3 / 24 Juli 2018; 3 bulan lalu[1]
Status pengembangan	Active
Ditulis dengan	HTML, CSS, Less (v3), Sass (v4) and JavaScript
Serambi	Web engines
Lisensi	MIT License (Apache License 2.0 prior to 3.1.0)
Situs web	https://getbootstrap.com/

Bootstrap adalah proyek yang paling banyak dibintangi kedua di GitHub, dengan lebih dari 126.000 bintang.^[2]

Apa Perbedaan Bootstrap Dengan CSS? 

Nyatanya Bootstrap Itu Lebih Simple Di Bandingkan Dengan CSS Tanpa Harus Coding Lama Dan Sebagainya 

Contoh CSS 

Kita Harus Memulainya Dengan Memanggil File Dengan File.css nahh tetapi ia Masih harus ngoding gan.. beda bootstrap yang bersifat framework...

Saya Mempunya Code Berikut Disini Saya Akan Membedakan CSS Dengan Bootstrap

Contoh Css Kita Akan Membuat Form Login Dengan Html Dan CSS

Contoh Form Login Yang Tidak Menggunakan CSS

Login Aplikasi

Maka Tampilannya Sebelum Di Berikan CSS Seperti Berikut

Jika Di Tambah Style Css Nya Untuk Memperbagus Tampilan Web Kita.. Masa Web Yang Kita Buat Jelek Sihh Nanti Tidak Enak Di Lihat Oleh Pengungjung Web Kita..

Contoh Form Login Yang TidakMenggunakan CSS

*{

box-sizing: border-box;

}

/* Mengatur Font Yang Di Pakai Background */

body{

font-family: arial;

margin: 0;

background: #048ade;

}

/* Membuat Container Menjadi Layout Flexbox Dan Kotak Login Di Tengah */

.container{

display:flex;

flex-wrap: wrap;

justify-content: center;

}

/* Mengatur Kotak Form Login Lebar 400px Dan Background Putih */

.login-box{

margin-top: 170px;

flex-basis: 400px;

background: #fff;

padding: 20px;

}

/* Mengatur Judul Form Dengan Border Bawah Dan Posisi Di Tengah */

.login-box h2{

border-bottom: 1px solid #ccc;

color: #555;

text-align: center;

padding-bottom: 15px;

margin: 0 0 20px;

}

/* Mengatur Agar Tag Input Dan Select Memenuhi Container 

Dan Tampilan Lebih Bagus */

input, select{

width: 100%;

padding: 15px 20px;

margin: 8px 0;

border: 1px solid #ccc;

}

/* Mengatur Tampilan Tombol Submit */

input[type=submit]{

background-color: #038ade;

border: none;

text-decoration: none;

color: #fff;

cursor: pointer;

}

Maka Tampilannya Seperti Berikut..
Jika Di Tambahkan Style css nya pada form login yang Anda buat

 Bedanya Dengan Bootstrap Yaitu Bisaa Di Bilang Bootstrap itu lebih simple Apalagi Untuk Pemula.. Bagi Anda Yang Ingin Menjadi Web Develover .. Anda Harus Belajar Bootstrap ini.. Karena Ini Lebih mudah dan codenya pun gk perlu di tulis lagi seperti style css di atass

disini saya akan membuat form login di bootstrap .. jadi gini kita akan membedakan css dan bootstrap istilahnya bukan membedakan lah ya.. kaya melihat mana yang lebih simple

Contoh Form Login Menggunakan Bootstrap

   

   

Login Aplikasi

 

 

Welcome...

 

Maka Tampilannya Akan Seperti Berikut

Bisa Kalian Lihat .. Bootstrap Lebih Simple Kan? Tanpa Harus Ngoding Lama ..
Intinya Kalian Harus Mempunya File Bootstrap Nya ... Kalau Kalian Belum Mempunyai File

Download  Disini

Jika Melihat Full Nya Kalian Bisa Lihat Di Web Resmi Nya https://getbootstrap.com


Sekian Dari Saya Semoga Bermanfat Dan Jangan Lupa Kami Akan Mengeluarkan Tutorial Terbaru