Fundation 5发布：号称最快版本，响应式用户体验更完善

Foundation，作为一款优秀的响应式前端框架，可帮助开发者快速构建原型及搭建跨平台的网站及应用。其强大的功能，可嵌套的12列响应式网格布局，使Foundation成为Github中最棒的20个明星级别项目之一。

近日，Zurb发布了Fundation 5，号称Fundation的最快版本，编码更快、学习更快、构建的Web应用访问速度更快。这是继Fundation 4的又一重要版本发布。

最新版本在Foundation 4基础上做出众多改进。Fundation 4利用媒体查询（Media Query）可根据用户不同的浏览器，响应式加载不同尺寸的图片。Fundation 5中，该响应式方案不再只适用于图片，而是进一步扩展至HTML中的任何一个元素。开发者可在标记容器（比如div）中使用“data-interchange”属性，通过判断设备的类型，选择组件合适的显示方式。

下面代码将根据不同的设备类型显示不同样式的地图。如果是智能手机，就加载小尺寸静态的地图；如果是中等大小尺寸的设备，就显示稍大尺寸的静态地图；若是大型显示设备，则显示完整的交互式Google地图。

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]"><div data-alert class="alert-box secondary radius">This is the default content.<a href="#" class="close">&times;</a></div>
</div>

Fundation 5另一大改进是新增了Off Canvas强大功能，可用来构建Off Canvas类型的导航菜单。该类型的菜单通常放置在视图窗口之外，被激活后才会滑动显示在视图中。借助Off Canvas，在Fundation中构建此类型导航菜单将十分简单。

下面代码展示了如何构建一个基本的、无样式的Off Canvas类型导航菜单。过程简单，仅使用了几行代码。

<div class="off-canvas-wrap"><div class="inner-wrap"><a class="left-off-canvas-toggle" >Menu</a> <!-- Off Canvas Menu --><aside class="left-off-canvas-menu"><!-- whatever you want goes here --><ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 2</a></li><li>
<a href="#">Item 2</a></li><br>        </ul></aside><!-- main content goes here --><p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p><!-- close the off-canvas menu --><a class="exit-off-canvas"></a></div>
</div>

此外，应广大开发者的要求，Fundation 5新增了中等网格系统，其介于大、小网格之间，为开发者开发中间尺寸大小的网格布局节省了大量时间。默认情况下，中等网格延用了小网格的样式。当然你可利用中类网格系统，定制自己的网格布局。（文：陈秋歌审核：张红月）

关于Fundation 5的更多特性请见：Fundation官网

下载Fundation 5： http://foundation.zurb.com/develop/download.html

Github托管地址：https://github.com/zurb/foundation

国内镜像地址：https://code.csdn.net/OS_Mirror/foundation

CSDN链接：http://www.csdn.net/article/2013-11-22/2817598-zurb-releases-foudation-5

Fundation 5发布：号称最快版本，响应式用户体验更完善相关推荐

金山快盘 android,金山快盘Android新版正式上线重视用户体验更便捷
金山快盘于5月26日发布以来,掀起了同步网盘的一轮热潮.而高效快捷的多同步终端也一直是金山快盘得人心的一大原因,今日,金山快盘团队经过一系列的研发测试,快盘Android最新版本1.7版正式上线. 金 ...
屏幕的宽度_交互规范：响应式让屏幕利用更高，用户体验更佳
让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯.本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析三个部分进行阐述,在项目中提前定义 ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
响应式与自适应设计:设计师的最佳选择是什么?
作为全球先进的科技巨头,Google一直推崇响应式网页设计,并在今年的4月21日发布了重大的更新,目的是提高响应式在移动终端上的运行效率.尽管在更新中没有明确表明你必须使用响应式设计.只是简单的提示响 ...
响应式web设计_将响应式Web设计超越视觉
响应式web设计 In this episode of the Versioning Show, David and Tim are joined by Chris Ward, a technical ...
php可以实现响应式吗,怎么实现Vue数据响应式
这次给大家带来怎么实现Vue数据响应式,实现Vue数据响应式的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整 ...
响应式和自适应的区别
先给大家体验一下响应式和自适应的区别,请放大缩小一下屏幕尝试自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几 ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...
50种响应式web设计的奇妙工具
在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采.本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. ...

Fundation 5发布：号称最快版本，响应式用户体验更完善

Fundation 5发布：号称最快版本，响应式用户体验更完善相关推荐

最新文章

热门文章