foundation栅格布局的,WEB前端框架

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

Bootstrap和Foundation是我最喜欢的两个前端框架,尤其是在快速开发网站的原型上。它们都提供了随时可用的组件,加快了我的工作流程。除了一些细小差别,在我看来它们大部分的基本特征都是类似。

 

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

在这篇文章里,我将介绍它们网格的基本构造。首先,我将会向你展示它们是如何构建的,描述它们的主要部件,以及它们对不同屏幕的大小表现出的差异。然后,我将通过一个真实例子的实践来帮助你增添知识。

提到响应式,就不得不提两个响应式框架——bootstrap和foundation。在标题上我已经说明白啦,今天给大家介绍的是foundation框架。

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

比较一:媒体查询的比较

何为“尝鲜”?就是带大伙初步一下foundation的灵活和强大

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

在分析Bootstrap和Foundation的栅格结构之前,让我们先来看看它们为响应布局所提供的断点。这是每个框架所提供的可以用来设置可用栅格的数量。

何为“踩坑”?就是我把我使用的时候踩过的坑给标个记号,这样大伙用的时候就可以“绕道而行“啦!

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

Bootstrap指定了4个基于px的媒体查询断点。展示如下:

 

小型网格

Foundation包含了5个基于em的媒体查询。它们如下表显示:

 图片 1

ThisisFoundation

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

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

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

为了让你有办法去理解媒体查询是如何工作的,我建议你去看看Bootstrap的demo以及相关的Foundation的demo。但如果你还是有一些困惑的话,接下来的部分将会阐述一切。

没错今天我这篇文章讲的就是北方酱左手边的那个看起来温(diao)文(de)尔(yi)雅(bi)的山羊先生:foundation!:

Thisisasidebar

注意:Foundation超大屏和超级大屏的网格在默认情况下是禁用的。如果你想要使用它们,你必须“取消”并设置$include-xl-html-grid-classes和$include-xl-html-block-grid-classes这两个变量的值为true。你可以在_settings.scss这部分里找到这些变量。

图片 2

Thisisthecontentarea

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

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

比较二:网格结构

 

Thisisasidebar

Bootstrap和Foundation都提供了由行和列组成的移动第一的12列网格。列被嵌套在行里。每行的列数之和为12列。行同样也可以被嵌套在列里。

文章主要的四点内容:

#1

Go

这两个框架包含了许多你可以用来设置列的大小的预定义类。如上面提到的,Bootstrap包含4个媒体查询断点而Foundation则包含了5个。对每个网格来说,它们都有着不同的类前缀可以用来设置列的大小。

1.foundation 网格布局之行列栅格 (row and
column)

Thisisthecontentarea

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

大网格

Bootstrap网格的行同样也需要封装的元素。这就应该要有一个container或者container-fluid类。一个元素中的container类有一个固定值,它的数值取决于视窗,而元素中的container-fluid类则是扩展到浏览器窗口的整个宽度。

2.foundation 网格布局之块状栅格(block
grids)

Thisisasidebar

比较三:列!=12?

3.响应式栅格和可视化

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提供的,记住一点就是,从小网格到大网格只改变一次,使用小型网格目标运用在小型设备上,而大型网格则运用在电脑或者更大的屏幕。

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插件。那么在下一篇文章将学习导航栏和部分插件,伴随着一些有用的工具……期待吧~!

一个网格系统中的列数不等于12是可能的。在这种情况下,Bootstrap将会把最后一列浮动到左侧,而Foundation则将会把它浮动到右侧。如果你想要重写Foundation的默认行为,就在最后一列添加.end类。

4.浮动栅格

比较四:功能类

【注意】在这篇文章中我采取的是React框架的写法,可能有些影响阅读,请多多包涵,className等同于class,
style= {{background:’red’}}等同于 style =
“background:red”,可放心食用

这两个框架都提供了额外的类让你能够非常灵活的定义它们的网格。

 

可见的类可以让你在特定大小的屏幕上选择显示或者隐藏内容。偏移类允许你让不完整的列居中或者调整它们之间的间距。当然还有其他的类可以根据不同设备来指定列的顺序。

【准备工作】
把下面这两个东西写在你的html文件里:

比较五:网格块

<link rel="stylesheet" href="http://cdn.staticfile.org/foundation/6.3.0-rc3/css/foundation.min.css">(放在head标签内)

<script src="http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>(放在body底部)

除了默认网格,Foundation还支持另一个栅格特征,即网格块。它允许你使用最小的标记来创建同等大小的列。为了使用它,把行定义成ul元素,行里面的列定义成li元素。然后通过对ul元素应用相关的类来指定列的大小。

 

这个时候你可能会想,规则网格和网格块之间的区别是什么?让我们简要的看一看它们的两点不同之处:

1. foundation 网格布局之行列栅格 (row
and column)

