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
Boostrap logo.svgf
Perancang awalMark Otto, Jacob Thornton
PengembangBootstrap Core Team
Rilis perdana19 Agustus 2011; 7 tahun lalu
Rilis stabil
4.1.3 / 24 Juli 2018; 3 bulan lalu[1]
Status pengembanganActive
Ditulis denganHTMLCSSLess (v3), Sass (v4) and JavaScript
SerambiWeb engines
LisensiMIT License (Apache License 2.0 prior to 3.1.0)
Situs webhttps://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

<!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
*{
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



<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

Post a Comment

0 Comments