Rails引导程序[关闭]

Question

好吧，我不知道我在做什么。我没有前端方面的技能。

我想使用引导程序制作一个下拉菜单。 我得到了示例代码，但菜单不起作用...... 我很确定我缺少 gem，或者某些 css 或 js 文件中缺少包含。

Rails 4.2.0

Ruby 2.2.0

应用程序.css：

 *= require_self
 *= require_tree .
 *= require flat-ui
 */

bootstrap_and_overrides.css

/*
  =require twitter-bootstrap-static/bootstrap

  Use Font Awesome icons (default)
  To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
  =require twitter-bootstrap-static/fontawesome
  */

宝石文件

gem 'sass-rails', '~> 4.0.0'
gem 'jquery-rails'
gem "twitter-bootstrap-rails"
gem 'flatui-rails'
# Turbolinks gem is commented

应用程序.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require flat-ui

application.html.erb

<div class="navbar navbar-fluid-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="ic on-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href=<%=displays_path%>>Visualizeitor</a>

      <div class="container-fluid nav-collapse">
        <ul class="nav">

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>


          <li><%= link_to "majors", majors_path  %></li>
          <li><%= link_to "students", students_path  %></li>
          <li><%= link_to "courses", courses_path  %></li>
          <li><%= link_to "teachers", teachers_path  %></li>
          <li><%= link_to "students", students_path  %></li>

        </ul>
        <ul class="nav pull-right">
          <% if teacher_signed_in? %>
          <li><%= link_to 'Edit profile', edit_teacher_registration_path, :class => 'navbar-link' %></li>
          <li><%= link_to "Logout", destroy_teacher_session_path, method: :delete, :class => 'navbar-link'  %></li>
          <% elsif student_signed_in? %>
          <li><%= link_to 'Edit profile', edit_student_registration_path, :class => 'navbar-link' %></li>
          <li><%= link_to "Logout", destroy_student_session_path, method: :delete, :class => 'navbar-link'  %></li>
          <% else %>
          <li><%= link_to "Login - teacher", new_teacher_session_path, :class => 'navbar-link'  %></li>
          <li><%= link_to "Login - student", new_student_session_path, :class => 'navbar-link'  %></li>
          <% end %>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

我如何使我的下拉菜单工作？

Answer 1

我认为您缺少 javascript 添加 :)

<script src="../pathtoyourfile/bootstrap.js"></script> 

Answer 2

通过在 Chrome 开发控制台中运行 $().modal 检查您的引导程序是否包含在内，它应该返回一个函数定义。如果它返回未定义，则说明您的引导程序未正确包含。

当我学习这个时，对我来说最好的方法是打开 chrome 开发者控制台，阅读 http://guides.rubyonrails.org/asset_pipeline.html 直到我的大脑不再接收信息，然后使用控制台和 application.html.erb 直到我有一个

<div class="btn btn-small btn-danger">kirka</div>

当插入到我的 DOM 中时，显示为带有样式的正确按钮。

然后我会去http://getbootstrap.com/components 发疯。

面条

Answer 3

我不知道为什么。 但是当我将代码更改为此时，它起作用了。

          <li class="dropdown">
            <a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              Visualizator
              <span class="caret"></span>
            </button>
              <ul class="dropdown-menu">
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
              </ul>
          </li>