Belajar Bootstrap Untuk Pemula
Selasa, 13 November 2018
Tulis Komentar
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 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
<!DOCTYPE html><html><head> <title>https://www.nubychan.space</title> <meta charset="utf-8"> <meta name="viewport" content="widht-device-widht,initial-scale=1"><link rel="stylesheet" type="text/css" href="style1.css"></head><body><div class="container"><section class="login-box"><h2> Login Aplikasi</h2><form method="post" action="file.php"><input type="text" id="username" placeholder="Username"><br><input type="password" id="password" placeholder="Password"><br><input type="submit" value="Login"></form></section></div></body></html>
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
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 ContainerDan 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
<html>
<head><title>https://www.nubychan.space</title>
<link rel="stylesheet" type="text/css" href="1/css/bootstrap.min.css">
<style type="text/css">
body{
text-decoration: none;
text-align: left;
}
</style>
</head>
<body>
<center>
<FORM ACTION="#" METHOD="POST" NAME="input">
<div class="container">
<div class="form-group">
<div class="col-lg-5" style="margin-top: 10%"></dir>
<div class="card">
<div class="card-header">
<h2>Login Aplikasi</h2>
</div>
<div class="card-body">
<div class="alert alert-info">Welcome...</div>
<input type="text" class="form-control" name="username" placeholder="Masukkan Username..."><br>
<input type="password" class="form-control" name="password" placeholder="Masukkan Password"><br>
<button class="btn btn-info btn-block" name="Login" value="Login">Login</button>
</div>
</FORM>
</center>
</body>
</html>
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
Belum ada Komentar untuk "Belajar Bootstrap Untuk Pemula "
Posting Komentar