概要：

本課時(shí)介紹 Bootstrap，以及 Bootswatch UI，通過 Gem，將 UI 文件安裝到 Rails 項(xiàng)目中。介紹項(xiàng)目 UI 設(shè)計(jì)思路及工具。

知識(shí)點(diǎn)：

1. Bootstrap 介紹
2. Bootswatch 工具及 Gem
3. mybalsamiq 工具

更新說明

在新書編寫之際，對(duì)當(dāng)前內(nèi)容作了一次升級(jí)。原代碼編寫于2015年，在此之后有不少版本的變動(dòng)和 bug 的修復(fù)，導(dǎo)致當(dāng)時(shí)的一些代碼無法正確運(yùn)行。

本節(jié)中，修復(fù)了一些大家反饋的問題，如果你在調(diào)試時(shí)遇到問題，可以使用 bundle update rails 升級(jí)到 4.2.7.1，并且 bundle update sass-rails 升級(jí)到4.0.5 版本，經(jīng)過我的調(diào)試，這是沒有異常的。

正文

1.3.1 Bootstrap

大家好，在編寫我們項(xiàng)目代碼之前，我先講一個(gè)大約十年前的事情。2005年創(chuàng)業(yè)初期，為客戶制作網(wǎng)站，有一次，一個(gè)客戶找到我們，說要開發(fā)一個(gè)賣花的網(wǎng)站，因?yàn)樾缕芳磳⑸鲜?，所以有一些急。于是，我們給出了厚厚的幾頁所謂的“設(shè)計(jì)方案”。但是客戶幾分鐘就否定了，說：“我們的項(xiàng)目很簡單，只需要購買者看到新品就可以，可以預(yù)定，我們貨到付款”。于是，我們把多余的設(shè)計(jì)去掉后，之前那份設(shè)計(jì)方案只剩下三分之一了。但是客戶又很快否定了我們的方案，說：“我能先看看樣子么？”

于是，我們讓設(shè)計(jì)師設(shè)計(jì)好了幾個(gè)樣子，交給客戶，客戶又把我們否定了，而且顯得不耐煩。他抓取一張紙和一支鉛筆，在紙上畫出了他要的樣子。什么樣子呢？

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/flower_sample.png" alt="" />

在稍后商討細(xì)節(jié)后，我們很快完成了代碼功能。

這件事情給我的啟發(fā)是：

代碼之前，先看到樣子

在客戶畫出樣稿前，我們并不知道新品只有幾種，而且這個(gè)網(wǎng)站只放置新品。它所突出的是在線預(yù)定和貨到付款，即宣傳了新品，又使用了另一種貼近新品的設(shè)計(jì)風(fēng)格。

回到我們的例子，我們還沒開始 Rails 項(xiàng)目之前，要先為它設(shè)計(jì)一個(gè)樣子出來。有些難度么？我們先講一個(gè)接下來要幫助我們的前端設(shè)計(jì)框架：Bootstrap。

Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。[1] 它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。百度百科

先給大家 Bootstrap 的 官網(wǎng)，這里可以找到它的 源代碼，這里有中文的學(xué)習(xí)資料 Bootstrap 中文網(wǎng)。

在讀 Bootstrap 起步 之前，我先介紹下它的特點(diǎn)：

• 一致的設(shè)計(jì)風(fēng)格，豐富的Web組件，下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、面包屑、分頁、排版、縮略圖、警告對(duì)話框、進(jìn)度條、媒體對(duì)象等
• 支持多個(gè)主流瀏覽器
• HTML5和CSS3開發(fā)
• 在jQuery的基礎(chǔ)上設(shè)計(jì)，兼容大部分jQuery插件
• 平臺(tái)自適應(yīng)，即便在手機(jī)，pad 打開網(wǎng)站也沒問題

什么？ie6？請(qǐng)閱讀10年前的教程吧，如果還能找到的話。

在 這里，你可以很快看到 Bootstrap 的模樣了。接下來的章節(jié)里，我們將按照這個(gè)樣子，設(shè)計(jì)我們的 shop。

rails new shop

好的，我們給它添加個(gè)幾個(gè) gem。

gem "therubyracer"
gem "less-rails"
gem "twitter-bootstrap-rails"

然后，運(yùn)行

bundle install

之后，我們給出一個(gè)新的命令，scaffold：

rails g scaffold product name price:decimal description:text

scaffold 命令我們將在下一章詳細(xì)介紹，這里，我們創(chuàng)建了一個(gè)資源，Product。

然后，我們繼續(xù)運(yùn)行以下幾個(gè)命令

