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

把網頁設定的更方便吧!

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; }