【boostrap-sass】使用 rails 改写 bootstrap 的官方样例

---

我是一个 rails 初学者，还请各位大神指正。最近刚学习 boostrap-sass，记得 bootstrap 官网有一些 example，所以就想通过修改这些样例来练习一下。此次通过 rails 修改 bootstrap 样例，学习如下几个知识点：

• bootstrap-sass的安装
• Asset Pipeline的学习 (特别是针对控制器的样式表和 JS 文件在相应的控制器中引入)
• link_to、image_tag、favicon_link_tag的学习

代码：https://github.com/wonderful60/rails-bootstrap-example.git

1. bootstrap-sass的安装

a.更新 Gemfile

gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'

b.执行bundle install 并重启 web 服务

c.更新 app/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

注意：bootstrap-sprockets 必须在 bootstrap 上面字体才能被引入。

d.确保样式表文件后缀是 .scss 或 .sass (Sass syntax)。新增 rails 项目时，默认会生成 application.css，还请做如下修改：

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

e.从 application.scss 中删除 *= require_self 和 *= require_tree . 而换作 @import 来引入 Sass 文件。

注意：不要再 sass 和其他样式表文件中使用*= require ,否则 Bootstrap 的 mixins 和 variables 将失效。

f.更新 app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap-sprockets

注意：bootstrap-sprockets 和 bootstrap 不能同时被包含再 application.js中. bootstrap-sprockets 只提供个别的 Bootstrap js (例如：alert.js 或 dropdown.js), 而 bootstrap 会提供一个包含所有 Bootstrap js 的文件。

2. 针对控制器的样式表和 JS 文件在相应的控制器中引入

a.更新/app/views/layouts/application.html.erb：

<%= stylesheet_link_tag    'application', params[:controller], media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track' => true %>

b.更新/config/initializers/assets.rb：

Rails.application.config.assets.precompile += [/^[-_a-zA-Z0-9]*\..*/]

3. link_to、image_tag、favicon_link_tag的学习

a.link_to 和 image_tag

<%= link_to image_tag("starter-template.jpg", :alt => "Starter template example"), starter_template_index_path, :class => "thumbnail" %>

注意：:class一定要在xxx_path后面，否则会报语法错误。

b.favicon_link_tag.更新/app/views/layouts/application.html.erb:

<%= favicon_link_tag 'favicon.ico' %>