[英]Using bootstrap-sass in Rails, Bootstrap / Javascript not working
trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head. 试图学习铁轨(而且我在开发过程中还很早就开始了)但是我已经撞墙了,我正在摸不着头脑。
I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. 我正在尝试通过bootstrap-sass来利用bootstrap,看起来当我使用默认的bootstrap导航栏时,我可以让条形图呈现 - 但它不是交互式的。 It looks like javascript isn't working properly, but I'm not sure why. 看起来javascript工作不正常,但我不确定为什么。
My gemfile: 我的gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development do
gem 'sqlite3'
gem 'spring'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
application.css application.css
*= require_tree .
*= require_self
app/javascripts/application.js 应用程序/ Javascript角/ application.js中
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
custom.css.scss custom.css.scss
@import "bootstrap-sprockets";
@import "bootstrap";
config/application.rb 配置/ application.rb中
module FamilyLunch
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
application.html.erb application.html.erb
<html>
<head>
<title>Family Lunch | <%= yield(:title) %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
For the JavaScript you have to add //= require bootstrap-sprockets
to application.js
like this : 对于JavaScript,您必须添加//= require bootstrap-sprockets
到application.js
如下所示:
app/javascripts/application.js 应用程序/ Javascript角/ application.js中
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
For Solidus create an app/assets/spree/frontend/all.js and include: 对于Solidus,创建app / assets / spree / frontend / all.js并包括:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
this will override the app/assets/application.js 这将覆盖app / assets / application.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.