前端vue框架 响应式框架_响应框架–比较表

前端vue框架 响应式框架

Responsive frameworks are very popular nowadays. Today we look at a great compilation of all currently existing responsive frameworks. This table is a deep comparative analysis of frameworks, reflecting their advantages and disadvantages. The table list consists of paid and free open-source projects. All the projects are evaluated by the following parameters:: the use of css preprocessors, using a js library, dependence on third-party solutions that support Responsive web design and common elements in developing web projects.

响应框架在当今非常流行。 今天，我们看一下当前所有现有响应框架的出色汇编。 该表是对框架的深入比较分析，反映了它们的优缺点。 表格列表包含付费和免费的开源项目。 所有项目均由以下参数评估：使用css预处理程序，使用js库，对支持响应式Web设计的第三方解决方案的依赖以及开发Web项目中的常见元素。

In today’s review we provide the following frameworks:

在今天的回顾中，我们提供以下框架：

• Twitter Bootstrap

  Twitter的引导

• Gumby

  古比

• Foundation

  基础

• Semantic-ui

  语义用户界面

• Metro UI

  Metro UI

• Kube

  库贝

• Skeleton

  骨架

• Responsive Framework

  响应框架

• ZinoUI

  ZinoUI

• FlatUI

  FlatUI

Here is the result comparative table:

这是结果比较表：

Property	Twitter Bootstrap	Gumby	Foundation	Semantic-ui	metroui	Kube	Skeleton	Responsive Framework	ZinoUI	FlatUI
Preprocessors	LESS, SASS	SCSS	SCSS	No	LESS	LESS	No	LESS, SCSS, SASS, Stylus	No	LESS, SASS
JS-library	Jquery	Jquery	Jquery	Jquery	Jquery	Jquery	No	Pure JS, Jquery, AngularJS	Jquery	Jquery
using external plugins	No	jquery.validation, modernizr	Modernizr, FastClick	No	Yes (jquery.widget.min.js)	No	No	No	No	No
Grid system	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes
Responsive	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes
Typography	Yes		Yes	Yes	Yes	Yes	Yes	No	No	Yes
Tables	Yes	Yes	Yes	Yes	Yes	Yes	Yes	yes	Yes	No
Inputs	Yes	Yes	Yes	Yes	Yes	Yes	Yes	yes	No	Yes
SelectBox	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes
RadioBox	No	Yes	No	Yes	Yes	No	No	Yes	Yes	Yes
Checkbox	No	Yes	No	Yes	Yes	No	No	Yes	Yes	Yes
Slider	No	No	Yes	Yes	Yes	No	No	Yes	Yes	Yes
Rating	No	No	No	Yes	Yes	No	No	Yes	Yes	No
Search	Yes	No	Yes	Yes	Yes	Yes	No	Yes	No	Yes
Buttons	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
Switches		No	Yes	Yes	Yes		No	Yes	No	Yes
Progress bar	Yes	No	Yes	Yes	Yes	Yes	No	No	Yes	Yes
Carousel	Yes	No	Yes	No	Yes	No	No	Yes (Layred carousel, full-screen, 11 effects, touch, drag)	Yes	No
Tabs	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes (7 effects)	Yes	No
Accordion	Yes	No	Yes	Yes	Yes	Yes	No	Yes	Yes	No
Navs	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes	Yes	Yes
Drop-down menu	Yes	Yes	Yes	Yes	yes	Yes	No	Yes	Yes	Yes
Side menu	No	No	Yes	Yes	Yes	No	No	Yes	No	No
Full-screen menu	No	No	No	No	No	No	No	Yes(5 effects)	No	No
On-canvas menu	No	No	Yes	No	Yes	No	No	Yes(5 effects)	No	No
Breadcrumbs	Yes	No	Yes	Yes	Yes	No	No	No	No	No
Pagination	Yes	No	Yes	No	Yes	Yes	No	No	No	Yes
Labels	Yes	Yes	Yes	Yes	Yes	No	No	No	No	No
Alerts	Yes	Yes	Yes	Yes	Yes	Yes	No	No	No	No
Preloaders	No	No	No	Yes (3 types)	No	No	No	Yes (19 types)	No	No
Tooltips	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes (64 effects)	Yes	No
Modal	Yes	Yes	Yes	Yes	Yes	Yes	No	Yes (64 effects)	Yes	No
Price	Free	Free	Free	Free	Free	Free	Free	9$	59$	39$
Site	1	2	3	4	5	6	7	8	9	10

