Question

我不确定这是否适用于3.0，但这是我的追随者：http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

我在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>

浏览解决方案后，我发现了一篇与此相关的旧帖子，但我不知道这两行代码在哪里：

<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>

这是我的第一个网站，我很感激帮助。我知道rails有coffescript但是我从来没有使用它的教程。谢谢！

Answer 1

在您的application.html.erb文件中，您可以将脚本元素放在头部。

<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>

然而，javascript通常写在app / assets / javascript目录中，然后使用此代码导入＆lt;％= stylesheet_link_tag“application”，：media =＆gt; “所有”％＆gt;在application.html.erb文件的head标签中。

修改

<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>

我尝试使用这两个js文件，他们为我工作，来自谷歌的jquery和来自Bootstrap CDN的整个bootstrap javascript文件。

要让“InYourShoes”在左侧对齐，您可以使用：class =＆gt; “导航栏品牌”。

<%= link_to "InYourShoes" , '#', id: "logo", :class => "navbar-brand" %>

Dropstown登录表单为bootstrap 3.0

1 个答案: