Gem [boostrap-sass] 使用 Rails 改写 Bootstrap 的官方样例

wonderful60 · 2016年06月24日 · 3400 次阅读

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


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

代码: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-sprocketsbootstrap 不能同时被包含再 application.js中. bootstrap-sprockets 只提供个别的 Bootstrap js (例如:alert.jsdropdown.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]*\..*/]

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' %>
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号