7 : 把網頁設定的更方便吧!

上章:作作看網頁!

Header7

0 : 這個章的目的

 把作的網頁設定的更方便更好看吧!
第5章第6章,解釋了用Ruby on Rails作網頁的方法,使用各個資料的操作作了網頁。
可是現在的網頁又不方便又不好看。在這裡修修這些設定吧!

在這個章設定 那麽,開始設定吧!


1 : 完成作連結吧!

那麽,先設定網頁的移動,連結吧!
網頁的移動(連結),例如說移動到顯示全部的資料(index)的網頁的話,

1 <a href="/posts">返回主頁</a>

用這樣子顯示內容。
詳細請參考這裡
這個章的目的是,
顯示一個資料(show)」的網頁上,顯示跟下面的圖像一樣子的「打入編輯的資料(edit)」的網頁的連結, Chrome posts 1 add edit顯示全部的資料(index)」的網頁上,顯示跟下面的圖像一樣子的「打入新的資料(new)」的網頁的連結, Chrome posts all add new 的設定內容。
那麽,做做看吧!


 ① : 設定移動到edit網頁的連結


首先,設定移動到打入編輯的資料(edit)的網頁的連結吧!

還記得網頁的移動要怎麼設定呢?
※ 不記得的話,請參考這裡

在這裡設定的是「顯示一個資料(show)」的網頁上,追加移動到「打入編輯的資料(edit)」的連結。 Chrome posts 1 add edit
這一次要在顯示一個資料(show)的網頁上設定網頁的顯示,所以在show.html.erb上追加設定。

