<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # 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——這沒什么關系,因為構思圖沒必要畫出每個細節。 ![home page mockup 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd0288306.png)圖 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(如 `&lt;!DOCTYPE html&gt;` 所示)。因為 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` 屬性的內容會在圖片無法加載時顯示,例如在針對視覺障礙人士的屏幕閱讀器中。 ![layout no logo or custom css bootstrap 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd029b169.png)圖 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 也沒有任何樣式,不過顏色搭配和注冊按鈕看起來都不錯。 ![sample app only bootstrap 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd02b416c.png)圖 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; } ``` ![sample app universal 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd02d0a42.png)圖 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; } ``` ![sample app typography 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd02e88f0.png)圖 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) 所示。 ![sample app logo 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd030facc.png)圖 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 表達式并將結果插入模板中要使用 `&lt;%= …? %&gt;`。)注意,文件名 `_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) 所示。 ![site with footer bootstrap 3rd edition](https://box.kancloud.cn/2016-05-11_5732bd032946e.png)圖 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 id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看