Login Template Bootstrap
Login
Login adalah salah satu hal penting dalam sebuah website, terutama untuk mengelola isi suatu web yang biasanya di kelola oleh seorang adim web, banyak cara yang dapat kita gunakan dalam membangun form login.
langkah yang amat sangat muda adalah dengan menggunakan frame work css yang telah di sediakan oleh bootsrap. bootrap sendiri adalah penyedia layanan framework css yang akan mempermudah sekaligus mempercantik tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT sebuah perguruan tinggi informatika terkenal di dunia komputer.
kembali membahas tentang form login bootstrap. kalian bisa mangkonfigurasikan login template bootstrap sesuka kalian di laman resmi bootsrap bisa klik di sini
untuk kali ini kita akan membahas tentang bagaimana cara membuat login form html dan css menggunakan framework bootsrap dengan rata tengah.
jadi form login bootstrap yang akan kita buat berada di tengah tengah laman web dengan background full page seperti gambar di bawah ini
berikut ini adalah html dan css bootstrap login form
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<h1 class="kominfo">contoh login form</h1>
<div class="container">
<div class="login-form col-md-4 offset-md-4">
<h1 class="title">Login here </h1>
<p></p>
<form>
<div class="form-group">
<label for="exampleInputEmail1"> Usser Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Usser name">
</div>
<div class="form-group">
<label for="exampleInputPassword1"> Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<p></p>
<a class="btn btn-outline-primary" href="index.php" role="button">Login</a>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<style type="text/css">
body{
background-image: url(a.jpg);
background-size: cover;
}
.login-form{
margin-top: 70px;
box-shadow: 0px 0px 10px 1.5px grey;
border-radius: 5px;
padding-bottom: 20px;
background: white;
}
.title{
background: #007bbf;
padding: 10px;
text-align: center;
color: #fff;
border-radius: 0px 0px 10px 10px;
}
.kominfo{
margin-top: 40px;
text-align: center;
color: #fff;
}
</style>
trimkasih semoga login form bootstrap ini bermanfaat bagi kalian semua
untuk kali ini kita akan membahas tentang bagaimana cara membuat login form html dan css menggunakan framework bootsrap dengan rata tengah.
jadi form login bootstrap yang akan kita buat berada di tengah tengah laman web dengan background full page seperti gambar di bawah ini
 |
| login form bootstrap |
berikut ini adalah html dan css bootstrap login form
source code Template Login Bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<h1 class="kominfo">contoh login form</h1>
<div class="container">
<div class="login-form col-md-4 offset-md-4">
<h1 class="title">Login here </h1>
<p></p>
<form>
<div class="form-group">
<label for="exampleInputEmail1"> Usser Name</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter Usser name">
</div>
<div class="form-group">
<label for="exampleInputPassword1"> Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<p></p>
<a class="btn btn-outline-primary" href="index.php" role="button">Login</a>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
<style type="text/css">
body{
background-image: url(a.jpg);
background-size: cover;
}
.login-form{
margin-top: 70px;
box-shadow: 0px 0px 10px 1.5px grey;
border-radius: 5px;
padding-bottom: 20px;
background: white;
}
.title{
background: #007bbf;
padding: 10px;
text-align: center;
color: #fff;
border-radius: 0px 0px 10px 10px;
}
.kominfo{
margin-top: 40px;
text-align: center;
color: #fff;
}
</style>
trimkasih semoga login form bootstrap ini bermanfaat bagi kalian semua
No comments:
Post a Comment