【转】常用前端框架(类似Bootstrap)
转自博客园:http://www.cnblogs.com/Renyi-Fan/p/9287632.html
目录
- 一、总结
- 一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个。我觉得bootstrap还是可以做首选。
- 二、类似Bootstrap热门前端框架大集合
- Bootstrap
- AUI
- Frozen UI
- WeUI
- SUI
- Semantic UI
- Foundation
- UiKit
- Pure
回到顶部
> 一、总结(点击显示或隐藏总结内容)
一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个。我觉得bootstrap还是可以做首选。
回到顶部
二、类似Bootstrap热门前端框架大集合
Bootstrap
首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。结果受到周围各种基友的引诱开始了 Bootstrap 旅程。本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长了难免觉得 Bootstrap 美的让人烦躁, 但好在它的每个版本都会有很大的改变,不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap 的用法及其简单( 这也可能就是 Bootstrap 作者阅攻城士无数,了解他们痛的结果 ),以至于是个小前端都可以快速上手,几乎没什么学习成本。
总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的童鞋应该发现最新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。
AUI
第三个是最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。
Frozen UI
有段时间看到 QQ 瞬间高大上了,后来四处打听,原来 QQ 客服端也用了 混合开发,其中QQ会员前端用的是 Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手试了一遍,初体验感觉基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰富。
总结:如果拿 Frozen UI 配合一些如 APICloud 用来做混合 APP 感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,这个框架对 android 2.3 +、ios 4.0 + 做了兼容,或者拿来做 Web App 也是极好的选择,劣势的话从 UI 层面就可以看到了,谁让它是出生在QQ会员前端的呢。
WeUI
WeUI和 FrozenUI都属于比较专一的框架,WeUI比FrozenUI更专一,话说连个官网都不搞,所有答疑都在 gitHub Issues 解决了,这个框架极其简单,体积当然就不用说了,模块也就 7 个左右,不过体量小做的却不错,口碑看 star 就够了,框架从 16/1/23 发版至今github star 超过 7K,不过也不排除用户没地方发泄所以都跑到 git 上来,哈哈。
总结:看完微信设计团队设计的这套 DEMO,如果要做微信公众,这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。
SUI
“SUI 是一套基于bootstrap开发的前端组件库,同时它也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面”。 果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… ),当然了就像广告说的,如果你之前用过 Bootstrap, 那么可以轻松转向 SUI,这可能就是淘宝给前端屌丝们的福利了。
Semantic UI
倒数第三个是 Semantic UI,接触这个框架还是因为 Bootstrap,Semantic UI 刚上线 github 就受到大量开发者的关注,以至于很多人拿它俩对比各种挑刺各种夸,是好是坏不能单凭别人三句四句就抬起手指开始赞,用了以后感觉 UI 上跟 Bootstrap 没太多的区别,不过代码命名规范上却相差甚大,本人认为 Semantic UI 是不是就想做的不一样,它的命名全是采用复合的方式,类名特别的离散,用的时候你得很小心自己扩展或者新增的 class 命名与它的类名冲突。
Foundation
Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。
UiKit
UIkit是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。
Pure
终于最后一个了,我和你一样好开森 (~ ̄▽ ̄)~),这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。
介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,所以框架之间并没有什么好与特好之分,只能说你的需求是什么,这个框架合适不合适你去用,各种框架用起来也都大致差不多,会用一个其他的上手也就都变得简单容易上手,我觉得能写框架的人都是室外高仁。
作者相关推荐
你前面遭受的挫折有多大,最后成功的时候就有多荣耀。
翻过这道山,就有人听到你的故事。
项目(需求)是很好的学习途径,项目(需求)+看书,这样效果才好,注意项目在前面。方向错了的话,容易出问题和狼狈。
【转】常用前端框架(类似Bootstrap)相关推荐
- Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...
- 前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用 下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
- Python 前端框架【Bootstrap】
Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框 ...
- 前端框架之bootstrap学习(一)
Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...
- 前端框架之Bootstrap
框架概述: bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是 ...
- 【JavaWeb】前端框架之Bootstrap
文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...
- 【Bootstrap】<前端框架>Bootstrap布局容器栅格网格系统
目录 一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
- php商城常用前端框架,商城前端-d2admin
CareyShop 商城后台管理系统 CareyShop(简称 CS)是一套基于 ThinkPHP5 框架开发的高性能商城框架系统,秉承简洁.快速.极致的开发理念,框架内使用面向对象模块化调用,在多终 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
最新文章
- gson解析mysql城市json数据_Gson解析复杂的json数据
- 从源码分析DEARGUI之让怪物随机动起来
- CentOS7下搭建LAMP+FreeRadius+Daloradius Web管理
- Python爬虫应用实战案例-pyquery在爬虫中的应用,爬取猫眼电影数据
- MySQL到Elasticsearch数据同步
- android resolvesize方法,Android 自定义View中onMeasure()中使用resolveSize()是什么意思?
- 各种模板(数学数论字符串)
- 在Java中键入Safe SQL
- 华为开会有“原则”?企业的成功都从会议开始
- 不联网的情况下,使用 electron-builder 快速打包全平台应用
- 【超参数寻优】遗传算法(GA) 超参数寻优的python实现
- BOW和LSH的一点理解
- BOLT UI界面引擎是如何工作的?(BOLT UI入门教程)
- bootdo mysql_iBootDo: 基于BootDo项目定制版,兼容MySQL、Oracle
- 科三——细则以及扣分点
- 本人已搬至博客园,感谢CSDN的一路陪伴
- 第2次作业:微信案例分析
- goldengate中添加同步表的操作
- hadoop、hive安装
- win10设置IP地址时,报错了,怎么搞。