twitter-bootstrap Bootstrap 3.0 的 DropDown 登录表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20759153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DropDown Login form for bootstrap 3.0
提问by Apprentice Programmer
I'm not sure if this works for 3.0, but this is the one im following:http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/
我不确定这是否适用于 3.0，但这是我关注的一个：http: //mifsud.me/adding-dropdown-login-form-bootstraps-navbar/
I'm using ruby on rails 4.0 and this snippet of code is my from my views/layouts/_header file
我在 rails 4.0 上使用 ruby，这段代码来自我的 views/layouts/_header 文件
<header class = "navbar navbar-fixed-top navbar-inverse ">
<div class = "navbar-inner">
<div class = "container">
<%= link_to "InYourShoes" , '#', id: "logo" %>
<nav>
<ul class = "nav navbar-nav navbar-right">
<li><%= link_to "Home", '#'%></li>
<li><%= link_to "Help", '#'%></li>
<li><%= link_to "Sign up", '#'%></li>
<li class = "dropdown">
<a class = "dropdown-toggle" href = "#" data-toggle = "dropdown"> Sign In<strong class "caret"></strong></a>
<div class="dropdown-menu" style = "padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
after browsing around for solutions i found a old post relating to this but i have no idea where to these 2 lines of code:
在浏览解决方案后，我发现了一篇与此相关的旧帖子，但我不知道这两行代码在哪里：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
and
和
<script>
$(document).ready(function()
{
//Handles menu drop down`enter code here`
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
});
</script>
This is my first website, and i appreciate the help. I know rails has coffescript but i never got around a tutorial that used it yet. Thanks!
这是我的第一个网站，感谢您的帮助。我知道 Rails 有 coffescript，但我还没有找到使用它的教程。谢谢！
采纳答案by Pierre
In your application.html.erb file you can put script elements in head.
在 application.html.erb 文件中，您可以将脚本元素放在 head 中。
<head>
<title>.....</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script>
$(document).ready(function()
{
//Handles menu drop down`enter code here`
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
});
</script>
</head>
However javascript are generally written in the app/assets/javascript directory and then imported with this code <%= stylesheet_link_tag "application", :media => "all" %> in the head tags of application.html.erb file.
然而，javascript 通常写在 app/assets/javascript 目录中，然后在 application.html.erb 文件的 head 标签中使用此代码 <%= stylesheet_link_tag "application", :media => "all" %> 导入。
EDIT:
编辑：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
I tried using these two js files instead and they worked for me, jquery from google and the whole bootstrap javascript file from Bootstrap CDN.
我尝试使用这两个 js 文件，它们对我有用，来自 google 的 jquery 和来自Bootstrap CDN的整个引导 javascript 文件。
To get "InYourShoes" to be aligned in the left you can use :class => "navbar-brand".
要使“InYourShoes”在左侧对齐，您可以使用 :class => “navbar-brand”。
<%= link_to "InYourShoes" , '#', id: "logo", :class => "navbar-brand" %>
