Dropdown login menu in navbar in bootstrap 3?

StackOverflow https://stackoverflow.com/questions/23120942

Pregunta

I am new to using bootstrap 3 and experimenting to get this work. but I am not there quite yet. I want to have dropdown log-in in navbar as shown here. but this is for bootstrap 2.* and does not work in bootstrap 3.

My current attempt here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SiteTitle</title>
    <meta name"viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</script>
<script>
$(document).ready(function()
{
  //Handles menu drop down
  $('.dropdown-menu').find('form').click(function (e) {
        e.stopPropagation();
        });
  });
</script>
    <style>
      .navbar .nav > li > .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.navbar .nav > li > .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}
    </style>

</head>

<body>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" id="register" data-toggle="dropdown">Login <b class="caret"></b></a>
            <div class="dropdown-menu" style="width: 400px">
                <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div>
                 <fieldset class='textbox' style="padding:10px">
                   <input style="margin-top: 8px" type="text" placeholder="Username" />
                   <input style="margin-top: 8px" type="password" placeholder="Passsword" />
                   <input class="btn-primary" name="commit" type="submit" value="Log In" />
                 </fieldset>
               </form>
            </div> <!-- /dropdown-menu -->
        </li> <!-- /dropdown -->
        <!--(here goes another dropdown)-->
    </ul>
</div><!-- /navbar-collapse -->

</body>
</html>

It isn't like what is above;

enter image description here

How to fix this. or any link to code snippet that works with bootstrap 3 would be nice Thanks

¿Fue útil?

Solución

I built it back, based on bootstrap 3 drop-down component : http://jsfiddle.net/a2ENF/1/

EDIT AFTER COMMENT

 <div class="navbar-collapse collapse">
    <div class="navbar-right">
        <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                Login <span class="caret"></span>
            </button>
            <div class="dropdown-menu" >
                <div class="col-sm-12">
                    <div class="col-sm-12">
                        Login
                    </div>
                    <div class="col-sm-12">
                        <input type="text" placeholder="Uname or Email" onclick="return false;" class="form-control input-sm" id="inputError" />
                    </div>
                    <br/>
                    <div class="col-sm-12">
                        <input type="password" placeholder="Password" class="form-control input-sm" name="password" id="Password1" />
                    </div>
                    <div class="col-sm-12">
                        <button type="submit" class="btn btn-success btn-sm">Sign in</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Otros consejos

You can try this code, it works fine:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="tutorial-boostrap-merubaha-warna">
	<meta name="author" content="ilmu-detil.blogspot.com">
	<title>Tutorial Boostrap : Form Login </title>
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<script src="assets/js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
	<script  src="assets/js/bootstrap.min.js"></script>
	<style type="text/css">
	.navbar-default .navbar-nav > li.clr1 a{
		color:#ffffff;
	}
	.navbar-default .navbar-nav > li.clr2 a{
		color: #FFEB3B;;
	}
	.navbar-default .navbar-nav > li.clr3 a{
		color: #5EC64D;
	}
	.navbar-default .navbar-nav > li.clr4 a{
		color: #29AAE2;
	}
	.navbar-default .navbar-nav > li.clr1 a:hover, .navbar-default .navbar-nav > li.clr1.active a{
		color:#fff;
		background: #F55;
	}
	.navbar-default .navbar-nav > li.clr2 a:hover, .navbar-default .navbar-nav > li.clr2.active a{
		color: #fff;
		background:#973CB6;
	}
	.navbar-default .navbar-nav > li.clr3 a:hover, .navbar-default .navbar-nav > li.clr3.active a{
		color: #fff;
		background:#5EC64D;
	}
	.navbar-default .navbar-nav > li.clr4 a:hover, .navbar-default .navbar-nav > li.clr4.active a{
		color: #fff;
		background: #29AAE2;
	}
	.navbar-default{
		background-color: #3b5998;
		font-size:18px;
	}
	.navbar-default .navbar-brand {
		color: #ffffff;
		font-weight:bold;
	}
	.navbar-default .navbar-text {
		color:#ffffff;
    }
	a{
		color: #FFC107;
		text-decoration: none;
	}
	</style>
</head>
<body>
<div 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=".navbar-collapse">
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">
			Pusat Ilmu Secara Detil</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-left">
				<li class="clr1 active"><a href="index.html">Home</a></li>
				<li class="clr2"><a href="about.html">Programming</a></li>
				<li class="clr3"><a href="courses.html">English</a></li>
				<li class="clr4 dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
						<ul class="dropdown-menu" style="padding: 20px 10px 5px 10px; width:300px;">
							<li>
								<form>
									<div class="form-group">
										<input type="email" class="form-control" id="inputEmail" placeholder="Email">
									</div>
									<div class="form-group">
										<input type="password" class="form-control" id="inputPassword" placeholder="Password">
									</div>
									<div class="checkbox">
										<label><input type="checkbox"> Remember me</label>
									</div>
									<button type="submit" class="btn btn-primary">Login</button>
								</form>
							</li>
						</ul>
				</li>
			</ul>
		</div>
	</div>
</div>	
	<!-- /.navbar -->
<div class="navbar navbar-default navbar-fixed-bottom">
   <div class="container">
      <p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
   </div>
</div>  
</body>
</html>

Detailed Technology Center

Following code will work just fine on Bootstrap 3:

    <ul class="nav navbar-nav pull-right">
      <li class="dropdown" id="menuLogin">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">Login</a>

        <div class="dropdown-menu" style="padding:17px;">
          <form>
            <div class="form-group">
              <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>

            <div class="form-group">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>

            <div class="form-group">
              <button type="submit" class="btn btn-block btn-default">Sign in</button>
            </div>
          </form>
        </div>
      </li>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top