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

原创 2013年12月03日 12:00:17

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

Android各个版本的名称和更新

android各个版本的名称和更新(转)命名规则Android 用甜点作为它们系统版本的代号的命名方法开始于 Andoird 1.5 发布的时候。作为每个版本代表的甜点的尺寸越变越大,然后按照26个字...
  • ethan_xue
  • ethan_xue
  • 2016年02月02日 17:21
  • 7289

Android app版本升级的问题

方式一:APP自身提示有更新,用户点击升级就在后面下载更新包 详细的请跳转: 以下是我的理解。 效果图: 第一步:存放资源的后台,存放一个包含最新版本信息的...
  • qq_30716173
  • qq_30716173
  • 2016年03月17日 14:46
  • 8431

WordPress主题 wpdx 响应式CMS/Blog 双布局5色可选主题[v2.3版]

现用主题 wpdx 也已更新至 2.3 版本,在原有横向布局(主菜单在左边)的基础上,再添加垂直布局(主菜单在上方),每种布局都有 5 种配色,选择更自由!同时主菜单已经支持 3 级菜单啦!依旧响应式...
  • huaive
  • huaive
  • 2015年02月07日 19:59
  • 1450

MYPM 国产非开源免费测试管理工具软件 WEB2.0用户体验零配置安装版本发布

内容来自本人javaeye贴子在用开源的或是其他测试管理软件时,除了安装比较麻烦外,本人最不满意的一点是,需要自己去找自己要办理的BUG   BUG和CASE都不能直接插图,看起来不直观,界面不友好...
  • MYPM_AndyLiu
  • MYPM_AndyLiu
  • 2011年02月11日 14:40
  • 537

DOClever 5.0 版本重磅发布,全新的 UI 和用户体验

接口管理平台 DOClever 是一个商业化开源产品,完全免费。无论你是前端工程师,还是后端工程师,接口永远都是两者交互的桥梁,所以 DOClever 专为中小型团队量身打造,旨在解决接口的管理,测试...
  • fanshaobao
  • fanshaobao
  • 2017年12月05日 10:28
  • 39

WordPress主题 WDone 博客/杂志/CMS/Blog主题响应式 双布局5色可选含用户中心主题[v2.3版]

WDone主题是继WPDX之后又一款强大的WordPress 响应式多样式主题,支持 WordPress 4.5 及以上最新版,兼容 IE8+、Chrome、Firefox 等主流浏览器。可切换B...
  • huaive
  • huaive
  • 2017年11月18日 14:14
  • 171

出色的用户体验有三个特征:速度快、响应及时以及无缝。下面的信息帮助你的应用如何能够在Android上实现这些特征

出色的用户体验有三个特征:速度快、响应及时以及无缝。下面的信息帮助你的应用如何能够在Android上实现这些特征。 一、速度快 你不能假设手机与桌面系统和服务器一样提速,更多的是你要关注你...
  • hulongkao
  • hulongkao
  • 2014年01月26日 17:59
  • 831

SEO关键字排名VS用户体验谁更重要?

SEO关键字排名VS用户体验谁更重要? SEO关键字排名VS用户体验谁更重要?本文写于小站改版之后,由感而发。 先探讨一下关键字排名的作用,一个好的关键字排名,比如某某关键字排名第一,可以让客户通...
  • u012854850
  • u012854850
  • 2014年03月05日 13:31
  • 372

HTML5如何重塑O2O用户体验

低频次垂直O2O服务应该继续开发原生APP吗? 大家有没有发现做一个APP的推广成本和获取用户的成本越来越高?第二,用户安装APP之后,用户并不是经常点击使用APP的,那这是为什么?数据表明90%的O...
  • ppqiaoping
  • ppqiaoping
  • 2016年01月14日 15:31
  • 542

使用HTML5、CSS3和jQuery增强网站用户体验

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类...
  • Alinaxz
  • Alinaxz
  • 2011年11月18日 15:35
  • 723
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Fundation 5发布:号称最快版本,响应式用户体验更完善
举报原因:
原因补充:

(最多只允许输入30个字)