417-zh.srt

1
00:00:00,200 --> 00:00:02,700
卢比译制组 Rubinese.com

2
00:00:02,700 --> 00:00:05,200
译制：Andor

3
00:00:05,200 --> 00:00:07,500
RailsCasts #417 Foundation 框架

4
00:00:07,600 --> 00:00:11,150
本集我们要介绍 ZURB 开发的 Foundation 框架

5
00:00:11,150 --> 00:00:14,040
Foundation 是个前端框架，类似于 Twitter Bootstrap

6
00:00:14,040 --> 00:00:15,929
在第 328 集中介绍过

7
00:00:15,929 --> 00:00:20,380
二者之间最大的不同是 Foundation 使用 SASS 而不是 LESS

8
00:00:20,380 --> 00:00:22,850
可以和 Rails 程序更好地集成

9
00:00:22,850 --> 00:00:24,020
我们来试用一下吧

10
00:00:24,740 --> 00:00:27,740
首先创建一个新 Rails 程序 名为 store

11
00:00:28,620 --> 00:00:29,990
然后进入程序目录

12
00:00:30,600 --> 00:00:33,060
接下来使用脚手架生成一些代码

13
00:00:33,060 --> 00:00:35,470
我要生成一个 product，包含 name 和 price 属性

14
00:00:35,700 --> 00:00:39,290
而且不生成样式表

15
00:00:39,290 --> 00:00:44,440
我们不想使用自动生成的样式，因为我们要使用 Foundation

16
00:00:45,160 --> 00:00:47,100
然后执行数据库迁移

17
00:00:47,960 --> 00:00:49,800
安装 Foundation 的过程很简单

18
00:00:49,800 --> 00:00:54,400
把 zurb-foundation gem 加入 Gmefile 就行

19
00:00:54,400 --> 00:00:56,440
在使用 Rails 3 的程序中要加入 assets 组

20
00:00:56,440 --> 00:01:00,390
而 Rails 4 没有 assets 组了，所以随便加在哪儿都行

21
00:01:01,040 --> 00:01:03,200
然后肯定是要执行 bundle 安装 gem

22
00:01:03,900 --> 00:01:08,130
要完成安装，还要执行 Foundation 提供的安装命令

23
00:01:08,700 --> 00:01:10,870
安装命令会生成一些文件

24
00:01:10,870 --> 00:01:15,140
其中一个是布局文件，所以会询问是否覆盖默认的布局

25
00:01:15,270 --> 00:01:18,410
这里我选择的是覆盖，如果在现有的程序中执行这个命令

26
00:01:18,410 --> 00:01:22,640
要先把原来的布局复制过来，避免丢失内容

27
00:01:23,080 --> 00:01:24,820
下面来看一下生成了什么

28
00:01:24,820 --> 00:01:27,880
Foundation 框架包含 JavaScript 和样式表

29
00:01:27,880 --> 00:01:32,250
如果使用 asset pipeline 就无需手动加入了

30
00:01:32,250 --> 00:01:36,460
打开 application.js 会发现加载了 foundation

31
00:01:36,460 --> 00:01:39,960
而且有行代码，在页面加载时初始化框架

32
00:01:40,180 --> 00:01:43,870
再打开 apllication.css 会发现稍微有点不同

33
00:01:43,870 --> 00:01:46,710
这里加载的是 foundation_and_overrides

34
00:01:46,710 --> 00:01:49,500
这个文件在这儿，是新生成的

35
00:01:49,840 --> 00:01:55,000
这个文件会被 Foundation 加载，通过设置变量定制样式

36
00:01:55,140 --> 00:02:00,900
文件的内容很长，大部分是注释，说明可以修改哪些变量

37
00:02:01,120 --> 00:02:04,220
在文件的最下面，引入了 Foundation 的样式

38
00:02:04,220 --> 00:02:08,120
所有的定制都发生在引入框架样式之前

39
00:02:08,120 --> 00:02:10,600
生成的最后一个文件是布局

40
00:02:10,600 --> 00:02:15,830
其中包含了改变旧版本 IE 表现的默认设置

