contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Form Login Responsive Dengan Bootstrap

Posted in Tutorial Bootstrap Life at 29 Mei 2017 With 0 Comments

Kali ini admin akan menjelaskan cara membuat form login responsive dengan modal  Bootstrap, Untuk membuat form login dengan modal bootstrap tentunya sahabat suckittrees.com sudah tau, apa saja yang dibutuhkan,, haha... ya.. text editor.. disiapkan dulu ya... Bootstrap memang memiliki banyak kelebihan dalam mendesain sebuah website, termasuk form nya.. pada framework bootstrap memang sudah disiapkan class untuk membuat bentuk yang responsiv agar respon jika diakses pada perangkat yang berbeda.. oya sebelumnya admin sudah menjelaskan Membuat Form Responsive dengan Bootstrap

Berikut ini gambar Form Login Dengan Bootstrap

▼ Download Source Code Dibawah Ini ▼


membuat form login di modal bootstrap

Membuat Form Login Responsive dengan Modal Bootstrap

Berikut contoh code yang digunakan untuk membuat Form login responsive dengan bootstrap :

Berikut code HTML :

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#login-modal">Masuk</a>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
       <div class="modal-dialog">
    <div class="loginmodal-container">
     <h1>Silahkan Masuk</h1><br>
      <form>
     <input type="text" name="user" placeholder="Username">
     <input type="password" name="pass" placeholder="Password">
     <input type="submit" name="login" class="login loginmodal-submit" value="Login">
      </form>
     
      <div class="login-help">
     <a href="#">Register</a> - <a href="#">Forgot Password</a>
      </div>
    </div>
   </div>
    </div>

nah setelah itu salin juga sintaks css di bawah ini agar tampilan form login nya semakin greget dan cantik tentunya

@import url(http://fonts.googleapis.com/css?family=Roboto);

/****** LOGIN MODAL ******/
.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: roboto;
}

.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: roboto;
}

.loginmodal-container input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.loginmodal-container input[type=text], input[type=password] {
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  padding: 17px 0px;
  font-family: roboto;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
} 

.login-help{
  font-size: 12px;
}

Eits... Jangan lupa panggil Bootstrap jika anda tidak ada offline file bootstrapnya.. note.. Harus terkoneksi internet ya dalam menjalankannya , berikut codenya, tempatkan pada bagian paling atas / diatas code </head> :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Artikel Terkait

Diskusi