0

0

最流行的几个Web前端框架

小云云

小云云

发布时间:2017-11-20 11:45:59

|

9847人浏览过

|

来源于php中文网

原创

作为一名前端开发程序员,学会运用一个好的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请求次数

Bootstrap表格动态加载内容和排序功能
Bootstrap表格动态加载内容和排序功能

Twitter Bootstrap无疑是最好用的前端开发框架,其中对表格的预设样式也是非常的好看,可以满足我们日常的界面风格,但是实际项目中,我们可能需要动态的加载Table表格里面的内容,然后需要有个排序的功能。

下载

唯一不是很友好的就是文档。当然,如果你能使用好文档的话,使用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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 5万人学习

Django 教程
Django 教程

共28课时 | 3.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号