十大前端开发框架_十大前端开发框架：第2部分

最新推荐文章于 2024-06-30 14:53:39 发布

dingshi7798

最新推荐文章于 2024-06-30 14:53:39 发布

阅读量136

点赞数

文章标签： css java html javascript python ViewUI

原文链接：https://www.sitepoint.com/top-10-front-end-development-frameworks-part-2/

版权

十大前端开发框架

在本文的第一部分，我们已经看到了一些与Bootstrap相关的不错的框架。如果您对所有这些Bootstrap都感到厌倦，请深呼吸，为真正不同的事情做好准备。让我们从Bootstrap – Foundation的主要竞争对手开始。

5.基础

Foundation是一个功能强大，功能丰富的响应式前端框架。借助Foundation，您可以快速构建原型并构建可在任何类型的设备上运行的网站或应用程序，其中包括大量的布局结构，元素和最佳实践。它的构建首先考虑了移动性，利用语义功能，并使用Zepto代替jQuery，以带来更好的用户体验和更快的性能。

Foundation具有一个12列的灵活，可嵌套网格，功能强大，足以让您快速创建多设备布局。就功能而言，它提供了许多功能。字体，按钮，表单和各种导航控件都有样式。提供了许多有用CSS组件，例如面板，价格表，进度条，表格，缩略图和Flex视频，它们可以在任何设备上正确缩放视频。并且，当然，JavaScript插件包括下拉菜单，joyride（一次简单的网站浏览），magellan（一个粘性导航，指示您在页面上的位置），orbit（具有触摸支持的响应式图像滑块），显示（用于创建模态对话框或弹出窗口），部分（传统手风琴和标签的强大替代品）和工具提示。

该框架还提供了许多有用的附加组件。

模板– Foundation中所有可用的UI元素，以Omnigraffle模板和矢量PDF的形式提供，可更快，更轻松地构建线框和模型。
HTML模板–方便，随时可用的布局，可让您快速开始构建并继续使用。要使用它们，您只需获取代码并将其放在页面的<body>标记之间。
图标字体–这些是使用方便的Web字体存储的象形图标的自定义图标集。
SVG社交图标–一组与分辨率无关的社交图标。
响应表– Foundation的响应表的机制是获取第一列并将其“固定”在表的左侧，从而允许您滚动其下的其他列。
画布外布局–这些布局使您可以隐藏移动设备上的内容或导航，直到更大的屏幕尺寸使其可见或用户采取行动将其显示为止。当最后一次发生时，内容或导航会滑入视图。

如您所见，Foundation就像是Web开发人员/设计人员的宝库。为了只得到您需要的内容，您可以使用定制器来构建定制下载。

6.基础CSS

GroundworkCSS是前端框架家族的新成员。这是一个完全响应HTML5，CSS和JavaScript工具箱，利用Sass和Compass的功能构建而成，使您能够快速构建原型并构建可在几乎任何设备上运行的网站和应用程序。

它提供了一个非常灵活的，可嵌套的，基于分数的流体网格系统，可以创建任何布局。 GroundworkCSS具有一些真正富有表现力的功能，例如平板电脑和移动网格，当视口小于768或480像素宽时，它们可以保持网格列的结构，而不是将网格列折叠成单独的行。另一个很酷的功能是jQuery ResponsiveText插件，它使您能够动态调整大小以适应视口宽度的文本：对于可伸缩标题和构建响应表非常有用。

该框架包括一组丰富的UI组件，例如选项卡，响应数据表，按钮，表单，响应导航控件，磁贴（单选按钮和其他无聊的标准表单元素的漂亮替代品），工具提示，模式，Cycle2（功能强大，响应Swift内容滑块），以及更多有用的元素和助手。它还提供了一套不错的矢量社交图标集和FontAwesome中包含的全套象形图标集。

要查看实际的框架，可以使用浏览器窗口顶部中心的调整大小。这样，您可以在探索框架功能的同时，针对不同的大小和视口测试组件的响应能力。

大量示例很好地记录了GroundworkCSS，并且为使您快速入门，该框架还为您提供了多个响应模板。我认为唯一的弱点是缺少自定义下载的方法。

7.甘比

Gumby是使用Sass和Compass构建的简单，灵活且强大的前端框架。

其固定的布局可针对桌面和移动分辨率自动优化内容。它支持具有不同列变化的多种类型的网格，包括嵌套的网格。 Gumby有两个PSD模板，可让您开始在12和16列网格系统上进行设计。

该框架提供功能丰富的UI Kit，其中包括按钮，表单，移动导航，选项卡，跳过链接，切换和开关，抽屉，响应图像，视网膜图像等。遵循最新的设计趋势，UI元素具有Metro风格的平面设计，但是您也可以将Pretty风格与渐变设计一起使用，或者根据需要将两种样式混合使用。一组出色的响应式，与分辨率无关的Entypo图标（供您在Web项目中使用）已完全集成到Gumby Framework中。

Gumby还有一个非常好的带有颜色选择器的定制程序，可以帮助您轻松构建自定义下载。