41
00:02:15,830 --> 00:02:19,459
可以设置 title 的值修改标题

42
00:02:19,459 --> 00:02:24,900
还引入了所需的 JS 文件和样式表

43
00:02:25,900 --> 00:02:28,780
这是程序现在的样子，还不太好看

44
00:02:28,780 --> 00:02:29,960
但我们有办法

45
00:02:30,240 --> 00:02:36,890
我想在页面中加入一些结构，在右边侧栏中添加一些内容

46
00:02:37,400 --> 00:02:41,600
为此我们要了解 Foundation 的网格系统，这个网格有 12 列

47
00:02:41,860 --> 00:02:44,700
我们可以使用 CSS class 设定要使用多少列

48
00:02:44,700 --> 00:02:47,500
可用的 class 有 row 和很多不同列宽对应的 class

49
00:02:47,700 --> 00:02:50,250
加入这些 class 就会得到这样的布局了

50
00:02:51,120 --> 00:02:55,400
接下来我们就使用这个网格系统在程序的布局中添加一个侧边栏

51
00:02:55,700 --> 00:03:00,300
一列是主内容，所以 yield 就放在这列中

52
00:03:00,300 --> 00:03:02,250
另一列中包含一个“About Us”区

53
00:03:02,600 --> 00:03:05,650
首先加入一个 div 标签，class 为 row

54
00:03:05,650 --> 00:03:07,560
再加入两个 div 标签

55
00:03:07,880 --> 00:03:14,790
一个 class 为 large-8 和 columns

56
00:03:14,980 --> 00:03:16,860
另一个 class 是 large-4

57
00:03:16,860 --> 00:03:19,200
这样加起来就是 12

58
00:03:19,840 --> 00:03:22,100
把 yield 加在这里

59
00:03:22,100 --> 00:03:27,790
在下面这个 div 中加入一个 h2，内容为 About Us

60
00:03:28,000 --> 00:03:30,830
再插入 lorem ipsum 占位文本

61
00:03:31,620 --> 00:03:37,180
然后刷新页面，可以看到侧栏中出现了 About Us 区域

62
00:03:37,200 --> 00:03:40,700
这里我用的是大尺寸的列，意味着这是为大尺寸屏幕设计的页面

63
00:03:40,700 --> 00:03:47,300
如果我改变窗口的大小，页面就缩成一列了

64
00:03:47,300 --> 00:03:51,620
也就是说在移动设备上会显示成一列

65
00:03:52,200 --> 00:03:58,000
如果不喜欢这种变化，可以使用小尺寸列宽，在所有尺寸屏幕中页面保持不变

66
00:03:58,320 --> 00:04:03,340
再次刷新页面，即使是小尺寸窗口显示的也是两栏

67
00:04:04,460 --> 00:04:07,180
下面，我们在顶部加入一个导航条

68
00:04:07,180 --> 00:04:12,050
使用 Foundation 即使想实现这种下拉菜单也很容易

69
00:04:12,290 --> 00:04:17,860
只需加入一些 HTML，指定一些 class 来定义页面结构，如下所示

70
00:04:19,060 --> 00:04:26,900
HTML 代码有点多，所以我直接把准备好的目录代码粘贴到页面顶部

71
00:04:26,900 --> 00:04:34,400
这段代码定义了一些占位链接和提示文字，以及其他一些文档中用到的结构

72
00:04:34,560 --> 00:04:39,050
还有一些 class 用来定义导航的各个部分

73
00:04:40,250 --> 00:04:43,910
来看一下效果，刷新页面后可以看到导航出现了

74
00:04:44,059 --> 00:04:48,500
看起来不错，如果我想近一步定制，例如修改背景色，该怎么做呢

75
00:04:48,700 --> 00:04:52,850
同时，我们还想修改其他样式，例如列的外观

76
00:04:52,850 --> 00:04:55,680
现在两个列离窗口边缘太近了

77
00:04:56,280 --> 00:05:00,230
我们可以在 foundation_and_overrides.scss 中修改

78
00:05:00,440 --> 00:05:06,200
这里有导航条相应地变量，包括设定背景色的变量

