<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國際加速解決方案。 廣告
                # 1.3 用戶界面(UI)設計 ## 概要: 本課時介紹 Bootstrap,以及 Bootswatch UI,通過 Gem,將 UI 文件安裝到 Rails 項目中。介紹項目 UI 設計思路及工具。 ## 知識點: 1. Bootstrap 介紹 1. Bootswatch 工具及 Gem 1. mybalsamiq 工具 ## 正文 ### 1.3.1 Bootstrap 大家好,在編寫我們項目代碼之前,我先講一個大約十年前的事情。2005年創業初期,為客戶制作網站,有一次,一個客戶找到我們,說要開發一個賣花的網站,因為新品即將上市,所以有一些急。于是,我們給出了厚厚的幾頁所謂的“設計方案”。但是客戶幾分鐘就否定了,說:“我們的項目很簡單,只需要購買者看到新品就可以,可以預定,我們貨到付款”。于是,我們把多余的設計去掉后,之前那份設計方案只剩下三分之一了。但是客戶又很快否定了我們的方案,說:“我能先看看樣子么?” 于是,我們讓設計師設計好了幾個樣子,交給客戶,客戶又把我們否定了,而且顯得不耐煩。他抓取一張紙和一支鉛筆,在紙上畫出了他要的樣子。什么樣子呢? ![](https://box.kancloud.cn/2015-08-18_55d2e47ebd34d.png) 在稍后商討細節后,我們很快完成了代碼功能。 這件事情給我的啟發是: > 代碼之前,先看到樣子 在客戶畫出樣稿前,我們并不知道新品只有幾種,而且這個網站只放置新品。它所突出的是在線預定和貨到付款,即宣傳了新品,又使用了另一種貼近新品的設計風格。 回到我們的例子,我們還沒開始 Rails 項目之前,要先為它設計一個樣子出來。有些難度么?我們先講一個接下來要幫助我們的前端設計框架:Bootstrap。 > Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。[1] 它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范,它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。百度百科 先給大家 Bootstrap 的 [官網](http://getbootstrap.com/),這里可以找到它的 [源代碼](https://github.com/twbs/bootstrap),這里有中文的學習資料 [Bootstrap 中文網](http://www.bootcss.com/)。 在讀 [Bootstrap 起步](http://v3.bootcss.com/getting-started) 之前,我先介紹下它的特點: - 一致的設計風格,豐富的Web組件,下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、面包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等 - 支持多個主流瀏覽器 - HTML5和CSS3開發 - 在jQuery的基礎上設計,兼容大部分jQuery插件 - 平臺自適應,即便在手機,pad 打開網站也沒問題 > 什么?ie6?請閱讀10年前的教程吧,如果還能找到的話。 在 [這里](http://v3.bootcss.com/getting-started/#examples),你可以很快看到 Bootstrap 的模樣了。接下來的章節里,我們將按照這個樣子,設計我們的 shop。 ~~~ rails new shop ~~~ 好的,我們給它添加個幾個 gem。 ~~~ gem "therubyracer" gem "less-rails" gem "twitter-bootstrap-rails" ~~~ 然后,運行 `bundle install` 之后,我們給出一個新的命令,scaffold: `rails g scaffold product name price:decimal description:text` scaffold 命令我們將在下一章詳細介紹,這里,我們創建了一個資源,Product。 然后,我們繼續運行以下幾個命令 ~~~ # 更新 db 解構 rake db:migrate # 安裝 bootstrap 文件 rails generate bootstrap:install # 創建一個 layout rails g bootstrap:layout # 創建資源模板 rails g bootstrap:themed Products ~~~ 是不是還有不熟悉的命令,我們后面的章節詳細介紹他們,現在,你可以運行 `rails s` 來啟動 Rails 項目了,訪問 `http://localhost:3000/products`,你會看到這個頁面,它就是 Bootstrap 風格的頁面了。 ![](https://box.kancloud.cn/2015-08-18_55d2e47ece983.png) 把它縮小看看 ![](https://box.kancloud.cn/2015-08-18_55d2e47edb589.png) 是的,即便你用手機來訪問它,也不會讓頁面亂掉。 我們用的是這個 gem,你可以詳細的看看它的文檔。 [https://github.com/seyhunak/twitter-bootstrap-rails](https://github.com/seyhunak/twitter-bootstrap-rails) ### 1.3.2 Bootswatch > 是不是太千篇一律了呀? 的確,大多數項目開始的時候都是一個樣子,是件讓人氣餒的事情。我們來給它增加點不同。 這里再介紹一個可以幫助我們的項目,[Bootswatch](http://bootswatch.com/) 我們在剛才的 Gemfile 中,再添加兩個 gem: ~~~ gem 'twitter-bootswatch-rails' gem 'twitter-bootswatch-rails-helpers' ~~~ 在我們的項目中,運行下面的兩個新命令: ~~~ rails g bootswatch:install cerulean # 安裝該 theme 的基礎文件 rails g bootswatch:import cerulean # 導入一個線上的 theme 的變量文件 ~~~ 注:我們使用的 Gem 中,會存在 bug,或者,版本更新導致的 Gem 不匹配, 也會引起 Bug。 這時候,我們可以幫助作者改進它。當然,你要先十分確定,它是一個 Bug! 我們修改一下 `application.css` 中的引用: ~~~ *= require cerulean/loader *= require cerulean/bootswatch ~~~ 我們可以看到 ![](https://box.kancloud.cn/2015-08-18_55d2e47eec241.png) 當然,事情并未像上面寫的如此容易。我在為大家寫這段代碼的時候,就遇到了很多問題,還好,都一一解決了。你可以到 [這里](https://github.com/liwei78/rails-practice-code/tree/master/chapter_1) 看到我調試好的代碼。 在 [這里](https://github.com/liwei78/rails-practice-code/tree/master/chapter_1/shop-with-bootswatch),我為大家選擇了三套不同的 bootswatch theme,大家可以練習。 Bootswatch-rails 的代碼在這里: [https://github.com/scottvrosenthal/twitter-bootswatch-rails](https://github.com/scottvrosenthal/twitter-bootswatch-rails) > Rails 和 Ruby 一樣,是為有經驗的開發者準備的。 作為初學者,Rails 的確會為大家提出很多問題,有些問題會占用大量的時間,讓人失去耐心。雖然開發了很多年的 Rails 項目代碼,我也會經常遇到各種問題。所以,請大家耐心,讓我們一起弄清思路,慢慢解決。 #### 1.3.3 UI 設計 本節,讓我們輕松一下。 你有注意到 1.3.1 里的那張圖么?對了,它是用 [www.mybalsamiq.com](https://www.mybalsamiq.com/) 畫的。 讓我們繼續為即將開始的 shop 項目,畫幾張圖吧。 首先,我們想想,我們需要哪些頁面。 1. 首頁,列出我們推薦的商品(Product) 1. 列表頁,根據選擇的分類,列出該分類下的商品 1. 展示頁,查看每一個商品 好的,我們畫出心里構思好的頁面。 我們的首頁 ![](https://box.kancloud.cn/2015-08-18_55d2e47f05a20.png) 我們的列表頁 ![](https://box.kancloud.cn/2015-08-18_55d2e47f17012.png) 我們的展示頁 ![](https://box.kancloud.cn/2015-08-18_55d2e47f2b9d0.png) 我想講幾個我們設計上的細節。 - 首頁,我們展示的是屬性為置頂(top = true)的商品。 - 列表頁,我們有商品分頁。 - 展示頁,當前分類和導航中的分類是選中狀態。 當然,我們的原型設計不止這三張圖,在后面的代碼階段,我們將會根據需要,再設計其他的頁面。 下一節,我們將使用 `scaffold` 這個命令,來創建我們的第一個資源。我們下一節再見。
                  <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>

                              哎呀哎呀视频在线观看