# 更新 db 解構(gòu)
rake db:migrate
# 安裝 bootstrap 文件
rails generate bootstrap:install
# 創(chuàng)建一個(gè) layout
rails g bootstrap:layout
# 創(chuàng)建資源模板
rails g bootstrap:themed Products

是不是還有不熟悉的命令，我們后面的章節(jié)詳細(xì)介紹他們，現(xiàn)在，你可以運(yùn)行

rails s

來啟動(dòng) Rails 項(xiàng)目了，訪問 http://localhost:3000/products，你會(huì)看到這個(gè)頁面，它就是 Bootstrap 風(fēng)格的頁面了。

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/bootstrap.png" alt="" />

把它縮小看看

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/bootstrap_small.png" alt="" />

是的，即便你用手機(jī)來訪問它，也不會(huì)讓頁面亂掉。

我們用的是這個(gè) gem，你可以詳細(xì)的看看它的文檔。

https://github.com/seyhunak/twitter-bootstrap-rails

1.3.2 Bootswatch

是不是太千篇一律了呀？

的確，大多數(shù)項(xiàng)目開始的時(shí)候都是一個(gè)樣子，是件讓人氣餒的事情。我們來給它增加點(diǎn)不同。

這里再介紹一個(gè)可以幫助我們的項(xiàng)目，Bootswatch

我們?cè)趧偛诺?Gemfile 中，再添加兩個(gè) gem：

gem 'twitter-bootswatch-rails'
gem 'twitter-bootswatch-rails-helpers'

在我們的項(xiàng)目中，運(yùn)行下面的兩個(gè)新命令：

rails g bootswatch:install cerulean # 安裝該 theme 的基礎(chǔ)文件
rails g bootswatch:import cerulean # 導(dǎo)入一個(gè)線上的 theme 的變量文件

注：我們使用的 Gem 中，會(huì)存在 bug，或者，版本更新導(dǎo)致的 Gem 不匹配， 也會(huì)引起 Bug。 這時(shí)候，我們可以幫助作者改進(jìn)它。當(dāng)然，你要先十分確定，它是一個(gè) Bug！

我們修改一下 application.css 中的引用：

 *= require cerulean/loader
 *= require cerulean/bootswatch

我們可以看到

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/bootswatch.png" alt="" />

當(dāng)然，事情并未像上面寫的如此容易。我在為大家寫這段代碼的時(shí)候，就遇到了很多問題，還好，都一一解決了。你可以到 這里 看到我調(diào)試好的代碼。

在 這里，我為大家選擇了三套不同的 bootswatch theme，大家可以練習(xí)。

Bootswatch-rails 的代碼在這里：

https://github.com/scottvrosenthal/twitter-bootswatch-rails

Rails 和 Ruby 一樣，是為有經(jīng)驗(yàn)的開發(fā)者準(zhǔn)備的。

作為初學(xué)者，Rails 的確會(huì)為大家提出很多問題，有些問題會(huì)占用大量的時(shí)間，讓人失去耐心。雖然開發(fā)了很多年的 Rails 項(xiàng)目代碼，我也會(huì)經(jīng)常遇到各種問題。所以，請(qǐng)大家耐心，讓我們一起 弄清思路，慢慢解決。

1.3.3 UI 設(shè)計(jì)

本節(jié)，讓我們輕松一下。

你有注意到 1.3.1 里的那張圖么？對(duì)了，它是用 www.mybalsamiq.com 畫的。

讓我們繼續(xù)為即將開始的 shop 項(xiàng)目，畫幾張圖吧。

首先，我們想想，我們需要哪些頁面。

1. 首頁，列出我們推薦的商品（Product）
2. 列表頁，根據(jù)選擇的分類，列出該分類下的商品
3. 展示頁，查看每一個(gè)商品

好的，我們畫出心里構(gòu)思好的頁面。

我們的首頁

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/index.png" alt="" />

我們的列表頁

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/list.png" alt="" />

我們的展示頁

http://wiki.jikexueyuan.com/project/rails-practice/images/chapter_1/show.png" alt="" />

我想講幾個(gè)我們?cè)O(shè)計(jì)上的細(xì)節(jié)。

• 首頁，我們展示的是屬性為置頂（top = true）的商品。
• 列表頁，我們有商品分頁。
• 展示頁，當(dāng)前分類和導(dǎo)航中的分類是選中狀態(tài)。

當(dāng)然，我們的原型設(shè)計(jì)不止這三張圖，在后面的代碼階段，我們將會(huì)根據(jù)需要，再設(shè)計(jì)其他的頁面。

下一節(jié)，我們將使用 scaffold 這個(gè)命令，來創(chuàng)建我們的第一個(gè)資源。我們下一節(jié)再見。