web框架_web前端框架 - CSDN
精华内容
参与话题
  • 几款常用的高质量web前端框架

    万次阅读 2018-05-19 00:12:42
    转载:... 原 几款常用的高质量web前端框架 <div class="article-info-box"> <div class="article-b

    转载:https://blog.csdn.net/qianduankuangjia/article/details/78042944

    Web前端框架就是为了节约开发成本和时间,一般开发一个项目都会用到前端框架(除非自己有前端开发团队),根据我经验找的几款web前端框架做出了分析。都是个人意见,仁者见仁智者见智。

    QUICK UI


    QUICK UI是一套完整的企业级web前端开发解决方案,由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量,提高开发效率,快速构建功能强大、美观、兼容的web应用系统。

    QUICK UI优势:

    功能最为强大

    QUICKUI经历了7年的迭代更新,不断从客户的各种业务中对组件的需求进行归纳和抽离,从而打造新的组件和功能。现在最新的4.0版本框架包含了一百多种组件,一千多个应用场景示例。可以说在前端框架领域中,QUICKUI拥有功能最强大组件库。

    运行最为稳定

      很多其他的第三方UI控件在简单场合使用OK,到了复杂的场景中就会出现很多问题,这种现象很常见,因为在组件设计时无法预料到所有的应用场合。而QUICKUI7年间经历了数千个项目实际检验,在各种复杂场景都应用过,并根据客户的反馈不断完善和调整。目前的第四代可以说是最稳定、最完美的版本。

    丰富精美的界面皮肤

      跟其他web前端框架仅仅是一套组件库不同,QUICKUI是一整套前端解决方案,拥有丰富的外观界面解决方案。采用现今流行的扁平化设计理念,推出了包括登录、响应式web、工作桌面、地图类、门户风格、大屏展示风格等等几百套制作精美、用户体验优秀的界面。这些界面是以QUICKUI皮肤包的形式发布,使用和更换都非常方便。

    事无巨细的开发文档

    QUICKUI拥有16万字+的开发文档,框架和组件的每一个功能点都有详细的讲解和代码示例,用于开发过程中随时查阅。除了框架机制讲解和组件使用教程,文档还涉及web前端开发的很多知识。仔细阅读并结合框架使用的话,你很快就能成为web开发的高手。

    上手开发非常容易

    QUICKUI采用组件化思想来构建组件,一个组件就是一两句html的标签,使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来,很大程度减少前台编码的出错率;保留了HTML的布局方式,从而快速进行页面布局。对开发者前台技术要求也非常低,只需要了解html语法和一些简单的JS即可,从而把更多精力放在业务功能的实现上,极大地提高开发效率。

    浏览器兼容性非常好

    QUICKUI4.0使用了很多HTML5CSS3技术用于提高表现力和用户体验,这些新的特性在现代浏览器中会有很好的效果。但是,国内依然有大量的用户在使用IE7IE8等旧时代的浏览器,为照顾这部分用户,框架采用了渐进式思想,确保低版本浏览器也能正常使用。所以,QUICKUI兼容IE7以上所有主流浏览器。

    flex

     

    Apache基金会今天发布了Flex4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。

      需要注意的是,Flex目前还在孵化阶段,还不是Apache的正式项目,Flex4.8也不是一个正式的Apache版本。

    Apache称,该版本标志着Flex新时代的开始,Flex的未来将由社区来驱动,而不是由一个公司驱动。开发者可以通过贡献代码,来帮助改进Flex,如修复bug、增加功能等。

     

      从Macromedia卖给Adobe,然后又捐给apache,不知道搞什么名堂。不过还好没有经过大幅重构,否则就真的是悲哀了!

     

    extjs

     

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

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

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

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

     

    easyui

     

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

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

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

     

    jQueryUI

     

    jQueryUI是一套jQuery的页面UI插件,包含很多种常用的页面空间,例如Tabs(如本站首页右上角部分)、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。  功能非常全面,界面也挺漂亮的,可以整体使用,也可以分开使用其中的几个模块,免费开源!

     

    MiniUI

     

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

    jQueryMiniUI–快速开发WebUI

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

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

     

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

    DWZ

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

     

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

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

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

    YUI

    Yahoo!UILibrary (YUI)是一个开放源代码的JavaScript函数库,为了能建立一个高互动的网页,它采用了AJAX,DHTMLDOM等程式码技术。它也包含了许多CSS资源。使用授权为 BSD许可证,基本上没怎么研究过!YUICompressor倒是挺出名的,这套UI库不知道应用的情况怎么样!

     

    Sencha

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

     

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

    OperaMasks-UI

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

     

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

      以上排序是整理时的排序,一起整理分析一下,下次用的时候就不用到处找了,我想同样的问题应该也存在在很多程序员身上,任何一款UI框架,只要能够容易入手就行。

    展开全文
  • 什么是web框架

    千次阅读 2017-09-11 14:37:44
    Web 应用框架,或者简单的说是“Web 框架”,其实是建立 web 应用的一种方式。从简单的博客系统到复杂的富 AJAX 应用,web 上每个页面都是通过写代码来生成的。我发现很多人都热衷于学习 web 框架技术,例如 Flask ...

    转自http://www.cnblogs.com/hazir/p/what_is_web_framework.html


    Web 应用框架,或者简单的说是“Web 框架”,其实是建立 web 应用的一种方式。从简单的博客系统到复杂的富 AJAX 应用,web 上每个页面都是通过写代码来生成的。我发现很多人都热衷于学习 web 框架技术,例如 Flask 或这 Django 之类的,但是很多人并不理解什么是 web 框架,或者它们是如何工作的。这篇文章中,我将探索反复被忽略的 web 框架基础的话题。阅读完这篇文章,你应该首先对什么是 web 框架以及它们为什么会存在有更深的认识。这会让你学习一个新的 web 框架变得简单的多,还会让你在使用不同的框架的时候做个明知的选择。

    Web 如何工作的?

    在我们讨论框架之前,我们需要理解 Web 如何“工作”的。为此,我们将深入挖掘你在浏览器里输入一个 URL 按下 Enter 之后都发生了什么。在你的浏览器中打开一个新的标签,浏览http://www.jeffknupp.com 。我们讨论为了显示这个页面,浏览器都做了什么事情(不关心 DNS 查询)。

    Web 服务器

    每个页面都以 HTML 的形式传送到你的浏览器中,HTML 是一种浏览器用来描述页面内容和结构的语言。那些负责发送 HTML 到浏览器的应用称之为“Web 服务器”,会让你迷惑的是,这些应用运行的机器通常也叫做 web 服务器。

    然而,最重要的是要理解,到最后所有的 web 应用要做的事情就是发送 HTML 到浏览器。不管应用的逻辑多么复杂,最终的结果总是将 HTML 发送到浏览器(我故意将应用可以响应像 JSON 或者 CSS 等不同类型的数据忽略掉,因为在概念上是相同的)。

    web 应用如何知道发送什么到浏览器呢?它发送浏览器请求的任何东西。

    HTTP

    浏览器从 web 服务器(或者叫应用服务器)上使用 HTTP 协议下载网站,HTTP 协议是基于一种 请求-响应(request-response)模型的。客户端(你的浏览器)从运行在物理机器上的 web 应用请求数据,web 应用反过来对你的浏览器请求进行响应。

    重要的一点是,要记住通信总是由客户端(你的浏览器)发起的,服务器(也就是 web 服务器)没有办法创建一个链接,发送没有经过请求的数据给你的浏览器。如果你从 web 服务器上接收到数据,一定是因为你的浏览器显示地发送了请求。

    HTTP Methods

    在 HTTP 协议中,每条报文都关联方法(method 或者 verb),不同的 HTTP 方法对应客户端可以发送的逻辑上不同类型的请求,反过来也代表了客户端的不同意图。例如,请求一个 web 页面的 HTML,与提交一个表单在逻辑上是不同的,所以这两种行为就需要使用不同的方法。

    HTTP GET

    GET 方法就像其听起来的那样,从 web 服务器上 get(请求)数据。GET 请求是到目前位置最常见的一种 HTTP 请求,在一次 GET 请求过程中,web 应用对请求页面的 HTML 进行响应之外,就不需要做任何事情了。特别的,web 应用在 GET 请求的结果中,不应该改变应用的状态(比如,不能基于 GET 请求创建一个新帐号)。正是因为这个原因,GET 请求通常认为是“安全”的,因为他们不会导致应用的改变。

    HTTP POST

    显然,除了简单的查看页面之外,应该还有更多与网站进行交互的操作。我们也能够向应用发送数据,例如通过表单。为了达到这样的目的,就需要一种不同类型的请求方法:POST。POST 请求通常携带由用户输入的数据,web 应用收到之后会产生一些行为。通过在表单里输入你的信息登录一个网站,就是 POST 表单的数据给 web 应用的。

    不同于 GET 请求,POST 请求通常会导致应用状态的改变。在我们的例子中,当表单 POST 之后,一个新的账户被创建。不同于 GET 请求,POST 请求不总是生成一个新的 HTML 页面发送到客户端,而是客户端使用响应的响应码(response code)来决定对应用的操作是否成功。

    HTTTP Response Codes

    通常来说,web 服务器返回 200 的响应码,意思是,“我已经完成了你要求我做的事情,一切都正常”。响应码总是一个三位数字的代号,web 应用在每个响应的同时都发送一个这样的代号,表明给定的请求的结果。响应码 200 字面意思是“OK”,是响应一个 GET 请求大多情况下都使用的代号。然而对于 POST 请求, 可能会有 204(“No Content”)发送回来,意思是“一切都正常,但是我不准备向你显示任何东西”。

    POST 请求仍然会发送一个特殊的 URL,这个 URL 可能和提交数据的页面不同,意识这一点是至关重要的。还是以我们的登录为例,表单可能是在 www.foo.com/signup 页面,然而点击 submit,可能会导致带有表单数据的 POST 请求发送到 www.foo.com/process_sigup 上。POST 请求要发送的位置在表单的 HTML 中有特别标明。

    Web 应用

    你可以仅仅使用 HTTP GET 和 POST 做很多事情。一个应用程序负责去接收一个 HTTP 请求,同时给以 HTTP 响应,通常包含了请求页面的 HTML。POST 请求会引起 web 应用做出一些行为,可能是往数据库中添加一条记录这样的。还有很多其它的 HTTP 方法,但是我们目前只关注 GET 和 POST。

    那么最简单的 web 应用是什么样的呢?我们可以写一个应用,让它一直监听 80 端口(著名的 HTTP 端口,几乎所有 HTTP 都发送到这个端口上)。一旦它接收到等待的客户端发送的请求连接,然后它就会回复一些简单的 HTML。

    下面是程序的代码:

     
    import socket
    HOST = ''
    PORT = 80
    listen_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    listen_socket.bind((HOST, PORT))
    listen_socket.listen(1)
    connection, address = listen_socket.accept()
    request = connection.recv(1024)
    connection.sendall(b"""HTTP/1.1 200 OK
    Content-type: text/html
    
    <html>
        <body>
            <h1>Hello, World!</h1>
        </body>
    </html>""")
    connection.close()
    

    (如果上面的代码不工作,试着将 PORT 改为类似 8080 这样的端口。)

    这个代码接收简单的链接和简单的请求,不管请求的 URL 是什么,它都会响应 HTTP 200(所以,这不是一个真正意义上的 web 服务器)。Content-type:text/html 行代码的是 header 字段,header 用来提供请求或者响应的元信息。这样,我们就告诉了客户端接下来的数据是 HTML。

    请求的剖析

    如果看一下测试上面程序的 HTTP 请求,你会发现它和 HTTP 响应非常类似。第一行<HTTP Method> <URL> <HTTP version>,在这个例子中是 GET / HTTP/1.0。第一行之后就是一些类似Accept: */* 这样的头(意思是我们希望在响应中接收任何内容)。

    我们响应和请求有着类似的第一行,格式是<HTTP version> <HTTP Status-code> <Status-code Reason Phrase>,在外面的例子中是HTTP/1.1 200 OK 。接下来是头部,与请求的头部有着相同的格式。最后是响应的实际包含的内容。注意,这会被解释为一个字符串或者二进制文件, Content-type 头告诉客户端怎样去解释响应。

    Web 服务器之殇

    如果我们继续以上面的例子为基础建立 web 应用,我们还需要解决很多问题:

    1. 我们怎样检测请求的 URL 以及返回正确的页面?
    2. 除了简单的 GET 请求之外我们如何处理 POST 请求?
    3. 我们如何理解更高级的概念,如 session 和 cookie?
    4. 我们如何扩展程序以使其处理上千个并发连接?

    就像你想的那样,没有人愿意每次建立一个 web 应用都要解决这些问题。正是这个原因,就有处理 HTTP 协议本身和有效解决上面问题的办法的包存在。然而,记住了,它们的核心功能和我们的例子是相同的:监听请求,带有一些 HTML 发回 HTTP 响应。

    解决两大问题:路由和模板

    围绕建立 web 应用的所有问题中,两个问题尤其突出:

    1. 我们如何将请求的 URL 映射到处理它的代码上?
    2. 我们怎样动态地构造请求的 HTML 返回给客户端,HTML 中带有计算得到的值或者从数据库中取出来的信息?

    每个 web 框架都以某种方法来解决这些问题,也有很多不同的解决方案。用例子来说明更容易理解,所以我将针对这些问题讨论 Django 和 Flask 的解决方案。但是,首先我们还需要简单讨论一下 MVC 。

    Django 中的 MVC

    Django 充分利用 MVC 设计模式。 MVC,也就是 Model-View-Controller (模型-视图-控制器),是一种将应用的不同功能从逻辑上划分开。models 代表的是类似数据库表的资源(与 Python 中用 class 来对真实世界目标建模使用的方法大体相同)。controls 包括应用的业务逻辑,对 models 进行操作。为了动态生成代表页面的 HTML,需要 views 给出所有要动态生成页面的 HTML 的信息。

    在 Django 中有点让人困惑的是,controllers 被称做 views,而 views 被称为 templates。除了名字上的有点奇怪,Django 很好地实现了 MVC 的体系架构。

    Django 中的路由

    路由是处理请求 URL 到负责生成相关的 HTML 的代码之间映射的过程。在简单的情形下,所有的请求都是有相同的代码来处理(就像我们之前的例子那样)。变得稍微复杂一点,每个 URL 对应一个 view function 。举例来说,如果请求 www.foo.com/bar 这样的 URL,调用 handler_bar() 这样的函数来产生响应。我们可以建立这样的映射表,枚举出我们应用支持的所有 URL 与它们相关的函数。

    然而,当 URL 中包含有用的数据,例如资源的 ID(像这样 www.foo.com/users/3/) ,那么这种方法将变得非常臃肿。我们如何将 URL 映射到一个 view 函数,同时如何利用我们想显示 ID 为 3 的用户?

    Django 的答案是,将 URL 正则表达式映射到可以带参数的 view 函数。例如,我假设匹配^/users/(?P<id>\d+)/$ 的 URL 调用 display_user(id) 这样的函数,这儿参数 id 是正则表达式中匹配的 id。这种方法,任何 /users/<some_number>/ 这样的 URL 都会映射到 display_user 函数。这些正则表达式可以非常复杂,包含关键字和参数。

    Flask 中的路由

    Flask 采取了一点不同的方法。将一个函数和请求的 URL 关联起来的标准方法是通过使用 route() 装饰器。下面是 Flask 代码,在功能上和上面正则表达式方法相同:

    @app.route('/users/<id:int>/')
    def display_user(id):
        # ...
    

    就像你看到的这样,装饰器使用几乎最简单的正则表达式的形式来将 URL 映射到参数。通过传递给route() 的 URL 中包含的 <name:type> 指令,可以提取到参数。路由像 /info/about_us.html 这样的静态 URL,可以像你预想的这样 @app.route('/info/about_us.html') 处理。

    通过 Templates 产生 HTML

    继续上面的例子,一旦我们有合适的代码映射到正确的 URL,我们如何动态生成 HTML?对于 Django 和 Flask,答案都是通过 HTML Templating

    HTML Templating 和使用 str.format() 类似:需要动态输出值的地方使用占位符填充,这些占位符后来通过 str.format() 函数用参数替换掉。想象一下,整个 web 页面就是一个字符串,用括号标明动态数据的位置,最后再调用 str.format() 。Django 模板和 Flask 使用的模板引擎 Jinja2 都使用的是这种方法。

    然而,不是所有的模板引擎都能相同的功能。Django 支持在模板里基本的编程,而 Jinja2 只能让你执行特定的代码(不是真正意义上的代码,但也差不多)。Jinja2 可以缓存渲染之后的模板,让接下来具有相同参数的请求可以直接从缓存中返回结果,而不是用再次花大力气渲染。

    数据库交互

    Django 有着“功能齐全”的设计哲学,其中包含了一个 ORM(Object Realational Mapper,对象关系映射),ORM 的目的有两方面:一是将 Python 的 class 与数据库表建立映射,而是剥离出不同数据库引擎直接的差异。没人喜欢 ORM,因为在不同的域之间映射永远不完美,然而这还在承受范围之内。Django 是功能齐全的,而 Flask 是一个微框架,不包括 ORM,尽管它对 SQLAlchemy 兼容性非常好,SQLAlchemy 是 Django ORM 的最大也是唯一的竞争对手。

    内嵌 ORM 让 Django 有能力创建一个功能丰富的 CRUD 应用,从服务器端角度来看,CRUDCreateRead Update Delete)应用非常适合使用 web 框架技术。Django 和 Flask-SQLchemy 可以直接对每个 model 进行不同的 CRUD 操作。

    再谈 web 框架

    到现在为止,web 框架的目的应该非常清晰了:向程序员隐藏了处理 HTTP 请求和响应相关的基础代码。至于隐藏多少这取决于不同的框架,Django 和 Flask 走向了两个极端:Django 包括了每种情形,几乎成了它致命的一点;Flask 立足于“微框架”,仅仅实现 web 应用需要的最小功能,其它的不常用的 web 框架任务交由第三方库来完成。

    但是最后要记住的是,Python web 框架都以相同的方式工作的:它们接收 HTTP 请求,分派代码,产生 HTML,创建带有内容的 HTTP 响应。事实上,所有主流的服务器端框架都以这种方式工作的( JavaScript 框架除外)。但愿了解了这些框架的目的,你能够在不同的框架之间选择适合你应用的框架进行开发。


    展开全文
  • web十大框架

    万次阅读 2017-05-31 20:20:43
    目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评。国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装,不过这些框架的鼻祖 YUI 还是坚持用自己的 JavaScript ...

    目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评。国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装,不过这些框架的鼻祖 YUI 还是坚持用自己的 JavaScript 类库。

       jQuery 是目前用的最多的前端 JavaScript 类库,据初步统计,目前 jQuery 的占有率已经超过 46%,它算是比较轻量级的类库,对 DOM 的操作也比较方便到位,支持的效果和控件也很多。同时,基于 jQuery 有很多扩展项目,包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的选择引擎)。这些补充使得 jQuery 框架更加完整,更令人兴奋的是,这些扩展与目前的框架基本都是兼容的,可以交叉使用,使得前端开发更加丰富。

       Ext 是 Sencha 公司推崇的 JavaScript 类库,相比 jQuery,Ext JS 更重量级,动辄数兆的文件,使得 Ext 在外网使用的时候会顾虑很多。但是,另一方面,在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效,Ext JS 的控件库非常丰富,同时它的交互也非常强大,独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能,丰富的控件库,华丽的效果也使得 Ext JS 成为内网开发利器。

       框架鼻祖 YUI 也有自己的 JavaScript 类库,DOM 操作和效果处理也还比较方便,功能和控件也很齐全,但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo!的没落,YUI 的呼声也逐渐被新起的框架淹没,想来也让人惋惜。

    1. Bootstrap

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. Fbootstrapp

      Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

    3. BootMetro

      BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

    4. Kickstrap

      Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

    App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。

    5. Foundation

      Foundation 是一款强大的,功能丰富的并且支持响应式布局的前端开发框架,你可以通过Foundation快速创建原型,利用它所包含的大量布局框架,元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略,它拥有大量实用的语义化功能,并且使用Zepto类库来取代jQuery,这样可以带来更好的用户体验,并且提高运行的速度。

      Foundation拥有一套12列的灵活可嵌套的网格系统,你可以用它快速创建适应多种浏览设备的布局。它有很多的功能。它定义了很多的样式,比如字体排版,按钮,表单,以及多种多样的导航控件。它也提供了很多的CSS组件,例如操作面板(panels),价格表(price tables),进度条(progress bars),表格(tables)以及可以适应不同设备的可伸缩视频(flex video)。与此同时,Foundation还包括了很多的JavaScript插件,如下拉菜单(dropdowns),joyride(网站功能引导插件),magellan(网站固定导航插件),orbit(支持触摸的响应式图片轮播插件),reveal(弹出框插件),sections(强大的tab插件)以及tooltips(工具提示)等。

    Foundation框架还提供了很多有用的扩展。

    A、模板(Stencils)——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF两种格式的下载,你可以用它们来方便快捷的绘制线框图和原型图。

    B、HTML模板 —— HTML模板可以方便地用来快速创建页面布局。你所要做的仅仅是复制得到模板代码,然后丢到页面的标签之间就好了。

    C、图标字体(Icon Fonts) —— 包含自定义图标的一种网页字体。

    D、SVG 社交网络图标(Social Icons)—— 一组不依赖分辨率的社交网络图标(可缩放矢量图标)。

    E、响应式表格——Foundation框架中响应式表格的实现机制是固定表格的左边第一列,然后表格的其他列可以通过滚动条拖拉进行访问。

    F、关闭帆布布局(Off-Canvas Layouts)—— 这些布局可以允许一些网页内容或者导航控件在移动端设备上默认隐藏,当浏览屏幕变大或者用户进行相应操作的时候这些内容再出现。当用户进行相关操作的时候,网页内容或者导航控件将会滑动出现。

      如你所见,对于web开发者以及设计师来说,Foundation就像是一个巨大的宝藏。在下载框架的时候,你可以自定义下载框架的内容。

    6. GroundworkCSS

      GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5,CSS以及JavaScript工具包,可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

      GroundworkCSS拥有一个灵活,可嵌套的流式网格系统,方便你创建任何布局。这个框架有很多让人印象深刻的功能,比如在平板以及移动端上的网格系统,当屏幕的宽度小于768或者480像素时,页面中原本并列排版的表格列(grid column)会自动变为独立的行,而不是折叠在一起。另一个很酷的功能是jQuery的响应式文本(ResponsiveText)插件,这个插件可以动态调整页面文字的大小以适应浏览设备的屏幕大小。这个插件对于可伸缩的标题以及创建响应式表格的时候特别有用。

      GroundworkCSS包含了大量的UI组件,如tabs、响应式数据表格导航、按钮、表单、响应式导航控件、tiles(一套替代radio按钮以及其他默认表单元素的优雅组件)、工具提示、对话框、Cycle2(一款强大的,响应式的内容滑块)以及其他很多的有用组件。它还提供了很多矢量社交网络图标以及图标字体。

      你可以通过切换页面上方的导航按钮选择不同的浏览设备要来查看这款框架的效果。通过这种方式,你可以测试在不同的浏览设备上各种组件的响应式布局情况。 

      GroundworkCSS的文档写的非常好,并且包含着很多的示例,为了让你更快的上手,他还提供了多种响应式的模板。对于这款框架,唯一我可以想到的缺点就是不能自定义要下载的框架内容。

    7. Gumby

      Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。它的流式-固定布局(fluid-fixed layout)可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局,包括多列混杂的嵌套模式。Gumby提供两套PSD的模板,方便你在12列和16列的网格系统上进行设计。

    Gumby提供了一个功能丰富的UI工具包,包括按钮,表单,移动端导航,tabs,跳转链接(skip links),拨动开关(toggles and switches,可以方便快捷地切换元素的class,而不需要进行额外的js操作),抽屉功能(drawers),响应式图片以及retina图片等等。为了紧跟最近的设计潮流,Gumby的UI元素中还包括了Metro风格的扁平化设计,你也可以用Pretty风格的渐变设计,或者按照你的想法糅合两种设计风格。该框架还提供了一套出众的响应式,拥有独立分辨率的Entypo图标,你可以在自己的web项目中尽情使用。Gumby有一个很好自定义下载选择器,你可以自行配置各个组件的颜色,并且按自己的需求方便地下载。

    8. HTML KickStart

      HTML Kickstart 是一款可以用来方便创建任何布局的集合Html5,CSS和jQuery的工具包。它提供了干净,符合标准以及跨浏览器兼容的代码。这款框架提供了多种样式表,包括网格,排版,表单,按钮,表格,列表以及一些跨浏览器兼容的web组件比如JavaScript的幻灯片功能,tabs,面包屑导航,包含子菜单的菜单以及工具提示等等。你可以使用99Lime UIKIT提供的UI组件来搭建你的产品线框图。

    9. IVORY

      IVORY 是一款轻量,简单但是强大的前端框架,可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。

      当你需要一款轻量灵活,不需要额外的其他功能,并且适应不同浏览设备的框架时,IVORY是你最好的选择。

    10.Kube

      最后,如果你的新项目需要一款实在的,不需要复杂的额外功能组件的,足够简单的框架,那么 Kube 将会是你正确的选择。Kube是一款最小化的,支持响应式的前端框架,它没有强加的样式设计,因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式,比如网格,表单,排版,表格,按钮,导航,链接以及图片等等。

      Kube框架包括一个简洁的CSS文件用于方便地创建响应式布局,还包括了两个JS文件来完成tab以及页面的按钮操作。如果你希望得到Kube最大化的灵活性以及个性化定制,那么你可以下载开发者版本(developer version),这个版本包括了LESS文件(包括各种变量,mixins以及模块)。

    展开全文
  • 下面为大家简单的介绍一下Web框架的基本内容,希望对大家有帮助。 Web框架(Web framework)或者叫做Web应用框架(Web application framework),是用于进行Web开发的一套软件架构。大多数的Web框架提供了一套开发和部署...

    随着Web最新发展趋势的不断升级,Web项目开发也越来越难,而且需要花费更多的开发时间。所以,Web程序员灵活运用Web开发框架显得更为重要。下面为大家简单的介绍一下Web框架的基本内容,希望对大家有帮助。
    Web框架(Web framework)或者叫做Web应用框架(Web application framework),是用于进行Web开发的一套软件架构。大多数的Web框架提供了一套开发和部署网站的方式。为Web的行为提供了一套支持支持的方法。使用Web框架,很多的业务逻辑外的功能不需要自己再去完善,而是使用框架已有的功能就可以。
    Web框架的功能
    Web框架使得在进行Web应用开发的时候,减少了工作量。Web框架主要用于动态网络开发,动态网络主要是指现在的主要的页面,可以实现数据的交互和业务功能的完善。使用Web框架进行Web开发的时候,在进行数据缓存、数据库访问、数据安全校验等方面,不需要自己再重新实现,而是将业务逻辑相关的代码写入框架就可以。也就是说,通过对Web框架进行主观上的“缝缝补补”,就可以实现自己进行Web开发的需求了。
    以PHP为例,PHP可以在apache服务器上进行Web开发,而不必使用框架。使用PHP进行开的时候,在不适用框架的情况下,数据库连接就需要自己来实现,页面的生成和显示也是一样。比如框架的话可以完成避免sql注入的工作,而使用PHP在不用框架的情况下,这部分要自己做。

    目前Python主流的框架有Django和Flask等。Django是一个比较重量级的框架,重量级的意思是说,Django几乎所有的功能都帮助开发者写好了,有时候如果想做一个简单的网站,并不需要太多功能,这时候使用Django的话,就比较不合适,因为在部署网站的时候会导致很多不必要的功能也部署了进来。而Flask是一个轻量级的框架,一些核心的功能实现了,但是实现的功能并没有Django那么多,这样可以进行自己的发挥,在Flask的基础上,如果想实现更多的功能,可以很方便地加入。
    Java目前的主流开发框架是ssm(spring spring-mvc和mybatis)。相比之前的ssh(spring struts hibernate),ssm也是比较轻量级的框架。
    为了便于理解,个人创造了一个比方,如果将Web框架比作是旋律,歌词比作是业务逻辑,那么就是不同的歌曲。旋律可能有些地方不满足人的需求,可以进行修改。也可以在基础上增加新的旋律。或者是将框架比作素描的结果,然后在素描的基础上进行涂色,然后就可以成为一副画了。
    总结
    Web框架是用来进行Web应用开发的一个软件架构。主要用于动态网络开发。开发者在基于Web框架实现自己的业务逻辑。Web框架实现了很多功能,为实现业务逻辑提供了一套通用方法。
    在这里插入图片描述
    什么是Web框架、web框架有什么功能?
    有需要资料的可以加我:腾讯QQ3249838614
    或加入嵌入式就业交流群 551627734一起交流 学习 欢迎全国各地的大学生和各位行业大佬一起交流!
    (STM32串口应用)http://www.makeru.com.cn/live/detail/1290.html?s=69821
    (stm32电机驱动)http://www.makeru.com.cn/live/1392_1218.html?s=69821
    (定时器)http://www.makeru.com.cn/live/1392_1199.html?s=69821
    (DMA专题讲解)http://www.makeru.com.cn/live/1392_1020.html?s=69821]http://www.makeru.com.cn/live/1392_1048.html?s=69821http://www.makeru.com.cn/live/1392_1020.html?s=69821
    ( ADC读取光照传感器)http://www.makeru.com.cn/live/1392_1004.html?s=69821
    (STM32中断系统)http://www.makeru.com.cn/live/1392_1124.html?s=69821
    (时钟系统)http://www.makeru.com.cn/live/1392_1082.html?s=69821
    (stm32 实战之温湿度采集)http://www.makeru.com.cn/live/detail/1476.html?s=69821

    展开全文
  • web前端框架——一些简单理解

    万次阅读 2018-08-09 20:19:06
    可以把bootstrap也叫作前端框架,也可以把jQuery zepto等叫做前端框架,当然AngularJS Backbone也叫做前端框架。不同就在于他们所针对的意义不一样bootstrap是目前桌面端最为流行的开发框架,一经 Twitter 推出...
  • Java Web框架篇之Spring

    万次阅读 2019-06-04 17:41:31
    Web发展的几个阶段 (1)初级阶段:使用Model1(JSP+JavaBean)/Model2(Jsp+Servlet+JavaBean)/三层模型(表示层(JSP/Servlet)+业务逻辑层+持久化层)进行开发; (2)中级阶段:使用EJB进行分布式应用开发,忍受...
  • Web框架

    2020-10-26 16:41:30
    Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端。 # Author:maira # !/usr/bin/env python # coding:utf-8 import socket def handle_request...
  • web框架

    2019-02-15 20:38:36
    web框架介绍 web应用程序:Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件,它是典型的浏览器/服务器架构的产物 web应用程序...
  • 当前最流行的Javaweb框架有哪些?

    千次阅读 2019-09-18 18:56:28
    Java Web开发的用到的框架之多简直令人发指,而且因为版本的更新换代导致的问题也是层出不穷。然而这也是Web技术不断演化的结果,要么选择接受,要么引领节奏。 原来常用的Javaweb框架是SSH(Struts + Spring + ...
  • web开源框架大汇总

    万次阅读 2016-04-19 22:46:27
    Struts是一个基于Sun J2EE平台的MVC框架,主要是采用Servlet和JSP技术来实现的。由于Struts能充分满足应用开发的需求,简单易用,敏捷迅速,在过去的一年中颇受关注。Struts把Servlet、JSP、自定义标签和信息资源...
  • 最好的6个Go语言Web框架

    万次阅读 多人点赞 2017-12-07 14:26:37
    原文:Top 6 web ...以下为译文:GO 语言爱好者的最佳Web框架如果你是自己写一个小应用程序,那你可能不需要Web框架。但是如果你要做产品,那么你肯定需要一个好的框架。如果你认为你有相应的知识和经验,你会
  • Python进阶(三十六)-Web框架Django项目搭建全过程

    万次阅读 多人点赞 2017-04-15 08:53:16
    Python Web框架Django项目搭建全过程   IDE说明: Win7系统 Python:3.5 Django:1.10 Pymysql:0.7.10 Mysql:5.5   Django 是由 Python 开发的一个免费的开源网站框架,可以用于快速搭建高性能,优雅的网站!...
  • [33]python Web 框架:Tornado

    万次阅读 多人点赞 2018-06-10 00:08:59
    轻量级web框架 异步非阻塞IO处理方式 出色的抗负载能力 优异的处理性能,不依赖多进程/多线程,一定程度上解决C10K问题 WSGI全栈替代产品,推荐同时使用其web框架和HTTP服务器 1.2.Tornado VS Djang...
  • 什么是web框架
  • web服务器与web框架

    千次阅读 2019-01-17 10:02:31
    Web 服务器 当我们在浏览器输入URL后,浏览器会先请求DNS服务器,获得请求站点的 IP 地址。然后发送一个HTTP Request(请求)给拥有该 IP 的主机,接着就会接收到服务器给我们的 HTTP Response(响应),浏览器经过...
  • web服务器和web框架的作用及其关系

    千次阅读 多人点赞 2018-10-15 21:24:27
    web服务器和web框架的作用及其关系 1.web服务器作用: 1)解析请求报文,调用框架程序处理请求。 2)组织响应报文,返回内容给客户端。 2.web框架程序的作用: 1)路由分发(根据url找到对应的处理函数) 。 2)在处理...
  • 浅谈五大Python Web框架

    千次阅读 2019-09-03 19:53:55
    浅谈五大Python Web框架 转载:http://feilong.me/2011/01/talk-about-Python-web-framework 说到Web Framework,Ruby的世界Rails一统江湖,而Python则是一个百花齐放的世界,各种micro-framework、framework...
  • web框架的本质及其分类

    千次阅读 2020-01-02 15:49:11
    初识web框架1. web框架本质2. HTTP协议3. 完善自定义的web框架4. 服务器程序和应用程序5. python中主流web框架分类...
  • Web框架系列:框架基础

    千次阅读 2017-03-22 11:23:27
    很多做Web开发的同学都会有一个梦想,就是将来开发出来自己的一套Web应用框架,在项目中使用。刚开始做开发时,觉得这个东西好牛啊。只需要写一点代码,就能够做出带有业务逻辑的网站,就能够挣工资了。其实,写一个...
  • 什么是 web 框架

    千次阅读 2018-04-22 11:46:42
    Web 应用框架,或者简单的说是“Web 框架”,其实是建立 web 应用的一种方式。从简单的博客系统到复杂的富 AJAX 应用,web 上每个页面都是通过写代码来生成的。我发现很多人都热衷于学习 web 框架技术,例如 Flask ...
1 2 3 4 5 ... 20
收藏数 868,673
精华内容 347,469
关键字:

web框架