您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

十四款常见的Web前端开发框架

时间:2019-08-21 15:36:00  来源:  作者:
推荐十四款常见的Web前端开发框架 以后别只知道Bootstrap啦

 

 

 

在做web开发的时候经常会遇到一个问题,那就是,选择什么样的框架来做前端开发。下面封程中把目前常用的一些前端的框架简单的给大家介绍一下.

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架如上图。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JAVAScript插件。

Bootstrap是用动态语言LESS写的,主要包括四部分的内容:

脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。

基础css——包括基础的html页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。

组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。

JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。

Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。

jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站手机端也可以优雅访问,那么这个资源对你来说很方便易用。

Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。

http://StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。

BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。

Bootswatch —— 提供大量免费的Bootstrap主题。

Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。

LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

2、flex

Apache基金会发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本

需要注意的是

2014年03月10日,Apache Flex技术社区发布了全新的Apache Flex 4.12.0版本,该版本是Apache Flex 4.11.0的升级版本,改进的功能包括:

◆支持最新版本的Flash Player

◆支持最新的AIR运行时

◆改进了内存占用和性能

◆改善了针对移动平台的组件的样式

◆支持IOS7系统

◆修复了超过80个漏洞[4]

2014年05月10日,Apache对4.12.0版本进行优化改进,发布了Flex 4.12.1,新版本加入对全新Flash Player及Air运行时的支持,改进对移动媒体查询的支持,并修复20多个Bug。

3、extjs

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。

功能丰富,无人能出其右。

无论是界面之美,还是功能之强,ext的表格控件都高居榜首。

extjs官网:http://extjs.org.cn/

华丽的界面,灵活的功能,还有开发工具都是配套的,但有个最大的问题,用就得花钱!

4、easyui

easyui帮助你构建你的web应用更加容易。

它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。

官方网站是:

http://www.jeasyui.com/

但是她有一个最大的问题就是代码只能找到以前的开源的版本,到了1.2以后的版本源代码都是经过混淆的,如果遇到问题修改起来会非常麻烦!不过一个比较大的优势是开源免费,并且界面做的还说的过去!

5、MiniUI

又一个基于jquery的框架,开发的界面功能都很丰富。

jQuery MiniUI – 快速开发WebUI。

它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。

使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。

界面做的挺不错,功能也挺丰富,但是有两个比较大的问题,一个是收费,一个是没有源码,说白了,不开源!基于这个开发如果想对功能做扩展就需要找他们的团队进行升级!

6、jQuery UI

jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。

功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!

7、DWZ

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

设计目标是简单实用,快速开发,降低ajax开发成本。

欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.共同推进国内整体ajax开发水平。

DWZ论坛 http://bbs.dwzjs.com

在线演示地址 http://demo.dwzjs.com

毕竟是国产的,支持一下,而且源码完全公开,可以选择一下!不过性能怎么样不敢确定!

8、GWT

google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。

你不用去了解这样那样的javascript框架,通过java你就可以写出功能丰富的界面,可以做单元测试,毕竟是google的产品,严重支持一下!

9、YUI

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证,基本上没怎么研究过!

YUI Compressor倒是挺出名的,这套UI库不知道应用的情况怎么样!

10、Sencha

Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。

公司的框架,并且是几样库的强强联合,值得推荐!

11、Dojo

在国内应用好像不是很广,不过性能上应该没问题。

Dojo是一个用javascript语言实现的开源DHTML工具包。

有多个基金会的支持,包括IBM和SUN,都是软件界的泰斗,值得信赖!

12、ZK

ZK是 一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了多样丰富、可重复使用的XUL与HTML组件,以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。

在线的demo

设计器的demo

日历组件

功能丰富,全面,文档齐全,而且升级了很多次,非常值得推荐!

13、OperaMasks-UI

OperaMasks- UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前,该团队已将这一产品以LGPL 开源协议开放给社区。

文档丰富,功能齐全,而且很容易使用和开发!而且是国产的哟!

14、JavaFX

Sun 公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言(以下称为JavaFX)是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。JavaFX技术有着良好的前景,包括可以直接调用Java API的能力。因为 JavaFX Script是静态类型,它同样具有结构化代码、重用性和封装性,如包、类、继承和单独编译和发布单元,这些特性使得使用Java技术创建和管理大型程序 变为可能。

不管用的人多少,毕竟是从sun开始,现在是oracle,相信会有一个广阔的市场,但是确实不知道有哪个公司用这个框架开发!

目前国内常见、并且强大实用的web前端开发框架就是这些,希望通过我的整理可以帮助到大家想学更多知识可以关注小编哦 谢谢大家.



Tags:开发框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 开发框架  点击:(19)  评论:(0)  加入收藏
一、搭建环境1、创建数据库表和表结构create table account(id INT identity(1,1) primary key,name varchar(20),[money] DECIMAL2、创建maven的工程SSM,在pom.xml文件引入...【详细内容】
2021-11-11  Tags: 开发框架  点击:(29)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 开发框架  点击:(34)  评论:(0)  加入收藏
直奔主题,今天我要给大家分享的基于ASP.NETCore开源二次开发框架就是YiShaAdmin。YiShaAdmin 是一款基于.NET Core Web + Bootstrap的企业级快速后台开发框架。内置模块如:用...【详细内容】
2021-07-19  Tags: 开发框架  点击:(145)  评论:(0)  加入收藏
自微软宣布 .NET 5 平台消息之后, 相关的快速开发框架 就如 雨后春笋 般的多了起来,众所周知,框架好不好,其 wiki 真的非常重要,好的 wiki 能让人 更加快速 的上手,并体验 起来 F...【详细内容】
2021-04-06  Tags: 开发框架  点击:(379)  评论:(0)  加入收藏
01 智能合约开发框架TOP3下面这三个智能合约开发框架是适用于所有人的。当然,它们各自在功能和侧重上又略有不同,大家可以自行选择:1.Hardhat (JavaScript)2.Truffle (JavaScript)3...【详细内容】
2021-03-29  Tags: 开发框架  点击:(189)  评论:(0)  加入收藏
接下来我应该学习什么?如果你是一名开发人员,这个问题应该一直在你的脑海中。每天都有新的技术问世,也有对现有技术的改进。由于我们无法学习所有这些技术,所以决定下一步应该...【详细内容】
2020-12-25  Tags: 开发框架  点击:(190)  评论:(0)  加入收藏
Version:0.9 StartHTML:0000000105 EndHTML:0000064633 StartFragment:0000000141 EndFragment:0000064597 本文梳理了在搭建开发框架时的一些考量及具体的处理方法。 框架...【详细内容】
2020-11-16  Tags: 开发框架  点击:(97)  评论:(0)  加入收藏
定位拒绝CRUD。用尽可能简单的方式,完成尽可能多的需求。通过约定的方式 实现统一的标准。告别加班,拒绝重复劳动,远离搬砖概述"Rocket-API" 基于spring boot 的API敏捷开发框...【详细内容】
2020-11-06  Tags: 开发框架  点击:(134)  评论:(0)  加入收藏
之前我分享过一款基于ASP.NET MVC + Layui 的通用后台快速开发框架elight.mvc,受到了很多朋友的关注。今天我将给大家分享一款基于.NET Core最新版+Bootstrap的通用后台快速...【详细内容】
2020-09-21  Tags: 开发框架  点击:(1137)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条