Rails bootstrap

Question

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

我想使用引导进行下拉菜单。 我得到了示例代码，但菜单不工作... 我很确定我有一个缺少的宝石，或缺少包括在一些CSS或JS文件。

的Rails 4.2.0

红宝石2.2.0

aplication.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 
    */ 

的Gemfile

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

的application.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

我不知道为什么。 但是，当我改变了这个代码，它的工作。

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

Answer 2

检查您的引导是否包含在Chrome开发控制台中运行$().modal，它应该返回一个函数定义。如果它返回undefined，那么引导程序没有正确包含。

当我正在学习这个时，对我来说最好的方法是打开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并坚果。

toodles

Answer 3

我觉得你失踪的JavaScript此外:)

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