Fundation 5发布:号称最快版本,响应式用户体验更完善
来源:互联网 发布:淘宝悬浮导航 编辑:程序博客网 时间:2024/06/01 10:42
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">×</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发布:号称最快版本,响应式用户体验更完善
- 号称最快排序
- 更优秀的用户体验
- 开发者体验比用户体验更重要
- CYQ.Data 轻量数据层之路 V4.5 版本发布[更好的使用体验,更优的缓存机制]
- 互联网产品设计进阶(5)关于用户体验(边思考边完善)
- MYPM 国产非开源免费测试管理工具软件 WEB2.0用户体验零配置安装版本发布
- DOClever 5.0 版本重磅发布,全新的 UI 和用户体验
- 史上最快版本-文件审查控件Workshare V9.5 发布
- MemSQL,号称世界上最快的内存数据库
- genymotion-号称最快安卓模拟器
- fundation
- 用户体验设计师这样做更贴心
- VR创业更应该追求用户体验
- 用户体验面前更应该注重用户价值
- 用户体验面前更应该注重用户价值
- 如何设计出让用户更愉悦的用户体验?
- 响应式布局(待完善)
- nodejs 启动过程2
- 网页插入各类视频
- JS window对象的top、parent、opener含义
- The current identity (NT AUTHORITY\NETWORK SERVICE) does not have write access
- 储存过程 的 创建
- Fundation 5发布:号称最快版本,响应式用户体验更完善
- Hungarian notation 匈牙利命名
- TUP第31期将同步视频直播 向《浪潮之巅》吴军提问继续征集中
- Oracle 存储过程 编译时卡死不动
- 链接保存
- L2TP介绍
- [SqlException (0x80131904):用户 'NT AUTHORITY\NETWORK SERVICE' 登录失败。]
- 函数 的 创建
- TUP第31期:《浪潮之巅》吴军“start up新特点及企业发展机遇”全程图文报道