帮 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 的板号就可以了。