ROR 第五章 完善布局(一)

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

下载图片：

$ axel 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;
}
posted @ 2013-12-04 18:22  salembe  阅读(258)  评论(0)    收藏  举报