我是使用bootstrap 3并尝试实现此功能的新手。但我还没到那儿。 我希望在导航栏中显示下拉列表,如here所示。但这是针对bootstrap 2. *并且在bootstrap 3中不起作用。
我目前的尝试:
<!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="✓" /><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>
它不像上面那样;
如何解决这个问题。或任何与bootstrap 3一起使用的代码片段的链接都不错 感谢
答案 0 :(得分:2)
我基于bootstrap 3下拉组件构建了它:http://jsfiddle.net/a2ENF/1/
评论后编辑
<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>
答案 1 :(得分:0)
您可以尝试使用此代码,它可以正常运行:
<!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>
答案 2 :(得分:0)
以下代码在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>