与默认的网格不同,每行都应用了最大宽度,所以总是铺满整个浏览器窗口。

<div className = 'row'>
   <div className = 'small-2 medium-6 large-10 columns' style = {{background:'red'}}>column1</div>
   <div className = 'small-10 medium-6 large-2 columns' style = {{background:'blue'}}>column2</div>
</div>

网格块只能用在大小相等的项目中。

在一个行父级元素下有多个列子元素,列子元素按网格分长度。网格总共分为为12列,如你所见对于small
2 + 10 = 12,对于medium 6 + 6 =12 …
你需要做的事情很简单:在行父级元素上写入className =
‘row’,在列各个子元素中写入[size]-数字,同时让各个数字之和为12即可,上述是两列的情况,如果有三列则可为small-2,small,small-8,small-2(和为12),一般为12,下面也会介绍可以不为12的情况,很简单!对吧!

使用网格

 

既然我们对这两个框架的网格已经有了很好的理解,让我们来看看我们怎样才能够使用它们来建立一个Bootstrap页面和相应的Foundation页面。

【注意】:你一定要记得在列子元素className后面写入columns!(这应该是很多新手会犯的错误)

下面的截屏显示了我们将要建立的第一个布局:

 

先从Bootstrap开始,我们定义了一个带有container类的元素。就像前面讨论的,这个类会根据屏幕的大小给这个元素设置了一个固定的宽度。然后,我们给它添加一个带有row这个类的元素。

demo:

现在,我们已经准备好设置我们的列了。对于大屏来说,我们想要4个大小一样的列。所以我们定义了4个每个都带有col-lg-3类的div元素。然而,对于中小型设备我们更倾向于每行里面有两个列。出于这个原因,我们使用col-sm-6这个类。最后,对于超小屏来说我们希望列可以堆叠起来。这是移动第一框架的默认行为,因此,这就没必要去定义col-xs-12这个类。

大型设备:(单行占全屏100%)

它的HTML是这样子的:

 图片 3

让我们继续来看看Foundation。

中型设备:(单行占全屏100%)

Foundation的网格和Bootstrap的网格很像,但是它得更简单一点。首先,我们得先定义一个带有row类的元素,这个元素将包含着我们的列。这个类把元素的max-width设为62.5rem。下一步,我们添加列。为了达到这个目的,我们指定每个div元素都带有一个column或者columns的类,然后使用相应的栅格类来设置它们的宽度。同样的,对于小型设备来说我们不用定义small-12这个类。

图片 4

这是基于Foundation栅格的HTML

小型设备:(单行占全屏100%)

此时此刻我想你已经开始对这两个框架的网格系统更熟悉了。但或许另外一个例子可以帮你了解的更清晰。

图片 5

在下一个例子中,我们将构建footer。下面这个图示显示了我们想要的样式:

 

在这里,我们将选择一个不一样的布局来和之前的例子做比较。对于中屏及中屏以上的屏幕(或者在Bootstrap网格里小屏及小屏以上的屏幕),我们想要显示三个列。然而我们注意到,在最后一列里有一个嵌套行。这由两个列组成。我们将会在所有的设备中把它们的宽度设为行宽度的一半。最后,我们会调整在嵌套行里出现的图片的可视度。

写入className =
‘row’的类是默认占满父级元素的,所以注意我们并没有写上with:100%

这是Bootstrap中的代码:

 

            Let's meet and discuss         

1.1虽然简单,但别高兴太早,因为第一个坑即将到来…..
. ( ^ω^). 

这是Foundation的代码:

 

           Let's meet and discuss        

我们把上面的代码改一改,把medium和large的布局给去掉:

注意:如果想要代替网格块,我们可以使用Foundation默认的网格来创建嵌套行。

<div className = 'row'>
   <div className = 'small-6 columns' style = {{background:'red'}}>column1</div>
   <div className = 'small-6 columns' style = {{background:'blue'}}>column2</div>
</div>

结论

 

如果你想要更多Bootstrap栅格系统的相关信息,你可以去看看这篇文章:
《Bootstrap每天必学之栅格系统》

demo:

最后,在这篇文章里,我介绍了Bootstrap和Foundation的网格结构。然后我们在一个真实的项目中看到了要如何去利用它们的网格。正如你所看到的,所有的网格都是相类似的,都可以进一步的去定义它。

小型设备:(单行占全屏100%)

我希望你能喜欢这篇文章,也许你可以把你在这所学到的应用到你的项目中去,更多Bootstrap内容关注:《Bootstrap学习教程》,谢谢大家的阅读。

图片 6

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

中型设备:(单行占全屏100%)

Bootstrap实战教程

图片 6

Bootstrap插件使用教程

大型设备:(单行占全屏100%)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

图片 6

 

