# 5.1 添加一些結構
本書介紹 Web 開發而不是 Web 設計,不過在一個看起來很簡陋的應用中開發會讓人提不起勁,所以本節要向布局中添加一些結構,再加入一些 CSS 實現基本的樣式。除了使用自定義的 CSS 之外,我們還會使用由 Twitter 開發的開源 Web 設計框架 [Bootstrap](http://getbootstrap.com/)。我們會按照一定的方式組織代碼——當布局文件中的內容變多以后,使用局部視圖清理。
開發 Web 應用時,盡早對用戶界面有個統籌安排往往會對你有所幫助。在本書后續內容中,我會經常使用網頁構思圖(mockup)(在 Web 領域經常稱之為“線框圖”),展示應用最終外觀的草圖。[[2](#fn-2)]本章大部分內容都在開發 [3.2 節](chapter3.html#static-pages)編寫的靜態頁面,我們要在頁面中加入一個網站 LOGO、導航條和網站底部。這些頁面中最重要的是“首頁”,它的構思圖如[圖 5.1](#fig-home-page-mockup) 所示,[圖 5.7](#fig-site-with-footer) 是最終實現的效果。你會發現二者之間的某些細節有所不同,例如,在最終實現的頁面中我們加入了一個 Rails LOGO——這沒什么關系,因為構思圖沒必要畫出每個細節。
圖 5.1:演示應用首頁的構思圖
和之前一樣,如果使用 Git 做版本控制,現在最好創建一個新分支:
```
$ git checkout master
$ git checkout -b filling-in-layout
```
## 5.1.1 網站導航
在應用中添加鏈接和樣式之前,我們先來修改網站的布局文件 `application.html.erb`(上一次見到是在[代碼清單 4.3](chapter4.html#listing-application-layout-full-title) 中),添加一些 HTML 結構。我們要添加一些區域,一些 CSS 類,以及導航條。布局文件的完整內容參見[代碼清單 5.1](#listing-layout-new-structure), 對各部分的說明緊跟其后。如果你迫不及待想看到結果,請看[圖 5.2](#fig-layout-no-logo-or-custom-css)。(注意:結果(還)不是很讓人滿意。)
##### 代碼清單 5.1:添加一些結構后的網站布局文件
app/views/layouts/application.html.erb
```
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
```
我們從上往下看一下這段代碼中新添加的元素。[3.4.1 節](chapter3.html#testing-titles)簡單介紹過,Rails 默認使用 HTML5(如 `<!DOCTYPE html>` 所示)。因為 HTML5 標準還很新,有些瀏覽器(特別是舊版 IE 瀏覽器)還沒有完全支持,所以我們加載了一些 JavaScript 代碼(稱作“[HTML5 shim](https://github.com/aFarkas/html5shiv)”)來解決這個問題:
```
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
```
如下有點古怪的句法
```
<!--[if lt IE 9]>
```
只有當 IE 瀏覽器的版本號小于 9 時(`if lt IE 9`)才會加載其中的代碼。這個奇怪的 `[if lt IE 9]` 句法不是 Rails 提供的,其實它是 IE 瀏覽器為了解決兼容性問題而特別提供的[條件注釋](http://en.wikipedia.org/wiki/Conditional_comment)。使用這個句法有個好處,只會在 IE9 以前的版本中加載 HTML5 shim,而 Firefox、Chrome 和 Safari 等其他瀏覽器不會受到影響。
后面的區域是一個 `header`,包含網站的 LOGO(純文本)、一些區域(使用 `div` 標簽)和一個導航列表元素:
```
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
```
`header` 標簽表明這個元素應該放在頁面的頂部。我們為 `header` 標簽指定了三個 CSS 類,[[3](#fn-3)]分別為 `navbar`、`navbar-fixed-top` 和 `navbar-inverse`,類之間用空格分開:
```
<header class="navbar navbar-fixed-top navbar-inverse">
```
所有 HTML 元素都可以指定類和 ID,它們不僅是標記,使用 CSS 編寫樣式時也有用([5.1.2 節](#bootstrap-and-custom-css))。類和 ID 之間主要的區別是,類可以在同一個網頁中多次使用,而 ID 只能使用一次。這里的三個類在 Bootstrap 框架中都有特殊的意義。我們會在 [5.1.2 節](#bootstrap-and-custom-css)安裝并使用 Bootstrap。
在 `header` 標簽內部,有一個 `div` 標簽:
```
<div class="container">
```
`div` 標簽是常規的區域,除了把文檔分成不同的部分之外,沒有特殊的意義。在以前的 HTML 標準中,`div` 標簽被用來劃分網站中幾乎所有的區域,但是 HTML5 增加了 `header`、`nav` 和 `section` 等元素,用來劃分大多數網站中都會用到的區域。這個 `div` 標簽也有一個 CSS 類,`container`。和 `header` 標簽的類一樣,這個類在 Bootstrap 中也有特殊的意義。
在這個 `div` 標簽中有一些 ERb 代碼:
```
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
```
這里使用 Rails 提供的 `link_to` 輔助方法創建鏈接([3.2.2 節](chapter3.html#custom-static-pages)直接使用 `a` 標簽創建)。`link_to` 的第一個參數是鏈接文本,第二個參數是鏈接地址。在 [5.3 節](#layout-links)我們會使用“具名路由”(named route)指定鏈接地址,現在暫且使用 Web 開發中經常使用的占位符 `#`。第三個參數可選,是一個哈希,本例使用這個參數為 LOGO 添加一個 CSS ID——`logo`。(其他三個鏈接沒有使用這個哈希參數,沒關系,因為這個參數是可選的。)Rails 輔助方法的參數經常這樣使用哈希,讓我們僅使用 Rails 的輔助方法就能靈活添加 HTML 屬性。
`div` 標簽中的第二個元素是導航鏈接,使用無序列表標簽 `ul`,以及列表項目標簽 `li` 編寫:
```
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
```
`nav` 標簽以前是不需要的,它的目的是明確表明這些鏈接是導航。`ul` 標簽中的 `nav`、`navbar-nav` 和 `navbar-right` 三個類在 Bootstrap 中有特殊的意義,[5.1.2 節](#bootstrap-and-custom-css)引入 Bootstrap 的 CSS 之后會自動實現特殊的樣式。在瀏覽器中審查導航元素,你會發現 Rails 處理布局文件并執行其中的 ERb 代碼后,生成的列表如下所示:[[4](#fn-4)]
```
<nav>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Log in</a></li>
</ul>
</nav>
```
這就是返回給瀏覽器的文本。
布局文件的最后一部分是一個 `div` 標簽,用于顯示主內容:
```
<div class="container">
<%= yield %>
</div>
```
和之前一樣,`container` 類在 Bootstrap 中有特殊意義。[3.4.3 節](chapter3.html#layouts-and-embedded-ruby)已經介紹過,`yield` 會把各頁面中的內容插入網站的布局中。
除了網站的底部([5.1.3 節](#partials)會添加)之外,布局現在完成了。訪問“首頁”就能看到結果。為了利用后面添加的樣式,我們要在 `home.html.erb` 視圖中添加一些額外元素,如[代碼清單 5.2](#listing-signup-button) 所示。
##### 代碼清單 5.2:“首頁”視圖,包含一個到注冊頁面的鏈接
app/views/static_pages/home.html.erb
```
<div class="center jumbotron">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
sample application.
</h2>
<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
```
其中第一個 `link_to` 創建一個占位鏈接,指向[第 7 章](chapter7.html#sign-up)創建的用戶注冊頁面:
```
<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>
```
`div` 標簽的 CSS 類 `jumbotron` 在 Bootstrap 中有特殊的意義,注冊按鈕的 `btn`、`btn-lg` 和 `btn-primary` 也是一樣。
第二個 `link_to` 用到了 `image_tag` 輔助方法,第一個參數是圖片的路徑;第二個參數可選,是一個哈希,本例中這個哈希參數使用一個符號鍵設置圖片的 `alt` 屬性。為了能正確顯示圖片,應用中必須有個名為 `rails.png` 的圖片。這個圖片可以從本書的網站中下載,地址是 [http://railstutorial-china.org/assets/http://railstutorial-china.org/book/images/rails.png](http://railstutorial-china.org/assets/http://railstutorial-china.org/book/images/rails.png)。下載后把這個圖片放在 `app/assets/http://railstutorial-china.org/book/images/` 文件夾中。如果使用云端 IDE 或 Unix 類系統,可以使用 `curl` 完成這個操作,如下所示:[[5](#fn-5)]
```
$ curl -O http://railstutorial-china.org/assets/http://railstutorial-china.org/book/images/rails.png
$ mv rails.png app/assets/http://railstutorial-china.org/book/images/
```
因為我們使用了 `image_tag` 輔助方法,所以 Rails 會使用 Asset Pipeline([5.2 節](#sass-and-the-asset-pipeline))自動在 `app/assets/http://railstutorial-china.org/book/images/` 文件夾中尋找圖片。
為了更好地理解 `image_tag`,我們來看一下生成的 HTML:[[6](#fn-6)]
```
<img alt="Rails logo" src="/assets/rails-9308b8f92fea4c19a3a0d8385b494526.png" />
```
其中,字符串 `9308b8f92fea4c19a3a0d8385b494526`(在你的系統中得到的字符串可能不一樣)由 Rails 添加,目的是確保文件名的唯一性,如果文件變化了,讓瀏覽器重新加載文件(而不是從緩存中讀取)。注意,`src` 屬性中并沒有 `images`,使用的是靜態文件(圖片,JavaScript,CSS 等)共用的 `assets` 文件夾。在服務器中,Rails 會把 `assets` 文件夾中的圖片和 `app/assets/images` 文件夾中的文件對應起來。這么做是為了讓瀏覽器覺得所有靜態文件都在同一個文件夾中,有利于快速伺服。`alt` 屬性的內容會在圖片無法加載時顯示,例如在針對視覺障礙人士的屏幕閱讀器中。
圖 5.2:還沒添加 CSS 的首頁
現在我們終于可以看到勞動的果實了,如[圖 5.2](#fig-layout-no-logo-or-custom-css) 所示。你可能會說,這并不很美觀啊。或許吧。不過也可以小小的高興一下,因為我們為 HTML 結構指定了合適的類,可以用來添加 CSS。
## 5.1.2 Bootstrap 和自定義的 CSS
前一節我們為很多 HTML 元素指定了 CSS 類,這樣我們就可以使用 CSS 靈活的構建布局了。如前所述,其中很多類在 Bootstrap 中都有特殊的意義。Bootstrap 是 Twitter 開發的框架,可以方便地把精美的 Web 設計和用戶界面元素添加到使用 HTML5 開發的應用中。本節,我們會結合 Bootstrap 和一些自定義的 CSS 為演示應用添加一些樣式。
首先,我們要安裝 Bootstrap。在 Rails 應用中可以使用 `bootstrap-sass` 這個 gem,如[代碼清單 5.3](#listing-bootstrap-sass) 所示。Bootstrap 框架本身使用 [LESS](http://lesscss.org/) 編寫動態樣式表,而 Rails 的 Asset Pipeline 默認支持的是(非常類似的)Sass 語言。`bootstrap-sass` 會把 LESS 轉換成 Sass,而且讓 Bootstrap 中所有必要的文件都可以在當前應用中使用。[[7](#fn-7)]
##### 代碼清單 5.3:把 `bootstrap-sass` 添加到 `Gemfile` 中
```
source 'https://rubygems.org'
gem 'rails', '4.2.2'
gem 'bootstrap-sass', '3.2.0.0'
.
.
.
```
和之前一樣,運行 `bundle install` 安裝 Bootstrap:
```
$ bundle install
```
`rails generate` 命令會自動為控制器生成一個單獨的 CSS 文件,但很難使用正確的順序引入這些樣式,所以簡單起見,本書會把所有 CSS 都放在一個文件夾中。為此,我們要先新建這個 CSS 文件:
```
$ touch app/assets/stylesheets/custom.css.scss
```
(使用 [3.3.3 節](chapter3.html#green)用過的 `touch` 命令,你也可以使用其他方式。)其中文件夾的名字和文件擴展名都很重要。`app/assets/stylesheets/` 文件夾是 Asset Pipeline 的一部分,其中所有的樣式表都會引入 `application.css` 文件。文件名 `custom.css.scss` 中包含 `.css`,說明這是 CSS 文件,`.scss` 擴展名則說明這是“Sassy CSS”文件,Asset Pipeline 會使用 Sass 處理其中的內容。([5.2.2 節](#syntactically-awesome-stylesheets)才會使用 Sass,不過加入這個擴展名才能發揮 `bootstrap-sass` gem 的作用。)
在這個 CSS 文件中,我們可以使用 `@import` 函數引入 Bootstrap(以及相關的 Sprockets 工具),如[代碼清單 5.4](#listing-bootstrap-css) 所示。[[8](#fn-8)]
##### 代碼清單 5.4:添加 Bootstrap 的 CSS
app/assets/stylesheets/custom.css.scss
```
@import "bootstrap-sprockets";
@import "bootstrap";
```
這兩行代碼會引入整個 Bootstrap CSS 框架。然后重啟 Web 服務器(先按 Ctrl-C 鍵,然后執行 `rails server` 命令),讓這些改動生效,效果如[圖 5.3](#fig-sample-app-only-bootstrap) 所示。文本的位置還不合適,LOGO 也沒有任何樣式,不過顏色搭配和注冊按鈕看起來都不錯。
圖 5.3:使用 Bootstrap CSS 后的演示應用
下面我們要加入一些整站都會用到的 CSS,用來樣式化網站布局和各個頁面,如[代碼清單 5.5](#listing-universal-css) 所示。效果如[圖 5.4](#fig-sample-app-universal) 所示。代碼清單 5.5 中定義了很多樣式規則。為了說明 CSS 規則的作用,經常會加入一些 CSS 注釋,放在 `/* ... */` 中。
##### 代碼清單 5.5:添加全站使用的 CSS
app/assets/stylesheets/custom.css.scss
```
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
```
圖 5.4:添加一些留白以及其他全局樣式
注意,[代碼清單 5.5](#listing-universal-css) 中的 CSS 格式都是統一的。一般來說,CSS 規則通過類、ID、HTML 標簽或者三者結合在一起來指代目標,然后在后面跟著一些樣式聲明。例如:
```
body {
padding-top: 60px;
}
```
這個規則把頁面的上內邊距設為 60 像素。我們在 `header` 標簽上指定了 `navbar-fixed-top` 類,Bootstrap 會把這個導航條固定在頁面的頂部,所以頁面的上內邊距會把主內容區和導航條隔開一段距離。(導航條的顏色在 Bootstrap 2.0 中變了,所以我們要加入 `navbar-inverse` 類,把亮色變暗。)下面的 CSS 規則:
```
.center {
text-align: center;
}
```
把 `.center` 類的樣式定義為 `text-align: center;`。`.center` 中的點號說明這個規則是樣式化一個類。(在[代碼清單 5.7](#listing-logo-css) 中會看到,`#` 樣式化一個 ID。)這個規則的意思是,任何類為 `.center` 的標簽(例如 `div`),其中包含的內容都會在頁面中居中顯示。([代碼清單 5.2](#listing-signup-button) 中有用到這個類。)
雖然 Bootstrap 中包含了很精美的文字排版樣式,我們還是要為文字的外觀添加一些自定義的規則,如[代碼清單 5.6](#listing-typography-css) 所示。(并不是所有樣式都用于“首頁”,但所有規則都會在這個演示應用的某個地方用到。)效果如[圖 5.5](#fig-sample-app-typography) 所示。
##### 代碼清單 5.6:添加一些精美的文字排版樣式
app/assets/stylesheets/custom.css.scss
```
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
```
圖 5.5:添加一些排版樣式
最后,我們還要為只包含文本“sample app”的網站 LOGO 添加一些樣式。[代碼清單 5.7](#listing-logo-css) 中的 CSS 會把文字變成全大寫字母,還修改了文字大小、顏色和位置。(我們使用的是 ID,因為我們希望 LOGO 在頁面中只出現一次,不過也可以使用類。)
##### 代碼清單 5.7:添加網站 LOGO 的樣式
app/assets/stylesheets/custom.css.scss
```
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
```
其中,`color: #fff;` 會把 LOGO 文字的顏色變成白色。HTML 中的顏色代碼由 3 組 16 進制數組成,分別代表三原色中的紅綠藍。`#ffffff` 是 3 種顏色都為最大值的情況,表示純白色。`#fff` 是 `#ffffff` 的簡寫形式。CSS 標準為很多常用的 HTML 顏色定義了別名,例如 `white` 代表 `#fff`。添加[代碼清單 5.7](#listing-logo-css) 中的樣式后,效果如[圖 5.6](#fig-sample-app-logo) 所示。
圖 5.6:添加 LOGO 樣式后的演示應用
## 5.1.3 局部視圖
雖然[代碼清單 5.1](#listing-layout-new-structure) 中的布局達到了目的,但其中的內容看起來有點混亂。HTML shim 就占用了三行,而且使用了只針對 IE 的奇怪句法,如果能把它打包放在一個單獨的地方就好了。頭部的 HTML 自成一個邏輯單元,所以也可以把這部分打包放在某個地方。在 Rails 中我們可以使用“局部視圖”實現這種想法。先來看一下定義了局部視圖之后的布局文件。如[代碼清單 5.8](#listing-layout-with-partials) 所示。
##### 代碼清單 5.8:把 HTML shim 和頭部放到局部視圖之后的網站布局
app/views/layouts/application.html.erb
```
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
```
在這段代碼中,我們把 HTML shim 刪掉,換成了一行代碼,調用 Rails 的輔助方法 `render`:
```
<%= render 'layouts/shim' %>
```
這行代碼會尋找一個名為 `app/views/layouts/_shim.html.erb` 的文件,執行其中的代碼,然后把結果插入視圖。[[9](#fn-9)](回顧一下,執行 Ruby 表達式并將結果插入模板中要使用 `<%= …? %>`。)注意,文件名 `_shim.html.erb` 的開頭是個下劃線,這是局部視圖的命名約定,可以在目錄中快速定位所有局部視圖。
當然,若要局部視圖起作用,我們要寫入相應的內容。HTML shim 局部視圖只包含三行代碼,如[代碼清單 5.9](#listing-stylesheets-partial) 所示。
##### 代碼清單 5.9:HTML shim 局部視圖
app/views/layouts/_shim.html.erb
```
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
```
類似地,我們可以把頭部的內容移入局部視圖,如[代碼清單 5.10](#listing-header-partial) 所示,然后再次調用 `render` 把這個局部視圖插入布局中。(一般都要在文本編輯器中手動創建局部視圖對應的文件。)
##### 代碼清單 5.10:網站頭部的局部視圖
app/views/layouts/_header.html.erb
```
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
```
現在我們已經知道怎么創建局部視圖了,讓我們來加入和頭部對應的網站底部吧。你或許已經猜到了,我們會把這個局部視圖命名為 `_footer.html.erb`,放在布局文件夾中,如[代碼清單 5.11](#listing-footer-partial) 所示。[[10](#fn-10)]
##### 代碼清單 5.11:網站底部的局部視圖
app/views/layouts/_footer.html.erb
```
<footer class="footer">
<small>
The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
</small>
<nav>
<ul>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</footer>
```
和頭部類似,在底部我們使用 `link_to` 創建到“關于”頁面和“聯系”頁面的鏈接,地址先使用占位符 `#`。(和 `header` 一樣,`footer` 也是 HTML5 新增加的標簽。)
按照 HTML shim 和頭部局部視圖的方式,我們也可以在布局視圖中渲染底部局部視圖,如[代碼清單 5.12](#listing-layout-with-footer) 所示。
##### 代碼清單 5.12:添加底部局部視圖后的網站布局
app/views/layouts/application.html.erb
```
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
```
當然,如果沒有樣式的話,底部還很丑。底部的樣式參見[代碼清單 5.13](#listing-footer-css),效果如[圖 5.7](#fig-site-with-footer) 所示。
圖 5.7:添加底部后的首頁
##### 代碼清單 5.13:添加網站底部的 CSS
app/assets/stylesheets/custom.css.scss
```
.
.
.
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
```
- Ruby on Rails 教程
- 致中國讀者
- 序
- 致謝
- 作者譯者簡介
- 版權和代碼授權協議
- 第 1 章 從零開始,完成一次部署
- 1.1 簡介
- 1.2 搭建環境
- 1.3 第一個應用
- 1.4 使用 Git 做版本控制
- 1.5 部署
- 1.6 小結
- 1.7 練習
- 第 2 章 玩具應用
- 2.1 規劃應用
- 2.2 用戶資源
- 2.3 微博資源
- 2.4 小結
- 2.5 練習
- 第 3 章 基本靜態的頁面
- 3.1 創建演示應用
- 3.2 靜態頁面
- 3.3 開始測試
- 3.4 有點動態內容的頁面
- 3.5 小結
- 3.6 練習
- 3.7 高級測試技術
- 第 4 章 Rails 背后的 Ruby
- 4.1 導言
- 4.2 字符串和方法
- 4.3 其他數據類型
- 4.4 Ruby 類
- 4.5 小結
- 4.6 練習
- 第 5 章 完善布局
- 5.1 添加一些結構
- 5.2 Sass 和 Asset Pipeline
- 5.3 布局中的鏈接
- 5.4 用戶注冊:第一步
- 5.5 小結
- 5.6 練習
- 第 6 章 用戶模型
- 6.1 用戶模型
- 6.2 用戶數據驗證
- 6.3 添加安全密碼
- 6.4 小結
- 6.5 練習
- 第 7 章 注冊
- 7.1 顯示用戶的信息
- 7.2 注冊表單
- 7.3 注冊失敗
- 7.4 注冊成功
- 7.5 專業部署方案
- 7.6 小結
- 7.7 練習
- 第 8 章 登錄和退出
- 8.1 會話
- 8.2 登錄
- 8.3 退出
- 8.4 記住我
- 8.5 小結
- 8.6 練習
- 第 9 章 更新,顯示和刪除用戶
- 9.1 更新用戶
- 9.2 權限系統
- 9.3 列出所有用戶
- 9.4 刪除用戶
- 9.5 小結
- 9.6 練習
- 第 10 章 賬戶激活和密碼重設
- 10.1 賬戶激活
- 10.2 密碼重設
- 10.3 在生產環境中發送郵件
- 10.4 小結
- 10.5 練習
- 10.6 證明超時失效的比較算式
- 第 11 章 用戶的微博
- 11.1 微博模型
- 11.2 顯示微博
- 11.3 微博相關的操作
- 11.4 微博中的圖片
- 11.5 小結
- 11.6 練習
- 第 12 章 關注用戶
- 12.1 “關系”模型
- 12.2 關注用戶的網頁界面
- 12.3 動態流
- 12.4 小結
- 12.5 練習