vlambda博客
学习文章列表

响应式网页设计现在已经是老生常谈了，不需要任何进一步的介绍、细节或强调。默认情况下，每位专业网页设计师[https://www.ramotion.com/agency/web-design/]都会开发网站或 Web 应用程序，同时牢记各种尺寸的设备，从小屏幕手机、平板电脑到笔记本电脑，再到台式机和大屏幕电视。

开发响应式网站和 Web 应用程序可能会成为一项复杂的任务，特别是当设计师尝试使用纯 html、CSS 和 JavaScript 从头开始这样做时。这就是HTML5 框架通过标准化和可重用组件来拯救的地方。

随着 HTML 和 CSS 以其流行的 HTML5 和 CSS3 形式达到新的高度，包括 Chrome、Opera、Mozilla 和 Internet Explorer 在内的所有浏览器也是如此。HTML5 UI 框架在过去几年也不断发展，现在提供了支持现代和响应式网页设计的功能和组件。

为什么使用 HTML5 框架？

大量使用这些 Web 框架的主要原因是使用 HTML、CSS 和 JavaScript（Web 运行的三大支柱）创建的即用型 UI 工具包、组件和设计元素的可用性。

HTML5 框架可以大致分为三大类——

• 简单框架 - 提供网格和简单组件以在您的 Web 项目中使用

• 完整框架 - 提供构建 Web 项目的基础

• 移动框架——为混合移动应用程序开发提供基础

在本文中，我们将重点介绍响应式网页设计框架，包括Skeleton、CreateJS、MaterializeCSS、HTML Kickstart 和HTML5 Boilerplate等简单框架以及 Bootstrap、Foundation、Montage Studio 和 jQWidgets 等成熟框架等等。.

您可能还喜欢 –用于 JavaScript 3D 游戏的 HTML5 3D 引擎[https://noeticforce.com/best-3d-javascript-game-engines-frameworks-webgl-html5]。

如果您对使用HTML5 框架构建混合移动应用程序感兴趣，请点击下面的文章链接。本文介绍了一些最流行的混合应用程序开发框架，例如 Ionic、Sencha Touch、kendo UI、Intel XDK、Onsen UI 等等。

您可能想查看Webix中的HTML5 框架组件！[http://webix.com/]

使用这些框架，可以实现自上而下或自下而上的设计。自下而上的方法使您有机会包含许多较小的网格系统、库和单独的组件，以将您的 Web 项目组合在一起。

自上而下的方法通常从像 Bootstrap 或 Foundation 这样的完整框架开始，任何缺少的东西都可以使用任何第三方库或其他简单框架包含在内。

让我们看看最好的 html5 响应式网页设计框架——

Bootstrap – 最流行的 HTML5 响应式设计框架

Bootstrap Twitter 工程师的宝贝是响应式网页设计框架的老大。它用于创建响应式移动优先网站和复杂级别的 Web 应用程序，以在各种尺寸的设备上运行。

Bootstrap 最初由 Twitter 的设计师和开发人员创建，在作为开源框架免费提供之前用作 Twitter 蓝图。Bootstrap 是在Github[https://github.com/twbs/bootstrap]开发和维护的，其惊人的社区通过发布持续升级来保持最新和最伟大的网页设计。

Bootstrap 支持 Google 的材料设计、Sass & Less CSS 预处理器[https://noeticforce.com/best-css-preprocessors-for-fast-web-design-development]、许多自定义 HTML 和 CSS 组件、jQuery 插件等等。

以下是使引导程序如此成功的一些原因——

• 易于上手，附带大量示例、教程和出色的文档。

• 用于创建固定宽度和响应式网格的灵活网格系统

• 预样式表、下拉菜单、按钮组、警报、进度条、导航栏表单、网格、基本样式、CSS 组件、排版、图标、图像等等

• 大量现成的模板

• 移动优先、可访问性和浏览器兼容性

备受期待的 Bootstrap 4 有望为快速移动优先 Web 应用程序开发带来更多功能。

您可以通过三个选项来使用 Bootstrap – 1. 使用 Max CDN 在您的项目中包含已编译的 Bootstrap CSS 和 JS 文件。2. 下载源代码 3. 使用包管理器，如 bower、Composer、Meteor 或 NPM。

Bootstrap 官网——getBootstrap[http://getbootstrap.com/about/]。

HTML5 样板——设计蓝图

让我们谈谈一些在设计师和开发者社区中非常强大和流行的简单东西——HTML5 Boilerplate。

HTML5 Boilerplate 是让您的 Web 开发项目领先一步的最佳选择之一；它更像是您的 Web 项目的蓝图。开发人员可以选择现成的模板并进行修改，而不是从头开始构建所有内容。

HTML5 Boilerplate包含非常精简的移动友好 HTML5 模板、触摸设备图标占位符、优化的 Google 分析片段，包括 normalize.css、媒体查询、打印样式等、缩小的 jQuery、用于特征检测的 Modernizr 库、用于闪电般快速的 apache 设置性能等等。

HTML5 Boilerplate 是 Paul Irish 和 Divya Manian 的创作。自 2010 年以来，它经历了多次增强和发布迭代，成为今天的框架。

它是 GitHub 上最受欢迎的开源项目之一，拥有超过 36K 颗星，并已被 Google、NASA、Microsoft、Creative commons、Australia post 等公司使用。

HTML5 Boilerplate 官网 – HTML5 Boilerplate Framework[https://html5boilerplate.com/]

Bootstrap 与 HTML5 样板

简而言之，Bootstrap 是一个成熟的响应式设计框架，包含所有构建块，可以创建各种规模和复杂性的响应式网站。另一方面，样板文件充当您的 Web 项目的蓝图，并为您构建项目提供了坚实的起点。

Foundation – 响应式网页设计框架（黄金标准）

Foundation 拥有超过 25K 的 GitHub 明星和 eBay、Adobe、HP、思科、迪士尼、三星、亚马逊等客户群。Foundation 是响应式网页设计框架领域无可争议的王者。

Foundation 是来自 Zurb 公司的绝对企业级响应式网页设计框架，该公司在网页设计和开发方面拥有超过 15 年的经验。

Foundation在受欢迎程度和易用性方面与其主要竞争对手Bootstrap竞争非常激烈。最新版本的 Foundation – Foundation 6带来了更多功能，使创建响应式、语义化、移动优先和专业网站变得轻而易举。

Foundation 仅使用包括HTML、JavaScript、CSS、HTML5 样板、jQuery 和 Normalizr等在内的前端技术构建，因此不依赖任何后端或服务器端堆栈。

Foundation 也被无缝地用于流行的内容管理系统，如 WordPress 和 Drupal 等，以及 .Net 框架。

在此处阅读有关 Foundation 框架的更多信息 – Foundation[http://foundation.zurb.com/]

语义用户界面

语义 UI 也是一种广泛使用的响应式设计框架，但与 Bootstrap 或 Foundation 相比，它是一种不同的动物。语义类和组件使用自然语言，如名词、单词、修饰关系，看起来像英语等。

像下面这样的东西——

<div class=”ui 三个按钮”> <button class=”ui active button”>一个</button> <button class=”ui button”>两个</button> <button class=”ui button”>三个< /按钮> </div>

一个完整的项目不仅仅是前端，为了实现这一点，Semantic 与 Angular、React、Ember Meteor 和许多其他框架集成。

在此处阅读有关语义的更多信息 –语义 UI[https://semantic-ui.com/]

Skeleton – 轻量级基础 HTML5 框架

Skeleton 是那些简单的框架之一，它赋予了为任何 Web 项目添加坚实基础的所有能力。Skeleton 不像Bootstrap、Foundation或MontageJS那样是一个完整的框架，但只提供了少数组件，包括一个非常灵活的 HTML 网格。

Skeleton 是一个只有大约 400 行代码的轻量级框架，无需安装或编译任何东西就可以立即开始使用 Skeleton。

您使用 Skeleton 获得的东西很少包括响应式网格、排版、按钮、表单、列表、表格、媒体查询和更多实用程序。

MontageJS 与蒙太奇工作室

MontageJS 是另一个在 BSD 许可下可用的开源 HTML5 框架，可以从 GitHub 存储库免费下载。MontageJS 使用现代 Web 技术，符合 Web 标准并确保性能和易于维护。

MontageJS 在组件基础架构上工作，并且蒙太奇应用程序应该是单个组件的组合。人们可以很容易地将一个复杂的项目分成更小的组件，这些组件可以在项目之间进一步重用。

MontageJS 的一个强大功能是它的双向数据绑定，它允许在由对象、集合和组件组成的视图和模型之间轻松进行状态管理。设计人员可以专注于 HTML 和 CSS，而开发人员则使用 JavaScript 处理组件行为和业务逻辑。

准备使用的蒙太奇模板是通过组装各种组件创建的 HTM5 文档。

MontageJS 由Montage Studio支持，它允许使用 MontageJS 拖放创作/创建响应式 Web 应用程序。Montage Studio 是 MontageJS 的专用编辑器（目前处于测试阶段），这就是使 MontageJS 成为有吸引力的选择的原因。

在此处阅读有关 MontageJS/Montage Studio 的更多信息 – MontageJS[http://montagestudio.com/montagejs/]

CreateJS

CreateJS 是一个完全不同的球类游戏，它包含可用于创建基于 HTML5 的丰富交互内容的模块化库和工具的集合。

包中包含的一些流行的库是 -

• EASELJS – 控制和管理 HTML5 画布元素

• TWEEENJS – 使用 HTML5 和 JavaScript 对 web 进行补间和动画处理

• SOUNDJS——让网络听到他们想要的

• PRELOADJS - 控制你如何加载各种同意

每个响应式网页设计框架都带有一些特色，而 CreateJS 恰好在基于 HTML5 的广告世界中占有一席之地。CreateJS 和 Adobe animate 是一个杀手级组合，设计师大量使用它来创建交互式和有吸引力的广告。

CreateJS 得到了 Microsoft、Mozilla、Adobe 和 gskinner.com 的坚实支持，听起来很有希望。

在此处阅读有关 CreateJS 的更多信息 – C createJS[http://www.createjs.com/] Framework HTML5[http://www.createjs.com/]

JQWidgets

jQWidgets 是另一个强大的包，它使创建响应式网站和应用程序变得轻而易举。jQWidgets 是一款商业产品，可用于开发各种规模和复杂性的项目由一家“营利”公司开发，您可以获得最高专业等级的所有内容以及出色的开发支持和文档。

JQWidgets 也适用于开放标准并使用HTML5、CSS、jQuery、SVG 和 JavaScript。它还支持 TypeScript、AngularJS 和 Knockout JS，并与 Node.js、PHP、ASP 和 JSP 等其他后端开发技术集成。

JQWidgets 的主要特性包括：

• 支持触控的 jQuery 小部件

• 准备好使用网络和移动主题

• 输入验证

• 用于后端数据访问的适配器

• 国际化和 WAI-ARIA 兼容

• 用于创建现代 UI 的 Angular 2 集成

• 准备好使用 React.JS 组件

• 准备好为 ASP.NET MVC 使用 UI 标记助手

jQWidgets经过高度优化，占用空间小，支持从小屏幕手机到大屏幕电视的多种设备。它还提供内置的浏览器检测功能，以实现无缝的用户体验。

jQWidgets 的受欢迎程度和功能可以从波音、Nvidia、爱立信、美国运通、高通、施乐和许多其他公司等顶级公司使用这个框架的事实来衡量。

HTML 启动

HTML kick start 是另一个流行的精益响应式设计框架，它为快速网站开发提供 HTML5、CSS 和 JS 组件。一些组件如幻灯片、代码/前、选项卡、面包屑、菜单、表格、排版、字形、按钮等等。

该框架是 Joshua Gatcke 创建的，看起来很有前途。但是，与 Bootstrap、Skeleton、Foundation 和 Montage 等怪物相比，它仍然是新手。

HTML5 和 HTML5 框架的现状

HTML5 无可争议地统治着现代 Web 和应用程序设计的世界，全球的开发人员都在使用 HTML5 进行功能丰富和复杂的设计。

HTML5 的一些强大功能包括包含 <audio> 和 <video> 元素，这使得可以轻松地包含多媒体并操纵其工作方式。只是为了强调这些新元素的力量，看看一些最大的网站，如 YouTube、Facebook 和 Twitter，它们已经开始使用 HTML5 来提供视频内容，而不是使用 Flash 或其他媒体播放器。

我们已经讨论了大多数使用 HTML5 进行响应式网页设计的主流框架，还有另一种框架专门关注 Google 的材料设计指南，并提供 HTML、JS 和 CSS 组件来创建具有材料设计外观的移动优先网站.

该类别中一些最受欢迎的框架包括 MaterialUI、MaterializeCSS、getMDL.io – Material design lite、MUICSS 和 LumX 等。

结论

网页设计是一门艺术和科学，它依赖于设计师的创造力以及技术和工具的最新进展。没有一套正确的工具、库和框架的创意设计师可能不会成功，或者可能无法生产出具有成本效益的产品。

框架在整个网页设计工作流程中起着重要作用，应通过详细分析谨慎选择。

本文讨论的各种HTML5 框架确保利用最新和最出色的网页设计，并使响应式网页设计变得轻而易举。

您的响应式网页设计框架是什么，请通过评论与我们的读者分享！