首页 > PHP头条 > 正文

最流行的几个Web前端框架

原创 2017-11-20 0 2136
作为一名前端开发程序员,学会运用一个好的web前端框架是很重要的一件事情,一个好的web前端框架,会让你的工作效率大大增加,也会让你的开发变得很顺利。本篇文章,我们将介绍2017年当下最值得你关注的前端开发框架,每一个框架都拥有独特的样式,帮助创建网格布局,按钮,表单或者其他页面元素。希望能帮助到大家。

Bootstrap

几乎每个开发人员都知道来自Twitter的开发框架-bootstrap。 它可能是最老牌的前端UI框架之一,最早版本发布于2011年。 它包含了一套完成的SASS类库,可以帮助自定义UI和JS组件,方便的来开发各种导航,进度,按钮,面包屑导航等等

最近的一个版本Bootstrap4目前正在开发过程中,应该很快的发布。 对于bootstrap3来说,将是一个很大的改变。

Foundation6

Foundation类库已经有些年头了,最近将有一个大的版本更新,并且类库被分解成两个主要的类库: 网站开发类库和邮件开发类库

它提供了一个最小化的UI框架,可以用来开发任何布局类型,并且完全的掌控各种页面的相关组件,比如, 响应式菜单,输入框,标签页等等

它同时提供了一个可以方便的浏览UI组件的网站。 并且支持主流的web开发工具,例如,Grunt/Gulp,npm和SASS/compass等等

Petal

最新的CSS相关web开发框架,基于LESS。

这个类库非常简单,目前版本0.6。但是是一个完全可以应用到实际开发中去的框架。拥有非常清楚的文档,例如,网格,字体,按钮,输入等等

Petal的开发团队不是很大,但是有非常高的产出。相信2017年中会成为一个拥有一席之地的知名框架

Pure CSS

Pure CSS拥有模块化的设计。 拥有非常多的针对不同组件的小型类库,例如,表单,网格,图表,导航按钮等等

你可以自由的选择使用多少类库。 基础类库使用了Normalize及其其它的简单重置CSS来创建统一的UI界面效果。但是你可以添加自定义的Grid来节约开发时间

所有的类库都可以使用工具来融合并且最小化。并且团队提供了一个简单指导来帮助创建扩展类

个人觉得Pure将会成为类似Bootstrap一样成功的框架。虽然在很多博客中并没有大量提到,但是绝对在你的最佳框架中,它应该有一席之地

Semantic UI

这个框架目前是2.2版本,拥有很多典型的特性,例如,网格,类型,颜色和输入等

它提供了自定义的主题,拥有超过3000的不同主题类型。并且提供了模拟Google,Amazon,Twitter等网站风格的主题,你也可以方便的克隆并且编辑

你可以从现成的布局中选择并且作为自己的开发模板。Semantic UI拥有很多自定义的元素,你会发现这些设计都非常的与众不同

Milligram

极简设计风格的类库,如果你寻找超小类库的话,它是个非常不错选择,只有压缩后2kb大小

非常简单漂亮的项目,目前版本1.3,稳定并且可以进行实际的开发。你可以使用npm,Yarn,Bower等安装,但需要Normalize,所以你需要包含这个类库

使用CSS压缩工具,可以将它合并到一起,用以节约Http请求次数

唯一不是很友好的就是文档。当然,如果你能使用好文档的话,使用Milligram将是非常简单的一件事

Vital CSS

另外一个极简的UI框架,支持SASS,学习极其简单

组件页面介绍了你需要了解的全部内容。如果你需要一个超简单的CSS框架来开发新的项目的话,它绝对可以满足你的需求,如果你想深入了解,可以参考一下这篇来自Vital CSS开发团队的博客

Skeleton

响应式,超轻量级并且超简单的框架。提供了开发新网站必备的基础架构

包含一些基础的样式,但是没有太炫的内容。实际上你可以快速简单的修改框架来满足自己的需求

Skeleton是最稳定并且小型的框架。这里有个演示页面。

UI Kit

一个功能丰富的前端类库。 拥有很多的可选文件和文件夹,CSS是样式,images是图标,js是javascript

插入页面后,每一个js都可以关联到DOM元素和组件,这让你方便的和其它类库整合,例如,vue或者react

同时也可以使用这个类库来设置和创建UI组件。文档页面包含了很多例子帮助你常见网站

Materialize

Google的material design已经成为了他们产品的标准。慢慢的影响了web设计世界,例如Materialize

这个免费的开源框架将material设计带到了下一个层次,最简单的方式来创建纯material风格的页面,无需自己编码

提供了纯CSS的类定义,javascript类库和组件。你可以在这里看到一些实际例子。

这几款web前端框架各有各的优势,总有一个适合大家,希望本篇文章能帮助到你,让你的工作更加高效率。

相关推荐:

二十个功能强大的PHP框架

全球php开发框架排行榜

实用web前端JS与UI框架简介

php开发的时候你们都用什么前端框架?

第一次接触神奇的前端框架vue.js

  • 相关标签:Web 框架 前端
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 小云云

      学生

    • 想不好签名了...
    • 5865篇
      文章总数
    • 2136
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新