Web Designer, Programmer, apalagi ya?
Melanjutkan tutorial pertama yang saya buat tentang menampilkan logo perusahaan pada menu navigasi, kali ini saya mencoba melanjutkan tutorial dengan membuat form login yang posisinya masih berada di navigasi (Navbar). Dengan masih menggunakan framework yang sama (bootstrap), kita akan menempatkan form login ini di bagian sisi kanan atas yang masih di wilayah menu navigasi.
index.html
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="bs-logo.png"></a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li ><a href="#">Home</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><span class="glyphicon glyphicon-log-in"></span> Login</a> <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;"> <form class="form-horizontal" method="post" accept-charset="UTF-8"> <input id="sp_uname" class="form-control login" type="text" name="sp_uname" placeholder="Username.." /> <input id="sp_pass" class="form-control login" type="password" name="sp_pass" placeholder="Password.."/> <input class="btn btn-primary" type="submit" name="submit" value="login" /> </form> </div> </li> </ul> </div> </div> </nav>
bootply.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
@media(min-width:768px) {
body {
padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 15px 0;
}
}
.login {
margin-bottom:5px;
}
.dropdown-menu {
width: 300px !important;
}
Tutorial ini adalah tutorial lanjutan dari tutorial pertama, jadi jika anda mungkin langsung mempraktekan copy paste code diatas akan sedikit membingungkan, tapi jika ingin melihat secara instan hasilnya, kodenya sudah saya ramu beserta file bootstrap dan JS yang diperlukan dan bisa di download pada link dibawah ini :
Bootstrap merupakan salah satu framework yang mengumpulkan kode – kode html, css dan JS dalam satu bundle. Fungsi utamanya, yaitu untuk mempermudah kita para developer untuk men-desain tampilan yang responsive. artinya, desain yang kita buat nanti akan tampil rapih ketika dibuka di laptop ataupun perangkat mobile lainnya. cara instalasinya sangat mudah, kita tinggal mengunjungi situs http://getbootstrap.com/…
6 Comments
Keren paak website nya
bisa aja nih pak
Sangat membantu sekali 🙂
Senang bisa membantu 🙂
link downloadnya kena internet positif pak 🙁 ada link lainnya?
waduh, kumpulbagi berarti sudah jadi link kotor donk ya, hehe.. link googledrive aja deh nih https://drive.google.com/file/d/0B3jAoVh_ZsPeRkJJVFdCYWR4MHc/view?usp=sharing