rails&ruby**章节:5-6**

Bootstrap

 

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>

 

---

<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 class="container">
<%= yield %>
</div>

 

---

Rails link_to <%= link_to "Sign in", '#' %> 参数链接文本 ， 链接地址

<%= link_to "Sign up now!", '#', class: "btn btn-large btn-primary" %> class 中进行css 样式的定义

<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %> 
生成 <img alt="Rails" src="/assets/rails.png" /> app/assets/images/

 

---
gem 'bootstrap-sass', '2.3.2.0'
bundle install

config/application.rb

require File.expand_path('../boot', __FILE__)
.
.

module SampleApp
class Application < Rails::Application
.
.
.
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
end

 

创建
app/assets/stylesheets/custom.css.scss
这个目录的所有的css 都会自动添加在application.css ?

引入bootstrap
app/assets/stylesheets/custom.css.scss
@import "bootstrap";

定义比较好看的css 用在自己的application中
app/assets/stylesheets/custom.css.scss

---

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 %>
146
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

<%= render 'layouts/shim' %>    

　　　　　　　　#加载文件 app/views/layouts/_shim.html.erb 

 　　　　　　　　下划线是局部视图的约定

</head>
<body>

将头部header 切到 app/views/layouts/_header.html.erb
下划线是局部视图的约定

<div class="container">
　　　　<%= yield %>
</div>
</body>
</html>

---
头部视图  <%= render 'layouts/header' %>

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>

---
底部视图 <% render 'layouts/footer' %>

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>

--- app/assets/stylesheets 目录中的所有css 都会自动载入

app/assets/stylesheets/custom.css.scss

 

--- assert 存放资源文件

ls app/assets/

images javascripts stylesheets

 

---清单文件

css 清单文件

app/assets/stylesheets/application.css

/*
* This is a manifest file that'll automatically include all the stylesheets
* available in this directory and any sub-directories. You're free to add
* application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style
* scope.
*= require_self      加载 app/assets/stylesheets 目录之下的所有文件
*= require_tree .
*/

关键之处是css注释 加载的默认文件

 

--预处理引擎

需要预处理的文件类型  .scss  / .coffee   /  .erb

foobar.js.coffee            CoffeeScript预处理引擎处理

foobar.js.erb.coffee      CoffeeScript引擎和ERb引擎处理

 

asset pipeline 将所有css文件集中到一个文件中并压缩提高效率

 

---scss 

 

 

--- 布局中的链接

<%= link_to "About", about_path %>

/
root_path
 
/about
about_path
 
/help
help_path
 
/contact
contact_path
 
/signup
signup_path
 
/signin
signin_path

路由和url 映射关系

 

--- rails 路由

定义具体路由：

get 'static_pages/help'
改为
match '/help', to: 'static_pages#help', via: 'get'

match 和 get 效果是一样的

match会自动创建命名路由 
　　about_path -> '/about'
   about_url-> 'http://localhost:3000/about'
 

 

 

 

--p169--

 

posted @ 2017-03-19 13:57  silvercell  阅读(1388)  评论(0)    收藏  举报