属性	推特 引导程序	古比	基础	语义用户界面	Metroui	库贝	骨架	React灵敏 构架	ZinoUI	FlatUI
预处理器	减， 萨斯	SCSS	SCSS	没有	减	减	没有	更少，SCSS，SASS，手写笔	没有	减， 萨斯
JS- 库	jQuery的	jQuery的	jQuery的	jQuery的	jQuery的	jQuery的	没有	纯JS，Jquery，AngularJS	jQuery的	jQuery的
使用外部插件	没有	jquery.validation，modernizr	Modernizr， 快速点击	没有	是 (jquery.widget.min.js)	没有	没有	没有	没有	没有
网格系统	是	是	是	是	是	是	是	是	没有	是
React灵敏	是	是	是	是	是	是	是	是	没有	是
版式	是		是	是	是	是	是	没有	没有	是
桌子	是	是	是	是	是	是	是	是	是	没有
输入项	是	是	是	是	是	是	是	是	没有	是
选择框	是	是	是	是	是	是	没有	是	是	是
单选框	没有	是	没有	是	是	没有	没有	是	是	是
复选框	没有	是	没有	是	是	没有	没有	是	是	是
滑杆	没有	没有	是	是	是	没有	没有	是	是	是
评分	没有	没有	没有	是	是	没有	没有	是	是	没有
搜索	是	没有	是	是	是	是	没有	是	没有	是
纽扣	是	是	是	是	是	是	是	是	是	是
开关		没有	是	是	是		没有	是	没有	是
进度条	是	没有	是	是	是	是	没有	没有	是	是
轮播	是	没有	是	没有	是	没有	没有	是(分层轮播，全屏，11种效果，触摸，拖动)	是	没有
标签	是	是	是	是	是	是	没有	是(7种效果)	是	没有
手风琴	是	没有	是	是	是	是	没有	是	是	没有
海军	是	是	是	是	是	是	没有	是	是	是
下拉式菜单	是	是	是	是	是	是	没有	是	是	是
侧面菜单	没有	没有	是	是	是	没有	没有	是	没有	没有
全屏菜单	没有	没有	没有	没有	没有	没有	没有	是(5种效果)	没有	没有
画布上的菜单	没有	没有	是	没有	是	没有	没有	是(5种效果)	没有	没有
面包屑	是	没有	是	是	是	没有	没有	没有	没有	没有
分页	是	没有	是	没有	是	是	没有	没有	没有	是
标签	是	是	是	是	是	没有	没有	没有	没有	没有
警报	是	是	是	是	是	是	没有	没有	没有	没有
预紧器	没有	没有	没有	是 (3种)	没有	没有	没有	是(19种)	没有	没有
工具提示	是	是	是	是	是	是	没有	是(64种效果)	是	没有
模态	是	是	是	是	是	是	没有	是(64种效果)	是	没有
价钱	自由	自由	自由	自由	自由	自由	自由	9 $	59 $	39 $
现场	1个	2	3	4	5	6	7	8	9	10

Next, we need to mention the components that were not included in the table, but they are unique and can help in the development.

接下来，我们需要提及表中未包括的组件，但是它们是唯一的，可以为开发提供帮助。

Metro UI (Metro UI)

Data Tables.

数据表。

Using this component you can display the information in a table. Supports sorting data, search data, different output number of records, the switches pages of notes.

使用此组件，您可以在表中显示信息。 支持排序数据，搜索数据，不同的输出记录数，笔记的切换页面。

Tree View.

树视图。

This component displays information in a tree view.

该组件以树状视图显示信息。

Steamer.

汽船。

This component is designed to create a timeline. There is support for filtering.

该组件旨在创建时间轴。 支持过滤。

Calendar.

日历。

DatePicer.

DatePicer。

Times.

时间。

Window.

窗口。

Component in exactly the same dialog box of the Windows operating system.

与Windows操作系统完全相同的对话框中的组件。

基础 (Foundation)

Lightbox.

灯箱。

Joyride.

Joyride。

This component helps to make the easy site navigation, using smooth animated scrolling.

此组件使用平滑的动画滚动有助于简化站点导航。

Pricing table.

定价表。

语义用户界面 (Semantic-ui)

The Reveal.

揭示。

This component helps to make 7 hover effects.

该组件有助于制作7种悬停效果。

Shape

形状

Using Shapes

使用形状

A shape must have defined the width and heights for each side or else text flow may change during the animation.

形状必须定义了每一边的宽度和高度，否则在动画过程中文本流可能会改变。

The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.

该模块使用3D转换，当前仅在现代版本的Chrome，Safari和Firefox中支持。

Sticky.

黏。

This component captures the blocks on the page when scrolling.

滚动时，此组件捕获页面上的块。

Framework has 29 css animation.

框架有29个CSS动画。

库贝 (Kube)

Autocomplete.

自动完成。

Infinite Scroll.

无限滚动。

This component carries out the loading content when scrolling.

滚动时，此组件执行加载内容。

Livesearch.

实时搜索。

Navigation Fixed.

导航固定。

Upload.

上载。

响应框架 (Responsive framework)

Responsive cart.

响应式购物车。

With this component you can create a responsive shopping cart. There is a version based on Jquery, and the second version of AngularJS. You can remove an item, change the number. Implemented AJAX requests.

使用此组件，您可以创建响应式购物车。 有一个基于Jquery的版本，另一个是AngularJS的版本。 您可以删除一个项目，更改编号。 实施的AJAX请求。

Responsive filter (dynamic grid).

响应式过滤器(动态网格)。

This components you can use to create a dynamic grid.

您可以使用此组件来创建动态网格。

DataTable.

数据表。

The component is based on AngularJS. Have a search through the records. Appearance corresponds to Material Design.

该组件基于AngularJS。 搜索记录。 外观与材料设计相对应。

Components for Material Design

材料设计组件

Implemented several components for Material Design (Tabs, Accordion, Form elements, Cards, Preloaders, Table)

为材料设计实现了几个组件(制表符，手风琴，表格元素，卡片，预加载器，表格)

ZinoUI (ZinoUI)

Upload.

上载。

Tree View.

树视图。

This component displays information in a tree view.

该组件以树状视图显示信息。

Calendar.

日历。

Chart.

图表。

ComboBox

组合框

FlatUI (FlatUI)

Video Player

视频播放器

Tags Input

标签输入

结论 (Conclusion)

In this article we reviewed the advantages and disadvantages of 10 frameworks. Each of them may help you in your work. Do not limit yourself to one. Use them all, but wisely!

在本文中，我们回顾了10个框架的优缺点。 他们每个人都可以帮助您的工作。 不要限制自己。 全部使用它们，但要明智！

翻译自: https://www.script-tutorials.com/comparative-table-of-responsive-frameworks/

前端vue框架 响应式框架