79
00:05:06,200 --> 00:05:13,980
我们取消这行注释，把背景色改为深蓝色

80
00:05:15,150 --> 00:05:21,900
这个文件中有很多变量，你可以根据需要把 Foundation 修改为你想要的样子

81
00:05:22,080 --> 00:05:26,800
文件的上部还有设置网格的变量，我们来看一下

82
00:05:27,139 --> 00:05:29,680
设置间隔的方法有很多种

83
00:05:29,820 --> 00:05:34,200
我们可以把行宽设的小一点，也可以修改列之间的间隔

84
00:05:34,300 --> 00:05:40,640
现在列间隔是 30 像素，我们加宽一倍变成 60 像素看看效果

85
00:05:41,480 --> 00:05:47,320
刷新页面，加载的有点慢，因为要重新编译 SCSS

86
00:05:47,320 --> 00:05:55,140
加载完成后可以看到导航背景变成深蓝色了，页面边缘也变宽了

87
00:05:55,800 --> 00:05:58,379
Foundation 的功能还多着呢

88
00:05:58,379 --> 00:06:02,129
我们可以在文档的 CSS Components 部分概览一下

89
00:06:02,129 --> 00:06:06,500
下面有个 Kitchen Sink 链接，点开后显示了你可以使用的样式

90
00:06:06,500 --> 00:06:11,400
有提醒信息和按钮的样式，还有内嵌视频的样式

91
00:06:11,700 --> 00:06:16,300
以及其他一些 Foundation 可以实现的样式

92
00:06:16,950 --> 00:06:19,880
这些样式都可以通过 class 指定

93
00:06:19,880 --> 00:06:25,900
例如，我们要让 About Us 的标头大一些，可以指定 subheader

94
00:06:26,610 --> 00:06:32,700
然后再打开商品的索引页面，底部有个添加新商品的链接

95
00:06:32,700 --> 00:06:40,980
我们要把这个链接变成按钮，再加上 radius 把边角变得圆点儿

96
00:06:42,000 --> 00:06:44,980
刷新页面就可以看到变化了

97
00:06:45,300 --> 00:06:49,410
接着来添加一个新商品，这里显示的是所需的表单

98
00:06:49,410 --> 00:06:50,900
我们可以改进一下这个表单

99
00:06:51,940 --> 00:06:56,360
假如我们想实现这种行内样式，标签就在输入框旁

100
00:06:56,650 --> 00:07:00,800
这种样式可以使用 Foundation 布局所用的网格系统

101
00:07:01,000 --> 00:07:04,120
因为 Foundation 的网格是可以嵌套使用的

102
00:07:04,800 --> 00:07:07,460
这是表单局部视图现在用的代码

103
00:07:07,460 --> 00:07:13,400
我们把输入框所在的 div class 改为 row，使用网格系统

104
00:07:13,400 --> 00:07:17,930
再加入一个 div，class 设为 small-3，放置标签

105
00:07:18,050 --> 00:07:27,680
然后把标签移过来，再把 class 设为 right inline，让文本右对齐

106
00:07:27,880 --> 00:07:34,880
然后是文本框，加入一个 div，class 设为 small-9 columns

107
00:07:34,900 --> 00:07:40,640
价格输入框，我直接复制，修改一下就好

108
00:07:43,150 --> 00:07:46,160
下面的 actions div 中有个提交按钮

109
00:07:46,160 --> 00:07:53,840
使用网格系统，可以把 class 设为 small-9

110
00:07:53,840 --> 00:08:00,710
然后是 small-offset-3，把按钮往右推一个标签的距离

111
00:08:00,710 --> 00:08:03,310
然后再加入 columns，来看看效果

112
00:08:04,020 --> 00:08:11,990
刷新页面，看起来还行，但是标签和文本框之间的间隔太大

113
00:08:11,990 --> 00:08:15,800
这是因为间隔值设的太大了

114
00:08:16,400 --> 00:08:21,430
如果不想在网格系统中使用间隔，可以在每行的 class 中加上 collapse

115
00:08:21,800 --> 00:08:27,340
你可能还想设置间隔的具体值，我会在一个新样式表中添加

