5.1 添加一些结构
$ vim app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title><%=full_title(yield(:title))%></title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <!--[if lt IE 9]> <script src="http:..html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%=link_to "sample app",'#',id:"logo"%> <nav> <ul class="nav pull-right"> <li><%=link_to "Home",'#'%></li> <li><%=link_to "Help",'#'%></li> <li><%=link_to "Sign in",'#'%></li> </ul> <nav> </div> </div> </header> <div class="container"> <%= yield %> </div> </body> </html>
想home.html.erb中添加一些元素
<div class="center hero-unit"> <h1>Sample App</h1> <h2> This is the home page for the <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </h2> <%= link_to "Sign up now!",'#',class:"btn btn-large btn-primary"%> </div>
<%= link_to image_tag("rails.png",alt:"Rails"),'http://rubyonrails.org/'%>
rails.png图片需要到http://rubyonrails.org/images/rails.png
下载图片:
5.1.2 Bootstrap和自定义的CSS
把Bootstrap-sass加入Gemfile
source 'https://rubygems.org'
ruby '2.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0'
gem 'bootstrap-sass','2.3.2.0'
bundle install 安装宝石,可能被墙,多试几次。。
添加一行代码,使bootstrap-sass这颗宝石兼容Asset Pipeline
config/application.rb
module SampleApp class Application < Rails::Application config.assets.precompile+=%w(*.png *.jpg *.jpeg *.gif)
添加一个自定义的CSS空文件
app/assets/stylesheets/custom.css.scss
引入Bootstrap:
在app/assets/stylesheets/custom.css.scss中写入
@import "bootstrap";
添加全站使用的CSS
app/assets/stylesheets/custom.css.scss
@import "bootstrap"; html{ overflow-y:scroll; } body{ padding-top:60px; } section{ overflow:auto; } textarea{ resize:vertical; } .center{ text-align:center; } .center h1{ margin-bottom:10px; }
添加一些精美的文字排版样式
app/assets/stylesheets/custom.css.scss
/* typography*/ h1,h2,h3,h4,h5,h6{ line-height:1; } h1{ font-size:3em; letter-spacing:-2px; margin-bootom:30px; text-align:center; } h2{ font-size:1.2em; letter-spacing:-1px; margin-bootom:30px; text-align:center; font-weight:normal; color:#999; } p{ font-size:1.1em; line-height:1.7em; }
添加网站LOGO的样式
app/assets/stylesheets/custom.css.scss
/*header*/ #logo{ float:left; margin-right:10px; font-size:1.7em; color:#fff; text-transform:uppercase; letter-spacing:-1px; padding-top:9px; font-weight:bold; line-height:1; } #logo:hover{ color:#fff; text-decoration:none; }
5.1.3 局部视图
定义了HTML shim的头部局部视图之后的网站布局
$ vim app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title><%=full_title(:title)%></title> <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <%=render 'layouts/shim'%> </head> <body> <%=render 'layouts/header'%> <div class="container"> <%= yield %> </div> </body> </html>
加载HTML shim的那几行换成了render调用
<%= render 'layouts/shim'%>
这行代码会寻找app/views/layouts/_shim.html.erb,执行其中代码并把结果插入视图
_shim.html.erb的开头下划线是局部视图的命名约定,可以在目录中快速定位所有的局部视图
若要局部视图起作用,要写入相应的内容。
HTML shim局部视图
$ vim app/views/layouts/_shim.html.erb
<!--[if lt IE 9]> <script src="http://html5shim.google.com/svn/trunk/html5.js"></script> <![endif]-->
网站头部的局部视图
$ vim app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <%=link_to "sample app",'#',id:"logo"%> <nav> <ul class="nav pull-right"> <li><%=link_to "Home",'#'%></li> <li><%=link_to "Help",'#'%></li> <li><%=link_to "Sign in",'#'%></li> </ul> <nav> </div> </div> </header>
网站底部的局部视图
$ vim app/views/layouts/_footer.html.erb
<footer class="footer"> <small> <a href="http://railstutorial.org/">Rails Tutorial</a> by Michael Hartl </small> <nav> <ul> <li><%= link_to "About",'#'%></li> <li><%= link_to "Contact",'#'%></li> <li><a href="http://news.railstutorial.org/">News</a></li> </ul> </nav> </footer>
网站的布局,包含底部局部视图
$ vim app/views/layouts/application.html.erb
. . . <%=yield%> <%=render 'layouts/footer'%> . . .
添加底部所需的CSS样式
$ vim app/assets/stylesheets/custom.css.scss
/*footer*/ footer{ margin-top:45px; padding-top:45px; border-top: 1px solid #eaeaea; color: #999; } footer a{ color:#555; } footer a:hover{ color:#222; } footer small{ float:left; } footer ul{ float:right; list-style:none; } footer ul li{ float:left; margin-left:10px; }