把网页设定的更方便吧!:设定一览呢

把网页设定的更方便吧!

Header7

0 : 这个章的目的

 看看「把网页设定的更方便吧!」里设定的內容


1 : 设定一览

把网页设定的更方便吧!」里,做了连接的设定跟Bootstrap的导入。

在这里看看这里设定的內容。
为了安裝Bootstrap的gem,在Gemfile上追加內容。

 Gemfile(第26〜29行目)

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

「Gemfile」里的设定完了之后,打入

 terminal
 使用Windows的话,请使用「命令提示符」吧。

1 bundle install

适用设定。
app > views > layouts > application.html.erb文件里追加,用Bootstrap在画面上作空格的设定跟追加游览列的设定。

 application.html.erb(第11〜31行)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <!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> <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"> <li><a href="/posts/new">作投稿</a></li> </ul> </div> </div> </nav> <div class="container main-page"> <%= yield %> </div> </body> </html>

适用Bootstrap的设定,吧按钮跟输入框装饰的更漂亮。
设定的文件是「app > views > posts」里面的显示网页的文件。

 show.html.erb
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>

 index.html.erb
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>

 new.html.erb
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>

 create.html.erb
1 2 3 4 5 6 <h1>投稿作好了</h1> <p>名字:<%= @post.name %>様</p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">返回主页</a>

 edit.html.erb
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>

 update.html.erb
1 2 3 4 5 6 <h1>投稿编辑好了</h1> <p>名字:<%= @post.name %>様</p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">返回主页</a>

 destroy.html.erb
1 2 3 4 5 6 7 <h1>删除投稿</h1> <hr> <p>名字:<%= @post.name %></p> <p>内容:<%= @post.content %></p> <p>地方:<%= @post.place %></p> <hr> <a href="/posts" class="btn btn-info">返回主页</a>

用CSS文件,设定网页的装饰。
app > assets > stylesheets > style.scss

 style.scss
1 2 3 4 5 6 .my-form{ width:500px; } .main-page{ margin-top:50px; }