帮 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'

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
然后修改内容加入这两行
/* * ...(一堆注解) *= 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
的板号就可以了。