在Rails App上安装Bootstrap 3

Question

我正在尝试在我的Rails应用程序上安装Bootstrap 3.0.我最近完成了Michael Hartl的教程,现在我正在尝试使用这个新版本的Bootstrap构建我自己的系统,但是我有一些我不确定的问题.

我的系统规格:

• MBP上的OS X Mountain Lion
• Rails 4.0
• Ruby 2.0

我有的问题:

1. 在我的Gemfile中使用的最佳宝石是什么？我找到了一些.
2. 我在进口什么custom.css.scss？我读到的地方与2.3.2有所不同.
3. 还有什么我需要做的才能让Bootstrap工作,或者剩下的步骤是否与我为Bootstrap 2.3.2所遵循的步骤相同？

编辑

以下是GitHub上的bootstrap-rails项目首先要做的事情:

gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                              :github => 'anjlab/bootstrap-rails'

然后它说:

gem 'anjlab-bootstrap-rails', '>= 3.0.0.0', :require => 'bootstrap-rails'

他们做同样的事情,还是你必须做同样的事情？

Answer 1

实际上你不需要gem,这是在RoR中安装Bootstrap 3的步骤

• 下载 Bootstrap

• 复制:

  bootstrap-dist/css/bootstrap.css 和 bootstrap-dist/css/bootstrap.min.css

  至: vendor/assets/stylesheets

• 复制:

  bootstrap-dist/js/bootstrap.js 和 bootstrap-dist/js/bootstrap.min.js

  至: vendor/assets/javascripts

• 更新: app/assets/stylesheets/application.css添加:

  *= require bootstrap.min
  

• 更新: app/assets/javascripts/application.js添加:

  //= require bootstrap.min
  

有了这个,你可以随时更新bootstrap,不需要等待gem更新.此外,使用此方法,资产管道将在生产中使用缩小版本.

Answer 2

众所周知,不需要宝石.

采取的步骤:

1. 下载Bootstrap
   • 直接下载链接Bootstrap 3.1.1
   • 或者到http://getbootstrap.com/

2. 复制

   bootstrap/dist/css/bootstrap.css
   bootstrap/dist/css/bootstrap.min.css 
   

   至: app/assets/stylesheets

3. 复制

   bootstrap/dist/js/bootstrap.js
   bootstrap/dist/js/bootstrap.min.js 
   

   至: app/assets/javascripts

4. 附加到: app/assets/stylesheets/application.css

   *=需要引导程序

5. 附加到: app/assets/javascripts/application.js

   // =需要引导程序

就这些.您已准备好添加新的酷派Bootstrap模板.

为什么app/而不是vendor/？

将文件添加到app/assets非常重要,因此将来您将能够覆盖Bootstrap样式.

如果以后要添加custom.css.scss具有自定义样式的文件.你会得到类似的东西application.css:

 *= require bootstrap                                                            
 *= require custom  

如果您将引导文件放在app/assets中,一切都按预期工作.但是,如果将它们放在供应商/资产中,最后将加载Bootstrap文件.像这样:

<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet">
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet">

因此,您的某些自定义将不会被使用,因为Bootstrap样式将覆盖它们.

这背后的原因

Rails将在许多地方搜索资产; 要获取此位置的列表,您可以执行以下操作:

$ rails console
> Rails.application.config.assets.paths

在输出中,您将看到app/assets优先,因此首先加载它.

Answer 3

这个答案适合那些希望在不使用gem的情况下在Rails应用程序中安装Bootstrap 3的人.有两种简单的方法可以在不到10分钟的时间内完成.选择最符合您需求的产品.Glyphicons和Javascript工作,我也测试了它们的最新测试版Rails 4.1.0.

1. 将Bootstrap 3与Rails一起使用4 - 将Bootstrap 3文件复制到应用程序的供应商目录中.

2. 将Bootstrap从CDN添加到Rails应用程序 - Bootstrap 3文件由Bootstrap CDN提供.

上面的2号是最灵活的.您需要做的就是更改布局助手中存储的版本号.因此,您可以运行您选择的Bootstrap版本,无论是3.0.0,3.0.3还是更旧的Bootstrap 2版本.

Answer 4

Twitter now has a sass-ready version of bootstrap with gem included, so it is easier than ever to add it to Rails.

Simply add to your gemfile the following:

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

bundle install and restart your server to make the files available through the pipeline.

There is also support for compass and sass-only: https://github.com/twbs/bootstrap-sass

Answer 5

我使用https://github.com/yabawock/bootstrap-sass-rails

这是非常简单的安装,快速的宝石更新和后续和快速修复以防万一.

Answer 6

gem bootstrap-sass

bootstrap-sass很容易通过资产管道进入Rails.

在Gemfile中,您需要添加bootstrap-sass gem,并确保存在sass-rails gem - 默认情况下它会添加到新的Rails应用程序中.

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2 gem 'bootstrap-sass', '~> 3.0.3.0'

bundle install 并重新启动服务器以通过管道使文件可用.

资料来源:http://rubydoc.info/gems/bootstrap-sass/3.0.3.0/frames