what!我不是只写了关于small的布局吗?怎么在中型设备和大型设备也变成和小型设备一样的布局了?look下面

 

【foundation的布局“继承”】:大的size会自动”继承”小的size,也就是说你只写了small-6
columns,它会默认你写了small-6 medium-6 large-6
columns,同理,即使你写了small-6 medium-10
columns,它也会默认你写了small-6 medium-10 large-10 columns
这种继承是单向的:从小到大,也就是说你只写了large-6
columns,small和medium不能得到值。

 

如果我们写成

 

<div className = 'row'>
   <div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
   <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>

 

在小型设备和中型设备上:(单行占全屏100%)

图片 9

 

 

1.2接下来就是我们可能遇到的第二个坑….. . (
^ω^). 

 

让我们“仔细”看看我们在大型设备上的显示:

图片 10

注意看两边是有空白的,(哎呀怎么回事?刚才不是还说好默认占父元素100%的么)

 

这是由于foundation的内在机制,网格
(.row) 最大尺寸( max-width)为 62.5rem。在宽屏设备上尺寸可能大于
62.5rem, 这样列就无法完整填充页面!

 

别急,让我们做一些弥补的操作,让我们给行父元素加上max-width:
100%;:

<div className = 'row' >
  <div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
  <div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>

 

demo:(大型设备最宽屏)

图片 6

没有空白了!坑已经填上了!(。・∀・)ノ耶!

 

1.3接下来是我们的第三个坑….. . (
^ω^). (待我拿吧铲子把填上的坑再挖出来)

 

正所谓学而不思则罔,你可能会问:哥们你之前写的都是size-number中number加起来等于12的demo,但是我就是作死不想写成总和为12的话,会怎样呢?

让我们来试试!:

<div className = 'row' style = {{maxWidth:'100%'}}>
  <div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
  <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
  <div className = 'small-3 columns' style = {{background:'yellow'}}>column2</div>
</div>

 

图片 12

 

注意看,黄色的色块靠在最右边,这说明了当你的总和不能凑够12的时候,行父元素的最后一个子元素会自动向右浮动

 

【解决办法】给最后一个子元素加上end的类名

<div className = 'row' style = {{maxWidth:'100%'}}>
  <div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
  <div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
  <div className = 'small-3 columns end' style = {{background:'yellow'}}>column3</div>
</div>

 

demo:(总共占全屏75%)

图片 13

看到没有,它跟上来啦!

 

1.4接下来是我们的第四个坑….. . (
^ω^). 

 

【foundation单行单列居中】 很多时候我们并不需要在一个行网格中放入多个列,很多时候我们需要只需要在一个行中放入一个列,然后让它居中就可以了,我们需要在对应的size-number后加入size-centered譬如:small-centered

 

<div className = 'row'>
   <div className = 'small-6 small-centered columns' style = {{background:'red'}}>column1</div>
</div>

 

demo:(小型设备上)

图片 14

 

 

猜猜看在中型和大型设备上会怎么样?没错!跟前面一样,medium和large“继承”了small的居中特性!于是在中/大设备中你“被居中”了。

what the hack!
但如果我硬是不想在中/大型设备上被居中的话怎么办?你只能这样写:加入size-uncentered

 

<div className = 'row'>
  <div className = 'small-6 small-centered medium-uncentered large-uncentered columns' style = {{background:'red'}}>
   column1
  </div>
</div>

 

demo:(中/大型设备上)(单行占全屏50%)

图片 15

这样你就取消了被动的居中

 

2.foundation 栅格布局之块状栅格(block
grids)

 

有时我们的布局对象不是以行列的方式二是以块状的方式展现的,例如:

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'grey'}}></div>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'blue'}}></div>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'red'}}></div>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'yellow'}}></div>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'black'}}></div>
   <div className = 'columns column-block' style ={{minHeight:'20px',background:'orange'}}></div>
</div>

 

依然是在父级元素和子元素中添加row和columns类名。同时,在父级元素里面写入:size-up-number:number表示每一行最大的块数,在块子元素里面写入:columns
column-block

 

demo:

大型设备:(单行占全屏100%)

图片 16

中型设备:(单行占全屏100%)

 图片 17

小型设备:(单行占全屏100%)

 图片 18

 

2.1坑点一
——column-block类名会给每个栅格架上一定的margin-bottom

 

这种写法,上下两个块级栅格列默认是由margin-bottom,开箱试验表明,在中/大型设备上为margin-bottom:30px,在小型设备上为margin-bottom:20px;当然,很多时候你可能不想要这个外边距,去掉它的方法很简单,不加
column-block就可以了,比如我们写成:

 

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
   <div className = 'columns ' style ={{minHeight:'20px',background:'grey'}}></div>
   <div className = 'columns ' style ={{minHeight:'20px',background:'blue'}}></div>
   <div className = 'columns ' style ={{minHeight:'20px',background:'red'}}></div>
   <div className = 'columns ' style ={{minHeight:'20px',background:'yellow'}}></div>
   <div className = 'columns ' style ={{minHeight:'20px',background:'black'}}></div>
   <div className = 'columns ' style ={{minHeight:'20px',background:'orange'}}></div>