用 Sublime Text 打開的myapp裡的app > views > posts文件夾哩,打開show.html.erb吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,按照下面的內容,編輯內容吧!

 show.html.erb(追加第2、6、8行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 <h1>投稿</h1> <hr> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %> <hr> <p><a href="/posts">返回主頁</a></p> <p><a href="/posts/<%= @post.id %>/edit">編輯投稿</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete">刪除投稿</a></p>

設定好了之後,移動到「myapp」,


 使用Windows移動的方法,請參考這裡


 terminal
1 2 3 cd Desktop cd rails_project cd myapp

那麽打開要顯示網頁的服務器吧!

 terminal
 使用Windows的話,請使用「命令提示符」吧。
1 rails s

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。



完了之後,打開看「0.0.0.0:3000/posts/1」吧!
 使用Windows的話,打開看「localhost:3000/posts/1」吧。 Chrome posts 1 add edit 畫面上有顯示連結嗎?
連結追加之後,打開看這個連結吧! Chrome posts 1 edit 1 移動到「打入編輯的資料」的網頁了嗎?
那麽,解釋內容吧!

打入編輯的資料(edit)」的網頁,從

 瀏覽器
1 0.0.0.0:3000/posts/1/edit

 使用Windows的話,打開localhost:3000/posts/1/edit

(詳細請參考這裡
在這裡的連結上也設定這個url。
連結是
<a href="移動到的url">顯示的文字</a>
設定(詳細請參考這裡)。

「0.0.0.0:3000」的網頁可以用「/」省略,所以移動到「0.0.0.0:3000/posts/1/edit」的連結(點擊後會移動網頁的文字)要

1 <a href="/posts/1/edit">編輯投稿</a>

這樣子設定。
在現在的狀況,全部的「顯示一個資料(show)」的網頁會移動到「id是1」的「打入編輯的資料」的網頁。可是在「id是2」的網頁的連結也只能移動到「id是1」的「打入編輯的資料」的網頁

所以把這個設定,改成可以移動到在打開的網頁id的「打入編輯的資料(edit)」的網頁吧。

那麽,設定移動到各個網頁id的「打入編輯的資料(edit)」的網頁吧。

「顯示一個資料(show)」的網頁的資料操作,用下面的內容。

 posts_controller.rb
1 2 3 def show @post = Post.find(params[:id]) end

參考這個,設定看用「@post」移動到各個網頁id的「打入編輯的資料(edit)」的網頁的連結吧!
※ 如果不知道的話,參考這裡吧



 show.html.erb
1 <p><a href="/posts/<%= @post.id %>/edit">編輯投稿</a></p>


 ② : 設定移動到new網頁的連結


移動到「edit」網頁的連結的設定也好了,接着設定移動到打入新的資料(new)的網頁的連結的設定吧!

選擇全部的資料(index)的網頁上,追加下面圖像一樣的設定吧! Chrome posts all add new
選擇全部的資料(index)的網頁,要在index.html.erb追加設定。那麽開始做吧!

先用Sublime Text打開myapp之後,打開index.html.erb吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


移動到「打入新的資料(new)」的網頁的連結要怎麼設定好呢?
※ 「打入新的資料(new)」的網頁,可以用瀏覽器打入「0.0.0.0:3000/posts/new」移動(詳細的內容請參考這裡)。


1 <a href="/posts/new">新增投稿</a>

那麽,在index.html.erb設定內容吧!

 index.html.erb(追加第9行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 <h1>投稿一覽</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %> <a href="/posts/new">新增資料</a>

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


服務器打開之後,打開「0.0.0.0:3000/posts」吧。
 使用Windows的話,打開「localhost:3000/posts」吧。 Chrome posts all add new 有沒有顯示連結嗎?
有顯示連結的話,打開看這個連結吧! Chrome posts new 1 移動到網頁了嗎?

像這樣,移動到打入新的資料(new)的連結要,

1 <a href="/posts/new">新增投稿</a>

這樣子設定。
如果資料庫的名字不同的話,順着資料庫的名字設定內容吧!
 移動到「tweets」資料庫的「打入新的資料(new)」的網頁的連結要怎麼樣設定好呢?


1 <a href="/tweets/new">新增推特</a>


 ③ : 總結


在這裡解釋了作連結的方法,在這裡複習連結的內容。

設定的內容請參考這裡
在這裡複習

這個五個網頁的連結。

  • 移動到「顯示一個資料(show)」的網頁的連結

  • 例如說

    1 <a href="/posts/1">投稿1</a>

    這樣子
    <a href="/資料庫的名字/id號碼">顯示的文字</a>
    
    顯示連結(請參考這裡)。
  • 移動到「顯示全部的資料(index)」的連結

  • 例如說

    1 <a href="/posts">看投稿一覽</a>

    這樣子
    <a href="/資料庫的名字" >顯示的名字</a>
    
    顯示連結(請參考這裡
  • 打入新的資料(new)

  • 例如說

    1 <a href="/posts/new">新增投稿</a>

    這樣子
    <a href="/資料庫的名字/new">顯示的名字</a>
    
    顯示連結。
  • 打入編輯的資料(edit)

  • 例如說

    1 <a href="/posts/1/edit">編輯投稿</a>

    這樣子
    <a href="/資料庫的名字/id號碼/edit">顯示的文字</a>
    
    顯示連結。
  • 刪除資料(destroy)

  • 例如說

    1 <a href="/posts/1" data-method="delete">刪除投稿1</a>

    這樣子
    <a href="/資料庫的名字/id號碼" data-method="delete">顯示的文字</a>
    
    顯示內容(詳細的內容請參考這裡

到這裡解釋了移動到網頁的連結的設定方法。
接着做網頁的裝飾吧!

設定的內容,請參考這裡


2 : 用Bootstrap裝飾網頁

連結的設定好了,接下把網站顯示的更漂亮吧!
用html作的網頁的裝飾是,

 style.css
1 2 3 4 5 .title{ color:white; font-size:30px; background-color:black; }

跟上面一樣,使用CSS文件設定內容。
用 Ruby on Rails作的網頁也跟這個一樣設定。

可是,從頭到尾設定這個CSS文件有一點難。
為了省略作CSS文件的工夫,做網站的時候有時候會用已經作好的CSS文件。

在這個章使用Twitter社開發的「Bootstrap,裝飾網頁的內容。

在這個章使用Bootstrap設定的CSS的裝飾,設定網頁的內容吧!

 ① : 導入Bootstrap!


首先,導入Bootstrap吧!
在Ruby on Rails導入「Bootstrap」的時候,要用上次在第三章說明的「gem」


 使用Windows的話,從這裡導入Bootstrap。

 完了之後,從這裡看下一個內容。



先複習這個「gem」的內容吧。

「gem」是,在Ruby on Rails上面做網頁的時候使用的工具。用這個可以作「用戶管理」或者「保存圖像」等等的非常方便的機能。

在「Gemfile」上設定使用的工具之後,在terminal上打入「bundle install」之後可以使用了。


用這個gem,導入Bootstrap吧!
首先在Sublime Text上打開myapp之後,打開裡面的Gemfile吧!
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡
Sublime text open gemfile 在這個Gemfile文件上,追加設定。

 Gemfile
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。
26 27 28 29 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3'

在自己喜歡的地方,追加這個4行吧。
完了之後,在terminal上移動到myapp之後,

terminal
1 2 3 cd Desktop cd rails_project cd myapp

打入bundle install,安裝gem吧!

terminal
1 bundle install

 不會動的時候,先刪除Gemfile.lock之後再試試看吧。

有沒有顯示下面圖像一樣子的顯示嗎? Terminal bundle install bootstrap 做完了之後,在terminal上打入

terminal
1 rails g bootstrap:install

上面的內容吧。 Rails g bootstrap install 有沒有顯示跟上面圖像一樣子的顯示嗎?
到這裡「Bootstrap」的導入完成了!

※ 在這邊作的CSS文件不能從這裡看內容,但是可以從Bootstrap的網頁下載文件,可以參考。雖然裡面的內容是超長・・・
導入之後在terminal上打入rails s,起動服務器之後在瀏覽器打開「0.0.0.0:3000/posts」吧!

像下面一樣,顯示的內容有變嗎? Chrome bootstrap 1 使用這個「Bootstrap」,吧網頁裝飾的更漂亮吧!


 ② : 使用Bootstrap


在這裡,使用Bootstrap作作看
  • 按鈕
  • 輸入框
  • 網頁上面的巡覽列
這個三個顯示。
在這個之前・・・

現在的網頁, Chrome bootstrap 1 像上面的圖像一樣,顯示的有一點緊緊的。
先從這裡更改。

 ⑴ : container


在這裡把現在緊緊的網頁, Chrome bootstrap container 改成像上面圖像一樣!
這個網頁的設定,也可以用Bootstrap做!
首先,用Sublime Text打開看myapp吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


之後,打開app > views > layouts > application.html.erb吧。

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>

有沒有顯示上面一樣子的文件嗎
在這個文件裡有,剛開始學的「<html>」或者「<head>」等等呢。
 先簡單的說明這裡的內容。

10 <%= yield %>

在這裡,顯示show.html.erb或者index.html.erb等等顯示網頁的設定文件。

應為「show.html.erb」等等的文件都埋在「<%= yield %>」裡面,所以在各個顯示網頁的文件裡不用設定「<html>」或者「<head>」的內容。

 各個CSS文件等等裝飾網頁的設定文件都設定在

5 6 7 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %>

這個地方。
※ 「stylesheet_link_tag」在設定CSS文件,「javascript_include_tag」在設定叫做javascript的作動的網頁顯示的文件,「csrf_meta_tags」在設定電腦安全。
那麽在application.html.erb上加幾個設定,改成寬闊的網頁吧!

 application.html.erb(第10行〜第12行)
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


做好了的話,打開「0.0.0.0:3000/posts」吧!
 使用Windows的話、打開「localhost:3000/posts」吧。

顯示像下面圖像一樣的畫面嗎? Chrome bootstrap container

這一次出現新的html<div>
剛開始解釋這個<div>吧!

例如說,像下面的html文件裡的,

 sample.html
1 2 3 <h1>RED</h1> <p>GREEN</p> <small>BLUE</small>

「<h1>」「<p>」「<small>」這個各個文字上設定

 style.css
1 2 3 4 .mysyle{ color:white; background-color:black; }

的內容的話,

 sample.html
1 2 3 <h1 class="mystyle">RED</h1> <p class="mystyle">GREEN</p> <small class="mystyle">BLUE</small>

可以像上面一樣,追加class
但是這樣寫裡面寫三次「class="mystyle"」,重複有一點多。
像這樣的時候,一起設定CSS的文字是「<div>」。
用「<div>」,可以把上面的設定寫的像下面一樣。

 sample.html
1 2 3 4 5 <div class="mystyle"> <h1>RED</h1> <p>GREEN</p> <small>BLUE</small> </div>

在「<div>」跟「</div>」圍起來的地方裡,會使用用「<div>」設定的「class」的內容。
所以在這一次的文件裡的設定是

10 11 12 <div class="container"> <%= yield %> </div>

對「yield」(「show.html.erb」等等的文件在埋在裡面)上,適用「class="container"」的設定。

這個「class="container"」的設定是Bootstrap的設定,在網頁上追加空格。

 導入Bootstrap之後,在「application.html.erb」上追加下面的設定。

 application.html.erb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>


 ⑵ : btn


做好了空格的設定,接着從按鈕開始裝飾吧!
首先在顯示全部的資料(index)的網頁上作的移動到打入新的資料(new)的連結(移動網頁的文字)改成 Chrome posts all bootstrap btn 這樣子的 藍色的按鈕 吧!
用Bootstrap作藍色的按鈕的時候,在「class」指定「btn」跟「btn-primary」

用Sublime Text打開myapp之後,打開app > views > posts > index.html.erb吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開後,編輯文件的內容吧。

 index.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 <h1>投稿一覽</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %>:<%= p.name %></a></p> <p><%= p.content %></p> <hr> <% end %> <a href="/posts/new" class="btn btn-primary">作投稿</a>

更改按鈕以外還有編輯第4行的內容,請不要忘記。
在這裡,移動到顯示一個資料(show)的按鈕的文字用「id號碼:名字」。
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


起動服務器之後,打開看「0.0.0.0:3000/posts」吧。
 使用Windows的話,打開看「localhost:3000/posts」吧。

有顯示下面一樣的畫面嗎? Chrome posts all bootstrap btn 這樣子用Bootstrap作藍色的按鈕的時候,
<a class="btn btn-primary">顯示的文字</a>
像這樣子,追加class="btn btn-primary"的內容設定。

1 <a href="/posts/new" class="btn btn-primary">作投稿</a>

按鈕的顏色不只是藍色而已,還可以用更多顏色。

如果是紅色的按鈕 的話,使用btn btn-danger

1 <a href="/posts/new" class="btn btn-danger">紅色的按鈕</a>

如果是綠色的按鈕 的話,使用btn btn-success

1 <a href="/posts/new" class="btn btn-success">綠色的按鈕</a>

如果是淺藍色的按鈕 的話,使用btn btn-info

1 <a href="/posts/new" class="btn btn-info">淺藍色的按鈕</a>

等等・・・
詳細的內容請參考這裡

 作綠色的按鈕的移動到博客來的主頁「http://www.books.com.tw/」的連結(<a> 博客來
要怎麼設定呢?



1 <a href="http://www.books.com.tw/" class="btn btn-success">博客來</a>

這個按鈕的設定可以對什麼都可以適用,不只是「<a>」而已還可以在「<h1>」或者「<p>」等等,普通的文字上也可以適用。

最後,在「new」網頁,「edit」網頁的發送按鈕上,設定這個內容, Chrome posts new bootstrap btn Chrome posts edit bootstrap btn 設定像上面的圖像一樣的顯示吧!
首先從「new」網頁開始做。
首先打開看app > views > posts > new.html.erb吧。
打開之後,編輯new.html.erb的內容吧。

 new.html.erb(追加第11、13、14行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "登錄", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">返回主頁</a>

有沒有更改了嗎?
不只是按鈕的設定,還有線的設定(<hr>)。請不要忘記設定! Chrome posts new bootstrap btn 像上面的圖像一樣,顯示按鈕了嗎?

第16行是剛才有設定過的內容應該可以理解,但是第14行有一點難理解。

 new.html.erb(第14行)
14 <%= f.submit "登錄", :class => "btn btn-primary" %>

後面有寫着:class => "btn btn-primary",可以想像在指定「class」。

用發送按鈕指定「class」的時候,追加
,:class => "class的名字"
的內容!
在這裡設定「btn」跟自己喜歡的顏色,可以設定按鈕。

 設定看紅色的按鈕


1 <%= f.submit "登錄", :class => "btn btn-danger" %>

 編輯在設定edit」的「edit.html.erb」文件, Chrome posts edit bootstrap btn 跟上面的圖像一樣,顯示按鈕吧!
※ 在答案的上面放鼠標上,可以看到答案。


 edit.html.erb(編輯第9、11、12行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。
1 2 3 4 5 6 7 8 9 10 11 12 <h1>編輯投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content %> <p>地方</p> <%= f.text_field :place %> <hr> <%= f.submit "編輯投稿", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">返回投稿資料</a>

 在這個章設定好的「show」的網頁上的三個連結 Chrome posts 1 add edit 改成下面一樣的按鈕吧! Chrome posts show bootstrap btn ※ 在答案的上面放鼠標上,可以看到答案。
 show.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 <hr> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><%= @post.place %></p> <hr> <p><a href="/posts" class="btn btn-info">返回主頁</a></p> <p><a href="/posts/<%= @post.id %>/edit" class="btn btn-success">編輯投稿</a></p> <p><a href="/posts/<%= @post.id %>" data-method="delete" class="btn btn-danger">刪除投稿</a></p>

完了之後,自己編輯看看「create」「update」「destroy」的網頁吧!

 用Bootstrap設定按鈕的時候、在「class」裡設定「btn」跟喜歡的按鈕的種類。

 edit.html.erb
1 <%= f.submit "編輯資料", :class => "btn btn-primary" %>


 ⑶ : form-control


設定好按鈕了嗎?
更改一下「class」的內容就可以設定裝飾,應該設定不會那麽難。

接着跟「btn」同樣的方法,裝飾看輸入框的內容吧。
現在的輸入框改成, Chrome posts new bootstrap btn 這樣子漂亮的輸入框吧! Chrome posts new bootstrap form control myform
用Bootstrap作輸入框的時候,要在class裡指定form-control
首先更改「new」的輸入框(new.html.erb)吧!

用Sublime Text打開myapp之後,打開app > views > posts > new.html.erb吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後,參考下面編輯內容吧。

 new.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name, :class => "form-control" %> <br> <p>内容</p> <%= f.text_area :content, :class => "form-control" %> <br> <p>地方</p> <%= f.text_field :place, :class => "form-control" %> <hr> <%= f.submit "登錄", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">返回主頁</a>

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


服務器起動之後,打開「0.0.0.0:3000/posts/new」吧。
 使用Windows的話,打開「localhost:3000/posts/new」吧。

有沒有顯示下面圖像一樣的畫面嗎? Chrome posts new bootstrap form control all 雖然有一點長,但顯示比較好的輸入框了吧。
用Bootstrap設定輸入框的時候,要在「class」裡設定form-control

輸入框用「<%= 」跟「%>」作,所以「class」使用
,:class => "class的名字"
設定。

 用Bootstrap設定打入數字「age」的輸入框的時候要怎麼設定呢?
※ 作打入數字的輸入框的方法請參考這裡


1 <%= f.number_field :age, :class => "form-control" %>

 用Bootstrap設定edit」的網頁的輸入框吧!


 edit.html.erb(追加第5、6、8行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>編輯投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content, :class => "form-control" %> <br> <p>地方</p> <%= f.text_field :place, :class => "form-control" %> <hr> <%= f.submit "編輯資料", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">返回投稿</a>

到這裡輸入框的設定是好了,但是現在的輸入框太長了。在這裡設定輸入框的長度吧!
設定長度的時候,在CSS上設定長度。

長度要在CSS文件上追加
width:數字px;
這個設定。
※ px這個單位、自己設定自己看看長度吧。
  要舉例子的話,右邊的滑動桿的上下是400px。


那麽設定「new」網頁的設定文件「new.html.erb」吧!

首先在CSS的「class」上追加設定。在這裡追加my-form的名字的設定吧。

參考下面的內容,編輯new.html.erb吧。

 new.html.erb
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <h1>作投稿</h1> <hr> <%= form_for @post do |f| %> <p>名字</p> <%= f.text_field :name, :class => "form-control my-form" %> <br> <p>内容</p> <%= f.text_area :content, :class => "form-control my-form" %> <br> <p>地方</p> <%= f.text_field :place, :class => "form-control my-form" %> <hr> <%= f.submit "登錄", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts" class="btn btn-info">返回主頁</a>

CSS文件裡還沒設定內容,所以在這個my-form裡設定
width:500px;
的內容吧!
事先,自己作設定裝飾的CSS文件。
「app > assets > stylesheets」上,保存style.scss的文件吧。
※ 保存文件的方法,請參考這裡
※ 名字用什麼都可以,但是在這裡設定最簡單的「style.scss」。

style.scss上,追加CSS的設定吧。
可是,仔細看文件的名字不是「style.css」而是「style.scss」呢。這是為什麼呢?

在Ruby on Rails上使用的CSS文件的時候,如果後面要使用scss設定CSS文件的話,

1 <link rel="stylesheet" href="style.css" type="text/css" />

不用加這個,就可以使用CSS文件。
※ CSS的寫法請參考這裡
 在這個「style.scss」上,
width:500px;
設定看「my-form」吧!這個設定的方法跟設定CSS文件的方法一樣。
※ CSS的寫法請參考這裡


1 2 3 .my-form{ width:500px; }

到這裡,設定輸入框的設定好了。
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


起動服務器之後,打開「0.0.0.0:3000/posts/new」吧。
 使用Windows的話,打開「localhost:3000/posts/new」吧。

有沒有顯示跟下面的圖像一樣的輸入框了嗎? Chrome posts new bootstrap form control myform
 同樣在「edit」的網頁的輸入框裡設定「my-form」的內容吧!


 edit.html.erb(編輯第5、8行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


1 2 3 4 5 6 7 8 9 10 11 12 13 <h1>編輯投稿</h1> <hr> <%= form_for @post do |f| %> <p>内容</p> <%= f.text_area :content, :class => "form-control my-form" %> <br> <p>地方</p> <%= f.text_field :place, :class => "form-control my-form" %> <hr> <%= f.submit "編輯投稿", :class => "btn btn-primary" %> <% end %> <hr> <a href="/posts/<%= @post.id %>" class="btn btn-info">返回投稿</a>

完了之後打開「0.0.0.0:3000/posts/1/edit」吧!
 使用Windows的話,打開「localhost:3000/posts/1/edit」吧。

有沒有顯示下面圖像一樣的畫面了嗎? Chrome posts edit bootstrap myform
 用Bootstrap設定輸入框的時候,要在「class」裡設定「form-control」。

 edit.html
1 <%= f.text_field :place, :class => "form-control my-form" %>


 ⑷ : navigation-bar


到這裡作好了輸入框跟按鈕了,網頁也變了漂亮一點吧。
最後解釋,用Bootstrap的「class」顯示網頁上面的巡覽列(navigation-bar)吧。

在這裡顯示下面圖像一樣的畫面。 Chrome posts all bootstrap nav 3
那麽開始作吧!
首先用Sublime Text打開myapp之後,打開app > views > layouts > application.html.erb吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


在這個application.html.erb上面設定內容。

那麽在第9行的

 application.html.erb(第9行)
9 <body>

後面追加

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

的內容吧!應為內容很長,使用複製與黏貼吧。
  • 複製 一起點擊「Command」跟「c」
  •  使用Windows的話,「ctrl」跟「c」

  • 黏貼 一起點擊「Command」跟「v」
  •  使用Windows的話,「ctrl」跟「v」

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


追加內容之後,打開0.0.0.0:3000/posts吧!
 使用Windows的話,打開「localhost:3000/posts」吧。

有沒有顯示下面一樣的畫面嗎? Chrome posts all bootstrap nav 1 上面的遊覽列蓋住網頁的內容顯示的不是那麽好,但是上面應該顯示了巡覽列。
在這裡

10 <a href="/posts" class="navbar-brand">myapp</a>

用「<a>」的連結顯示左邊的「myapp」。點擊這個連結之後會移動到「/posts」的網頁
別的設定方法,等一下再解釋吧!
先修這個遊覽列蓋上來的網頁吧。
修這個遊覽列蓋上來的地方的話,更改顯示「show」或者「index」等等的網頁的

 application.html.erb(第10〜12行)
10 11 12 <div class="container"> <%= yield %> </div>

這個「yield」的位置。

首先在這個「div」上,設定main-page的「class」吧。在這個「class」裡設定網頁的位置的設定。

 <div class="container">上追加「main-page」的class吧!


 application.html.erb(第10〜12行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


10 11 12 <div class="container main-page"> <%= yield %> </div>

那麽在CSS文件「style.scss」上,追加「main-page」的裝飾設定吧。


這個是,用
margin-top:50px;
的內容設定。

想改空格的地方的話,編輯數字的地方。
想在右邊作空格的話使用margin-right:、左邊的話使用margin-left:,下面的話使用margin-bottom:設定。
※ 請參考這裡

首先用Sublime Text打開myapp之後,打開app > assets > stylesheets > style.scss吧。
※ 使用Sublime Text打開文件的方法請參考這裡
 使用Windows的Sublime Text打開文件文件夾的方法請參考這裡


打開之後追加下面的設定吧!

 style.scss(第4〜6行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


4 5 6 .main-page{ margin-top:50px; }

這樣在「main-page」的class裡設定了在上面作50px的空格的內容。

※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


設定好了之後,打開「0.0.0.0:3000/posts」吧!
 使用Windows的話,打開「localhost:3000/posts」吧。

有沒有顯示下面圖像一樣的畫面嗎? Chrome posts all bootstrap nav 2
最後設定看,跟下面一樣 Chrome posts all bootstrap nav 3 在右邊作投稿的連結吧。從這個連結可以移動到「new」的網頁。

右邊的文字的設定在,

 application.html.erb(第22,23行)
19 20 21 22 23 24 25 26 <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav>

這個第22,23行之間,設定。
那麽開始做吧。在上面的第22行後面追加下面的內容。

 application.html.erb(追加第23行)
※ 用半母字母數字打入。一起點擊「Command」跟「s」可以保存內容。
 使用Windows的話,點擊「ctrl」跟「s」可以保存內容。


22 23 24 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts/new">作投稿</a></li> </ul>

在這裡設定的「<li>」跟「</li>」圍起來的地方會在網頁上顯示。
這一次的話,是<a href="/posts/new">作投稿</a>」的地方呢。

那麽,看看內容吧!
※ 一起點擊「Command」跟「c」停止,用rails s打開的服務器之後,再打入「rails s」吧。


 使用Windows的話、
 一起點擊「ctrl」跟「c」停止,用「rails s」打開的服務器之後,再打入「rails s」吧。


打開「0.0.0.0:3000/posts」吧!
 使用Windows的話,打開「localhost:3000/posts」吧。

有沒有顯示下面圖像一樣的網頁嗎? Chrome posts all bootstrap nav 3

 那麽在上面的遊覽列上追加,移動到「/posts」的網頁的連結「返回主頁」(<a>)的內容要怎麼設定好呢?(第23行上放鼠標可以看答案)


 application.html.erb(第22行〜第24行)
22 23 24 <ul class="nav navbar-nav navbar-right"> <li><a href="/posts">返回住頁</a></li> </ul>

移動到別的網頁(「edit」「index」等等),看看顯示的畫面有沒有一樣。

 用Bootstrap作上面的遊覽列的時候,要設定

 application.html.erb(第10行〜第26行)
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container"> <%= yield %> </div> </body>

的內容。
用複製與黏貼打入內容也可以。

在這個裡面,有可以編輯的地方
  • 左邊的文字

  •  application.html.erb
    10 <a href="/posts" class="navbar-brand">myapp</a>

  • 右邊的文字

  •  application.html.erb
    22 23 <ul class="nav navbar-nav navbar-right"> </ul>

    之間設定

    1 <li><a href="/posts/new">作投稿</a></li>

    想顯示的文字。
    辛苦你了。接着做總結。


 ⑸ : 總結


在這裡解釋,用Bootstrap設定的四個裝飾containerbtnform-controlnavigation-bar
  • container

  • 導入Bootstrap之後,首先在application.html.erb追加<div class="container">的設定。
    用這個設定,在緊緊的網頁上作空格。

     application.html.erb
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <title>Myapp</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div class="container"> <%= yield %> </div> </body> </html>

    詳細的內容請參考這裡
  • btn

  • 在class上追加「btn」跟自己喜歡的按鈕的設定。

    按鈕

    1 <a href="/posts/new" class="btn btn-primary">按鈕</a>



    1 <%= f.submit "登錄", :class => "btn btn-danger" %>

    詳細的內容請參考這裡
  • form-control

  • 輸入框的class裡追加「form-control」。


    1 <%= f.text_field :place, :class => "form-control" %>

    詳細的內容請參考這裡
  • navigation-bar

  • 用Bootstrap作瀏覽器的時候,要追加下面的設定。
    應為內容很長,用複製與黏貼打入也可以!

     application.html.erb(第10行〜第26行)
    9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <body> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/posts" class="navbar-brand">myapp</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> </ul> </div> </div> </nav> <div class="container"> <%= yield %> </div> </body>

    在這裡需要編輯的地方是
    • 左邊的按鈕

    •  application.html.erb
      10 <a href="/posts" class="navbar-brand">myapp</a>

    • 右邊的按鈕

    •  application.html.erb
      22 23 <ul class="nav navbar-nav navbar-right"> </ul>

      之間

      1 <li><a href="/posts/new">作投稿</a></li>

      設定內容。

      詳細的內容請參考這裡


 ③ : 總結


在這裡解釋了Bootstrap的用法。


 使用Windows的話,請參考這裡導入Bootstrap吧。



使用 Bootstrap的時候,先在Gemfile裡設定內容之後,導入工具的內容。要導入的時候,現在「Gemfile」設定下面的內容。

 Gemfile
26 27 28 29 gem 'therubyracer' gem 'less-rails' gem 'twitter-bootstrap-rails' gem 'sprockets', '3.6.3'

設定好了之後,打入

 terminal
1 bundle install

安裝gem之後,打入

 terminal
1 rails g bootstrap:install

這樣子Bootstrap的導入完成了。
另外還解釋了用「Bootstrap」作的四個顯示的設定。

Bootstrap裡還有別的用法,有興趣的話自己查查看吧!


3 : 總結

在這個章,說明了作網頁的連結,Bootstrap的導入跟使用方法
使用Bootstrap的CSS文件可以簡單的設定網頁的內容,試試看吧!


在這個章設定的內容請參考這裡吧。

到這裡辛苦了。
在下章 Chrome posts root0.0.0.0:3000」上設定,這樣子的主頁。