使用Rails 5和Bootstrap4

3
我会翻译中文。以下是内容翻译:

我按照官方指南这篇文章的方法进行了尝试,但都没有帮助,有人可以给我指点迷津吗?(Github源代码

我的Gem文件:

...
#bootstrap
gem 'bootstrap', '~> 4.0.0.alpha3.1'
gem 'sprockets-rails', :require => 'sprockets/railtie'

source 'https://rails-assets.org' do
  gem 'rails-assets-tether', '>= 1.1.0'
end
...

我的 application.scss:

@import 'bootstrap-sprockets';
@import 'bootstrap';

我的 application.js:

//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

我的application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>DankDist</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

最后,我的index.html.erb文件:
<h1>Scale#index</h1>
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>
<p>Hello Worldzz</p>
<p>Find me in app/views/scale/index.html.erb</p>
<%= params[:id] %> <br/>
<%= @id %>

Next Page <%= @page +1 %>

<hr/>
<%= params.inspect %>

我运行了Bundle,并重新尝试了 rails s,但没有任何变化,标题不包含任何样式。

在你的application.css.scss中,仍需要使用require_tree。将scss重命名为css.scss,然后添加/*= require.... */,我忘记了其中的字符串。请参考http://stackoverflow.com/a/21643987/3338439。 - Mingsheng
我按照帖子的步骤操作了,但仍然无法正常工作。 - Salah Alshaal
你不应该使用bootstrap-sass吗? - Mingsheng
只需为Bootstrap2和3使用。 - Salah Alshaal
1
哦,好的。嗯,那我不太确定。我还没有尝试过Bootstrap 4。如果没有人回答,明天我会去试一下并让你知道的! - Mingsheng
2个回答

2

有一些错误

  1. ScaleController 包含布局false - 因此您在application.html.erb中的样式表导入不起作用
  2. @import 'bootstrap-sprockets'; 对于Bootstrap 4 gem是不必要的

-2
在 application.js 中,尝试将这两行代码按照以下方式排列,我注意到这对我有效:
//= require jquery
//= require bootstrap-sprockets

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接