</div>

 

在中型设备上:(单行占全屏100%)

图片 19

margin-bottom已经被我们去掉啦

 

2.2坑点二:子类名写columns或column效果一样

 

(其实也不算是坑点)在查阅官方文档时我有一个感到疑惑的点,就是官方文档在弹性栅格这一节里使用的子类名不是columns而是column(后面没有s)

图片 20

 

经过试验证明,在所有上述和下面的例子中,无论你写的类名是column还是columns效果都是一样的…. _(:3
」∠)_

 

2.3坑点三:在块级栅格中,你无法用“small-6
medium-4 large-2 ”的行列栅格的写法定义每个栅格的宽度

 

块级栅格很好的一点就是解决了行列栅格只能实现行列栅格只能在单行实现自适应布局的局限性,于是我们想,能不能把两个东西结合到一起呢?很可惜,不能!我们把两种写法结合在一起,写成:

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'grey'}}></div>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'blue'}}></div>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'red'}}></div>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'yellow'}}></div>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'black'}}></div>
  <div className = 'small-3 columns' style ={{minHeight:'20px',background:'orange'}}></div>
</div>

 

如果这种写法能够成功,那么按照我们的设想,在小型屏上,因为small-up-2而单行显示两个栅格块,同时每个栅格所占位置应该是3/12
= 1/4,两个栅格一共占去屏幕的1/4+1/4 =1/2,为50%,让我们看看demo:

demo:(小型屏幕)(单行占全屏100%)

图片 21

两个栅格占去了全屏的100%,而不是50%,这说明,通过size-number的宽度调节在块级栅格中已经失去了作用:

 

虽然在块级栅格中,你无法写行列栅格的类名去规定单个栅格的宽度,但你可以通过style指定定宽的方式实现这一点

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxmaxWidth:'100%'}}>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'grey'}}></div>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'blue'}}></div>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'red'}}></div>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'yellow'}}></div>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'black'}}></div>
  <div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'orange'}}></div>
</div>

 

demo:小型屏

图片 22

 

3.响应式栅格和可视化

 

你可能遇到过这样一个需求,做一个网页去同时适应手机端和PC端(或者说是小型屏和中/大型屏)这时候你希望一个页面元素仅仅只在中大型屏上显示而不在小型屏幕上显示。怎么控制这个可视化的响应式呢?foundation的show-for-size类和show-for-size-only类可以轻松地帮助到你

 

show-for-size类

<div>
  <p className = 'show-for-small'>我在小/中/大型屏幕显示</p>
  <p className = 'show-for-medium'>我在中大型屏幕显示</p>
  <p className = 'show-for-large'>我在大型屏幕显示</p>
</div>

 

demo:

大型屏幕:

图片 23

中型屏幕:

图片 24

小型屏幕:

图片 25 

 

show-for-size-only类:

<div>
  <p className = 'show-for-small-only'>我只在小型屏幕显示</p>
  <p className = 'show-for-medium-only'>我只在中型屏幕显示</p>
  <p className = 'show-for-large-only'>我只在大型屏幕显示</p>
</div>

demo:

大型屏幕:

图片 26

中型屏幕:

图片 27

小型屏幕:

图片 28

 

【注意】show-for-size类和show-for-size-only类的区别在于show-for-size类有“继承”的特性,也就是你只写className
= ‘show-for-small’相当于写了className = ‘show-for-small show-for-medium
show-for-large’则在任意屏幕上都能显示,而show-for-small-only则只能在小型屏幕上显示

 

4.浮动栅格

 

foudation还有一个类叫浮动类(其实瓦觉得这似乎并没有特别大的用处毕竟来说你也可以自己写css,但是我个人感觉在foudation下写类名的话,代码看起来会好看一些╮(~▽~)╭,不知道各位是怎么认为的呢

 

<div className = 'row'>
   <p className = 'float-left'>float-left</p>
   <p className = 'float-right'>float-right</p>
</div>

 

demo:

图片 29

 

最后一点:附上菜鸟教程和官方文档的链接:

图片 30

http://www.runoob.com/foundation/foundation-tutorial.html(我就是那个教程)

图片 31

http://foundation.zurb.com/sites/docs/grid.html(我是就是那个文档)

 

【注意】我这篇文章是在参考官方英文文档的基础上写的,在这里提个建议——不要只看菜鸟教程(不是不看,而是不要只看!),建议还是得多看看官方的英文文档,否则你会发出我如下的感慨——

 

图片 32

 

最后最后的一点

图片 33

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注