前端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:
在今天的回顾中,我们提供以下框架:
Here is the result comparative table:
这是结果比较表:
Property | 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框架 响应式框架