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>

等等・・・
详细的內容请参考这里

 作绿色的按钮的移动到微博的主页「https://www.weibo.com/」的连接(<a> 微博
要怎么设定呢?



1 <a href="https://www.weibo.com" 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」上设定,这样子的主页。