116
00:08:27,840 --> 00:08:32,000
在这里创建一个新文件，命名为 layouts.css.scss

117
00:08:32,460 --> 00:08:37,750
我们把 label.right 的右内边距设为 10px

118
00:08:37,750 --> 00:08:42,460
来看看效果，刷新页面，看起来好多了

119
00:08:43,129 --> 00:08:47,150
我还想介绍一个功能，提示框,这个功能对表单特别有用

120
00:08:47,150 --> 00:08:49,820
如果我想知道更多内容，就可以把鼠标悬停在标签上

121
00:08:50,400 --> 00:08:52,260
我们来为价格标签加上提示框

122
00:08:52,260 --> 00:08:58,600
提示文本放在 title 属性中，假设为“Price in USD”

123
00:08:58,600 --> 00:09:03,540
然后再加上 data 属性，把 tooltip 设为 true

124
00:09:03,540 --> 00:09:04,220
就这么简单

125
00:09:04,800 --> 00:09:09,460
刷新页面，鼠标悬停在标签上，就看到了提示框，很不错的效果

126
00:09:10,700 --> 00:09:13,780
Foundation 功能很多，不可能用到全部

127
00:09:13,780 --> 00:09:18,700
如果不需要某项功能，可以将其删掉

128
00:09:18,700 --> 00:09:24,480
避免把整个框架的 CSS 和 JS 文件发送到客户端

129
00:09:24,800 --> 00:09:28,500
为此，我们需要修改引入 Foundation 框架样式表这行代码

130
00:09:28,500 --> 00:09:31,360
这样才能管理具体引入的组件

131
00:09:31,920 --> 00:09:35,400
我们要做的事很简单，访问 Foundation 项目在 GitHub 上的页面

132
00:09:35,400 --> 00:09:40,140
在 SCSS 目录下有个 foundation.scss 文件

133
00:09:40,140 --> 00:09:45,069
直接复制文件中的内容，我们可以直接在这个页面中复制

134
00:09:45,069 --> 00:09:49,420
然后粘贴在这里，替换掉引入整个框架的代码

135
00:09:49,420 --> 00:09:53,760
这么一来就可以删除程序中不用的组件了

136
00:09:53,760 --> 00:09:57,100
例如，不用 joyride，就可以直接删除这行

137
00:09:57,100 --> 00:10:00,190
这样就不会把 joyride 相关的样式发送到客户端了

138
00:10:00,940 --> 00:10:04,470
JavaScript 类似，不过要更好玩些

139
00:10:04,470 --> 00:10:12,100
找到 foundation 目录中的 index.js，这是 sprockets 的一个特性

140
00:10:12,100 --> 00:10:16,760
如果某个文件夹中有 index 文件，就会尝试加载整个文件夹

141
00:10:16,980 --> 00:10:20,950
我们复制这几行代码，粘贴到 application.js 文件中

142
00:10:20,950 --> 00:10:26,620
替换加载整个 Foundation 框架那行，调整好格式

143
00:10:26,900 --> 00:10:32,060
这样就可以删除不用的 JS 了，这里我们要删除 joyride 相关的文件

144
00:10:32,320 --> 00:10:34,800
删除了加载代码就不会加载相应地 JS 文件了

145
00:10:35,740 --> 00:10:42,100
如果想减少发送到客户端的数据量，还可以把 jQuery 换成 zepto.js

146
00:10:42,410 --> 00:10:49,200
zepto 更小巧，而且 Foundation 完全支持，所以我会用它替换 jQuery

147
00:10:50,200 --> 00:10:52,880
以上就是本集的内容

148
00:10:53,100 --> 00:10:55,940
如果你在 Foundation 和 Twitter Bootstrap 之间抉择

149
00:10:55,940 --> 00:10:59,990
鉴于二者都有一些坑，我建议你两个都试一下

150
00:10:59,990 --> 00:11:03,080
看哪个能更好地满足需求，这两个框架其实很相似

151
00:11:03,320 --> 00:11:04,329
感谢收看

152
00:11:04,329 --> 00:11:05,460
更多视频请访问 Rubinese.com