Belajar Bootstrap – Dropdown Login Form

Belajar Bootstrap – Dropdown Login Form

Belajar Bootstrap – Dropdown Login Form

6 Comments on Belajar Bootstrap – Dropdown Login Form

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 :

Download

 

About the author:

~

Related Posts

6 Comments

  1. Toffan Setyawan  - July 7, 2015 - 11:31 am
    Reply /

    Keren paak website nya

    • chephz  - July 8, 2015 - 2:06 am
      Reply /

      bisa aja nih pak

  2. Cilla  - September 18, 2015 - 11:56 am
    Reply /

    Sangat membantu sekali 🙂

    • chephz  - November 2, 2015 - 1:02 pm
      Reply /

      Senang bisa membantu 🙂

  3. faris  - January 14, 2016 - 7:12 pm
    Reply /

    link downloadnya kena internet positif pak 🙁 ada link lainnya?

Leave a comment

Back to Top