Previous Lecture Complete and continue  

  帮 Rails 专案穿上衣服“Bootstrap”

目标

本章的作业目标,是要带领各位把目前的空专案,穿上“衣服”,让各位在做这个程式练习时,不再感到专案是在“裸奔”!

步骤

Step 0. git checkout -b ch01

这里我们要来示范一个 git 功能,输入:

git checkout -b ch01

等一下在这一章做的动作,我们 commit 进去的程式码都会属于 ch01 这个分支。

Step 1. 帮专案穿上衣服 Bootstrap,挂上 bootstrap-sass 这个 gem

Bootstrap 是 Web 设计圈有名的 CSS 框架,提供了开发专案快速便利的元件素材,如按钮、下拉选单、表格等等样式。

在 Rails 上要帮专案穿上 Bootstrap,用的是 bootstrap-sass 这个套件。

在编辑器打开 Gemfile 这个档案

修改 Gemfile,在 group :development, :test do 前一行加入 gem 'bootstrap-sass'

Gemfile
gem 'bootstrap-sass'

	

Step 2. bundle install

执行 bundle install

(注意:修改完 Gemfile 都要执行 bundle install)

Step 3. 将 Bootstrap 的 CSS 套件装进专案里面

输入

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

application.css 更名为 application.scss

然后修改内容加入这两行

app/assets/stylesheets/application.scss
/*
 * ...(一堆注解)
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
	

Step 4. 将变更 commit 进去 git 里面。

git add .
git commit -m "add bootstrap to project"
	

解说

What is Bootstrap?

  • Bootstrap 是一个有名的 CSS 框架,提供了很多的现成元件样式,而且也是很多程式设计师开发程式首选的“制服”。
  • Bootstrap 的官网网址在:http://getbootstrap.com/,你可以在这里看到更多范例,以及用法。
  • 以后如果你想要修改你的“按钮样式”,或者扩充一些新的功能,可以回到这个网站上面查询功能。
  • 不过现在先不要在这里玩到迷路了。先继续你的 Rails 练习作业吧!

css 与 scss 有什么不同?

  • SCSS 是一套“程式语言”,可以用来产生 CSS。意思是你可以写程式“产生 CSS”,提供一些 CSS 原生没有办法的进阶作法。不过在这章你只要理解成为,我们为了要“挂上”bootstrap,所以必须要用到 scss

import 是什么?

  • 是 scss 内引入“模组”的意思。透过这样的方式去引用其他资源,就不需要自己从头开始制作。比方说你要穿衣服,直接买一件来穿就省事很多,不需要自己跑去买布、搞裁缝那些。

为什么我们不去 bootstrap 官网上下载 CSS 再丢到 Rails 目录夹里面比较快?

  • 因为这样每次 bootstrap 更换版本,你的 CSS 目录夹就会脏到一塌糊涂,所以 Rails 有好心人打包成“挂上去的版本”,如果未来开发者想要升级,只要改变 bootstrap-sass 的板号就可以了。