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>