www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

Foundation之网格系统

2020-01-26 20:27 来源:未知

在上一篇文章里,我们讲到“WEB前端框架-Foundation之入门篇”,大家应该对Foundation有了一定的了解了,那让我们接着讲吧,这节主要讲“Foundation之网格系统”。

Foundation是一个以移动优先的流行框架。意味着将会加载最少的代码量和减少成本可致使页面渲染速度更快。与一些前端框架一样,Foundation是完全支持响应式的。但不同的是,它只需要用到一个断点即可支持架构的改变。这断点定义viewport的宽度为768px宽。

实际上,这个网格系统本身有3个部分:电脑端网格,移动端网格和块网格。由于Foundation是以移动优先的前端框架,那就从移动端网格开始吧。

如果您刚接触它,请您先看“WEB前端框架-Foundation之入门篇”。

在Foundation网格系统中我们只使用一个主要断点,实现768px宽度的布局。

小型网格

ThisisFoundation

上面代码列出了3个重要的class:第一个class为row,是用来包含列数,就好像由许多列如细胞一般地排列在一行当中。在这个演示中,我们使用到12列网格,默认12是一行当中能有列数的最大值。如果你需要更多列数,Foundation允许你在自定义界面中设置最多为16列。

第二个class是small-12,改变里面的数字就可以定义该列的宽度。small-12只是定义宽度而已,还没有定义该列的存在,因此还需要第三个class为columns。这3个class都是网格系统的基础class。

简单地说,上面的5行代码形成一个由12列组成的,占满父窗口宽度。里面12列所展示的就是我们的内容。让我们使用更复杂的代码来进一步说明。

Thisisasidebar

Thisisthecontentarea

在上面的例子当中,我们可以看到有两个div包含类名columns,还有搭配另一个class来定义该列的宽度。Foundation定义这些列在同一个父容器内来保证这些列是在同一层的,占满父容器宽度的。这两大列分别占据了4个列的宽度。刚好占满12个列,用百分比来说明就是分别占父容器宽度的33.3% 和66.6%。

这也重要地说明:这些div块是可以无限地内嵌套的,因此大大地提高灵活性。见下面代码例子:

Thisisasidebar

#1

Go

Thisisthecontentarea

可以看到这个sidebar例子用了row里面,再嵌套column,在第二个row里面嵌套了3列,分别宽度为small-1、small-9和small-2。是不是很方便实现?呵,我们是时候编写些Demo来实践体会一下,享受Foundation带来的方便。

大网格

Thisisasidebar

Thisisthecontentarea

上面的例子中给每一列额外添加一个class,分别为large-3和large-9,作用就是当网页在大屏幕上浏览时,就会把sidebar原来的33.3%宽扩展为large-3,也就相当于25%父容器宽。内容空间也会随之扩展的。这是个简单方法,但对于适应不同浏览窗口来说,组织自己的内容布局是非常有帮助的。 接下来我们可以使用class为large-centered和small-centered快速地使某列内容居中,但是前提是某行中只有一列。如果有多列呢,又怎么办?我们就可以使用class为push和pull来控制列的位置了。

3

9,last

在此例子中,第二个div本来应该显示在第一个div之后,但现在被pull前面显示,而第一个div却被push后面显示。因此当在大屏幕下就可以左边显示列表,右边就显示主要内容,当屏幕变小的时候,内容就会自动地显示在列表下面。

块网格

讲了以上两种网格系统,接下来要讲的是块网格,块网格是在不管屏幕的大小,使得列表元素都可以均匀的分布。特别是对块状的内容来说更为理想,并不要求正确地显示多少行或者多少列。如果你想在电脑端网页和移动端页面上显示相同的布局,你只需要使用以 small-block-grid-为前缀的class。

这也像前面谈到的网格一样。你只需要使用一个small-12来代替small-12和large-12。很容易吧。

总得来说,以上3种网格系统都是Foundation提供的,记住一点就是,从小网格到大网格只改变一次,使用小型网格目标运用在小型设备上,而大型网格则运用在电脑或者更大的屏幕。

Foundation之网格系统。Orbit插件

为了更震感的效果,接下来要介绍的是Foundation的一个非常有用的插件:Orbit。

这个方便的插件可以当作滑动门来使用, 可以将图片、video甚至普通的html内容做成滑动效果。用法是使用简单的标记,很容易掌握运用,当使用得当时,效果就会变得无比震撼。

...

...

...

Orbit用到一个列表架构,每个列表项目都当作为一个滑动片。上面代码中可以看到,除了img标签外,还有一个div包含一个class为orbit-caption,作用是可以为每张图片添加一个标题。Orbit还提供显示分页、时间器。

看下面你可以在Orbit中改变参数的例子:

timer_speed:10000,

animation_speed:500,

bullets:true,

stack_on_small:true

这些参数包含了滑动速度、分页和有选择地在小屏幕上堆栈。值得注意的是,这些参数是需要通过初始化才起作用的,因此你要使用放在body底部的$.foundation()标准使用代码:

$.foundation();

然后加上Orbit的选择参数:

$.foundation('orbit',{

timer_speed:10000,

animation_speed:500,

bullets:true,

stack_on_small:true

到目前为止,你就可以使用Orbit的效果了,还有更多的选择可以Foundation官方文档上查看。

备注:Foundation可以分开下载选择的js文件,要记得把这些文件都放到body的底部,以加快页面渲染速度,如果你更喜欢一个压缩后的js文件的话,那也可以只引入一个js文件。

script src="js/foundation.min.js">

总结

你想不想下载Foundation玩玩呢?或者是想在一个干净的环境来测试你的想法?那就是点击jsfiddle。将可以用上最新版本的Foundation和包含所有的组件。

好啦,今天先讲到这里了,在本文章当中讲解了Foundation的3大基础网格系统,简单介绍了Orbit插件。那么在下一篇文章将学习导航栏和部分插件,伴随着一些有用的工具……期待吧~!

版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:Foundation之网格系统