Ruby on Rails Tutorial 第五章 完善布局
本章目标:局部视图、Rails路由、Asset Pipeline、Sass
1、Bootstrap是Twitter开发的开源Web设计框架
mockup是网页构思图,在web领域经常称之为“线框图”,用于展示应用最终外观的草图
伺服(p130)
<%= link_to "Help", "#"%>
#link_to的第一个参数是链接文本,第二个参数是链接地址,第三个参数可选,是一个哈希。
Asset Pipeline带来的好处之一是,能自动优化资源文件,在生产环境中使用效果极佳。
2、Sass:它是一种编写CSS的语言,从多方面增强了CSS的功能。主要介绍两个主要的功能:嵌套和变量。Sass文件的扩展
名为.scss,这是CSS句法的一个扩展集。所有有效的CSS文件都是有效的SCSS文件。Rails的Asset Pipeline会自动使
用Sass预处理器处理扩展名为.scss的文件,所以custom.css.scss文件会首先经由Sass预处理器处理,然后引入应用
的样式表中,再发送给浏览器。
(1)嵌套:
.center {
text-align: center;
}
.center h1{
margin-bottom: 10px;
}
嵌套格式如下:
.center {
text-align: center;
h1{
margin-bottom: 10px;
}
}
#logo {
float: left;
margin-right: 10px;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
嵌套格式如下:
#logo {
float: left;
margin-right: 10px;
&:hover { #在SCSS中,用&符合实现对父级元素的引用
color: #fff;
text-decoration: none;
}
}
(2)变量:
h2 {
color:#777;
}
footer {
color:#777;
}
变量使用方法如下:
$light-gray: #777;
h2 {
color: $light-gray;
}
footer {
color: $light-gray;
}
3、布局中的链接
具名路由:<%= link_to "About", about_path %> 如果修改了about_path对应的URL,其他使用about_path的地方都
会自动使用新的URL。
Ruby on Rails Tutorial 第五章 完善布局的更多相关文章
- Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 字符串
1.辅助方法 2.字符串 输入“irb”进入Ruby命令行开发环境,控制器的启动方法是在命令行中执行“rails console”. (1)字符串连接 >>"foo"+ ...
- Ruby on Rails Tutorial 第三章 静态页面
1.生成静态页面 $ rails generate controller StaticPages home help #生成主页和帮助页面的路由.控制器及静态页面 $ rails destroy ...
- Ruby on Rails Tutorial 第六章 用户模型
1.用户模型(1)数据库迁移Rails默认使用关系数据库存储数据,数据库中的表有数据行组成,每一行都有相应的列,对应数据属性.把列名命名为相应的名字后,ActiveRecord会自动把他们识别为用户对 ...
- Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 类
Ruby和其他面向对象的语言一样,使用类来组织方法,然后实例化类,创建对象.1.构造方法使用双引号是字符串的字面构造方法,也可以使用“具名构造方法”,即在类名上调用new方法 >> s=& ...
- Ruby on Rails Tutorial 第四章 Rails背后的Ruby 之 其他数据类型(二)
1.方法 定义如下所示: def string_message(str='') if str.empty? "It's an empty string!" else "T ...
- Ruby on Rails Tutorial 第2版 学习笔记
Ruby on Rails Tutorial 第2版 在线阅读:http://railstutorial-china.org/ 英文版:http://ruby.railstutorial.org/ru ...
- Ruby on Rails Tutorial读书笔记-1
只是怕忘了命令,全部撸一次,记个大概.. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 安装Ruby之前,先要安装RVM: curl -L https://get.rvm.io | bas ...
- Ruby on Rails Tutorial 第一章 之 简介
1.目标:掌握MVC和REST.生成器.迁移.路由.嵌入式Ruby 本书涉及Rails,Ruby语言,Rails默认使用的测试框架(MiniTest),Unix命令行,HTML,CSS,少量的Java ...
- Ruby on Rails Tutorial 第二章 之 toy_app项目搭建
(第一章小结) 第一步:生成项目骨架 $ rails _4.1.6_ new toy_app 第二步:修改Gemfile 第三步:安装gem $ bundle install --without pr ...
随机推荐
- cocos2d-x 添加背景音乐和音效-SimpleAudioEngine
首先,要想使用音效,需要启用音效引擎库CocosDenshion中的SimpleAudioEngine类, #include "SimpleAudioEngine.h" Cocos ...
- redo文件四
v$session_wait 用来查询redo buffer的空间信息 select sid,event,seconds_in_wait,state from v$session_wait where ...
- bzoj 1458 士兵占领(最大流)
[题意] n行m列,第i行必须放L[i],第j列必须放C[j],有障碍格,求满足条件至少需要放多少. [思路] 至少放多少等价于最多不放多少. 对行列分别建XY点,则连边(S,Xi,a)(Yi,T,b ...
- BITED数学建模七日谈之二:怎样阅读数学模型教材
今天进入我们数学建模七日谈的第二天:怎样阅读数学建模教材? 大家再学习数学建模这门课程或准备比赛的时候,往往都是从教材开始的,教材的系统性让我们能够很快,很深入地了解前人在数学模型方面已有的研究成果, ...
- 第二百六十八天 how can I坚持
早上看了个电影<我的少女时代>,挺好看的. 下午从四点玩游戏一直玩到现在,也是疯了. 晚上也没有吃饭,是不是太堕落了. 徐斌他同学今天中午过来,做了个饭,也是服了,好难吃. 还没做好准备, ...
- 转载robots.txt的学习
转载原地址: http://www.monring.com/seo/aspdotseo-robot.html 在国内,robots.txt文件,对于用户来说他是个可有可无的东西,也不会有人去看.但对于 ...
- Umbraco官方技术文档 中文翻译
Umbraco 官方技术文档中文翻译 http://blog.csdn.net/u014183619/article/details/51919973 http://www.cnblogs.com/m ...
- 字串数_hdu_1261(大数极致).java
字串数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...
- iOS 通知中心 NSNotificationCenter
iOS开发中,每个app都有一个通知中心,通知中心可以发送和接收通知. 在使用通知中心 NSNotificationCenter之前,先了解一下通知 NSNotification. NSNotific ...
- Angularjs 整体框架结构
//angulajs整体代码框架结构/** * @license AngularJS v1.2.6 * (c) 2010-2014 Google, Inc. http://angularjs.org ...