首页 > 经验 > 关键词  > Foundation最新资讯  > 正文

Foundation框架 - 快速创建跨平台的网站页面原型

2011-12-13 13:55 · 稿源:beforweb

门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:

每天,人们用来上网的设备种类和数量都在不断上升。

为每种设备设计开发不同的界面是不可能的。

即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统。

如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。

Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。

接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!

资源概览

首先到foundation.zurb.com下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:

1、index.html - 我们将从这里开始创建第一个页面。

2、javascripts和stylesheets路径 - 主要的静态资源文件,包括jQuery及所需的样式表。

3、humans.txt和robots.txt - 里面的代码算是不错的样板,有空的时候可以溜几眼。

4、JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:

1、global.css - 全局基础样式表,包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。

2、ui.css - 用来对那些组成原型的常规UI元素进行样式定义。

3、mobile.css - 负责移动设备方面的样式,涉及响应式的样式定义都在这里。

分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。

接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。

网格系统

首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代:

该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。

行容器拥有一个固定的最大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。

列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器。上面的代码中,我们创建的是典型的“内容+侧边栏”布局,宽度分别为全宽的2/3和1/3。

网格布局可以进行嵌套:

Foundation官网中有一些布局范例可以参考。

举报

  • 相关推荐
  • 企业如何低成本搭建可快速响应的远程技术支持平台?

    文章探讨了极端天气下企业技术支持的转型需求,重点介绍了远程技术支持的解决方案。传统线下服务面临出行困难、安全隐患等问题,而远程技术支持能实现设备监测、故障排查等操作,保障人员安全。贝锐向日葵推出的远程控制方案具有高效稳定、快速响应等特点,支持文件传输、工单流转等功能,并与ITSM平台深度整合,形成闭环服务体系。方案还提供团队版共享机制,适合初创团队低成本使用。在极端天气频发的当下,远程方案能显著提升企业抗灾能力,实现降本增效。

  • 哪个网站的AI产品库最全?最全AI工具网站平台推荐

    本文介绍了AI工具爆发式增长背景下,全面及时的AI产品库的重要性。重点推荐AIbase平台,该平台收录7000+AI产品,覆盖30+功能分类,支持多维度筛选,数据实时更新。AIbase优势包括:1)全品类覆盖;2)开发者友好,提供API接口;3)个性化体验,支持收藏和导出工具清单。适合内容创作者、开发者、学生等各类用户使用。通过AIbase可快速找到适合的AI工具,提升工作效率。访问�

  • 国内MCP资源平台有哪些?MCP工具网站推荐

    在人工智能技术飞速发展的今天,Model Context Protocol(MCP,模型上下文协议)作为一种创新的开放标准协议,正在为AI模型与外部工具和服务的交互带来前所未有的便利。今天,我们有幸深入报道一个专注于MCP服务器和相关服务的集合平台——AIbase(https://mcp.aibase.cn/)。这个平台不仅为全球的AI开发者提供了一个强大的资源库,还通过一站式整合、安全实践和开发效率工具,极大地

  • 最新AI资讯哪里看?盘点国内优质AI资讯网站和获取渠道

    本文介绍了获取最新AI资讯的重要性及有效方法。在AI技术快速发展的背景下,及时获取准确信息对从业者至关重要。文章推荐了36氪、钛媒体、虎嗅等国内优质AI资讯平台,以及清华北大等高校研究机构的官方渠道。建议构建多元化信息获取体系,包括订阅专业日报、关注社交媒体热点、使用聚合平台等。同时强调信息筛选验证的重要性,提倡建立个人知识管理系统。未来AI资�

  • 技嘉科技 STEALTH Revolution 玩转简约装机美学 力邀创作者打造纯白梦幻桌机

    技嘉科技推出STEALTH Revolution活动,主打纯白美学装机概念。活动以X870AORUS STEALTH ICE主板为核心,邀请全球创作者打造个性化桌机。该系列采用背插式设计,简化装机流程,释放机箱空间,便于展示水冷设备和RGB灯效。新品涵盖X870/B850主板、RTX5090显卡及全景机箱等,联合10余家机箱品牌推出20余款兼容产品。活动提供限量主板供参赛者使用,并开放大众投票评选优秀作品,参与者有机会赢取丰厚奖品。技嘉旨在推动"背插主板×纯白机身"的装机新潮流,满足市场对简约风格的需求。

  • 国内详细MCP教程网站有哪些?MCP服务资源平台去哪找?

    在当今快速发展的AI技术浪潮中,Model Context Protocol(MCP,模型上下文协议)作为一种新兴的开放标准协议,正逐渐成为AI领域的重要组成部分。 今天,我们有幸介绍一个专注于MCP服务器和相关服务的集合平台——AIbase。 AIbase平台为全球的AI开发者和爱好者提供了一个全面的MCP服务器资源库。据最新统计,该平台已经收录了超过 121231个 MCP服务器,涵盖了从热门推荐到最近更新�

  • 国内有哪些AI资讯网站?最全面的AI新闻资讯平台盘点

    本文介绍了国内主要AI资讯平台,帮助读者获取最新行业动态。综合类平台包括机器之心(专注前沿技术报道)、AI科技评论(雷锋网旗下专业视角平台)和新智元("智能+"为核心的全方位报道);专业技术导向平台有CSDN AI频道(含丰富实践内容)和InfoQ AI栏目(侧重开发实践);新兴聚合平台AIbase整合国内外最新资讯,量子位则专注AI与量子计算等前沿领域。建议根据�

  • MCP server资源网站去哪找?国内MCP服务合集平台有哪些?

    在人工智能飞速发展的今天,AI模型与外部世界的交互变得愈发重要。一个好的工具不仅能提升开发效率,还能激发更多的创意。今天,我要给大家介绍一个宝藏平台——AIbase(<https://mcp.aibase.cn/>),一个专注于MCP(Model Context Protocol)服务的全球集合平台,它正在悄然改变AI应用开发的格局。 平台精心挑选了全球最受欢迎的MCP服务进行推荐。这些服务经过了市场的检验,具�

  • 运动疲劳如何快速缓解?iRest艾力斯特按摩椅为专业运动疲劳恢复提供全新方案

    文章探讨运动性疲劳问题及其解决方案。传统消除疲劳方式包括营养补充和物理放松两类,但专业按摩人员短缺且费用较高。iRest艾力斯特按摩椅提供更便捷高效的恢复手段,经与温州医科大学合作研究证实,能有效改善运动员肌肉疲劳状况,降低肌肉硬度,促进恢复。按摩椅操作简便、性价比高,适合专业运动员和普通运动爱好者使用,为大众健康生活提供了智能便捷的解决方案。

  • 国内MCP服务器搜索引擎有哪些?MCP服务网站推荐

    在人工智能技术飞速发展的今天,AI模型与外部工具和服务的交互能力正逐渐成为推动技术进步的关键因素。今天,我们聚焦于一个新兴的、极具潜力的平台——AIbase(https://mcp.aibase.cn/),它为全球的AI开发者和研究人员提供了一个前所未有的MCP(Model Context Protocol,模型上下文协议)服务器集合平台,助力AI技术的进一步发展。 MCP协议是一种开放标准协议,旨在允许AI模型与外部