Tutorial Membuat Form Login Modal Dengan Bootstrap - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Tutorial Membuat Form Login Modal Dengan Bootstrap, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Bootstrap, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Tutorial Membuat Form Login Modal Dengan Bootstrap
link : Tutorial Membuat Form Login Modal Dengan Bootstrap

Tutorial Membuat Form Login Modal Dengan Bootstrap

Juragan Coding - Cara membuat form login popup dengan twitter bootstrap
wah ketemu lagi nih bersama juragan coding yang setia memberikan artikel dan tutorial bagi teman-teman semua dan kali ini juragan coding akan meyuguhkan tutorial mengenai cara membuat form login dengan bootstrap yang tentunya responsive dong hehehe, langsung saja teman-teman silahkan salin sintaks di bawah ini dan tempatkan di body html teman-teman, dan jangan lupa untuk membuat markup html nya serta load juga css dan javascript bootstrap nya

 <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;
} 

Nah jika teman-teman melakukan nya sesuai step-step di atas maka teman-teman akan menghasilkan tampilan seperti di bawah ini

nah mungkin sekian tutorial mengenai Tutorial Membuat Form Login Dengan Bootstrap, semoga tutorial ini bermanfaat dan share ya hehehe

Demikianlah Artikel Tutorial Membuat Form Login Modal Dengan Bootstrap

Sekianlah artikel Tutorial Membuat Form Login Modal Dengan Bootstrap kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Tutorial Membuat Form Login Modal Dengan Bootstrap dengan alamat link http://jendeladuniainternet.blogspot.com/2015/11/tutorial-membuat-form-login-modal.html

Tweet