amaze ui和bootstrap有哪些差别?
amaze ui和bootstrap有哪些差别?
问题
我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在哪?看他官方文档倒是挺逗趣的。。。然后栅格布局好像比bootstrap要灵活一些。其他的求补充
解答
字体设置比较 ok,勉强再加上个盒模型比较省心,除此以外就是山寨 Bootstrap + 各种本土网站插件。
本来你让我黑它我是拒绝的,毕竟是国人项目,起初我还是很滋瓷的,但是后来越营销越臭,恶趣味 Star 不说,就是恶趣味 Star 也比不过 Gogs,为什么我要扯出一个与前端毫无相关的项目呢,因为他们营销的时候,从来都是以「国人项目」为噱头,但是他们给出的排名也好增幅也罢,从来就没有 Gogs 的踪影,从头到脚都是满满的铜臭味。
还整天管自己叫妹子 UI 妹子 UI 的,麻烦雇个好点的文案组织一下语句好不好,全身散发着一股抠脚大汉味,抠脚大汉 UI 你好,抠脚大汉 UI 再见:)
要轻巧有 Pure,要强大有 Semantic UI,要中规中矩有 Bootstrap,真没必要去抠脚,真没必要~
供从我的观点进行对比:
对比人背景:
- 了解一些HTML和CSS基础, 但是如果需要自己写一个各种效果的页面的话. 累觉不爱.
- 无美工基础, 最好有比较现成的配色方案, 字体大小方案. 看得过去, 拿来能用.
- 前后端,运维,产品经理,设计UI都是自己一个人.没有精力和能力去为不同的终端屏幕尺寸定制不同的页面.
bootstrap和amazeUI比较重要的区别:
- bootstrap文件体积比amazeUI小很多
- bootstrap中文文档写得好, 通俗易懂. 用得人多, 优秀案例多, 前面填坑的人多. 网上各种教程插件多, 遇到问题更容易搜索到解决方案一些.
- bootstrap的傻瓜式定制要比amazeUI全一些,强一些.
- amazeUI的默认界面更扁平化一些, bootstrap的默认样式现在看起来有点审美疲劳了. 特别是导航条, 分页按钮之类的.(要自己去改导航条的样式, 我感觉好难). 总之感觉amazeUI默认样式更漂亮一些(周星驰: 艺术这个东西是很主观滴~). 不过! 不过为什么amazeUI的示例文档感觉那么的丑. 官网好看多了. 哎, 同样的工具在不同的人手里, 差别好大. bootstrap的示例页面好看多了.
- bootstrap是标准盒模型, 为一个元素设置了尺寸, 它实际影响的范围要去计算padding,border,margin. 而amazeUI貌似是自己定义的盒模型, 为一个元素定义了尺寸之后, 即定下了元素内容, 以及padding, border的总尺寸. 唯一要考虑的只是元素的margin. 感觉amazeUI这种更直观, 更方便使用在响应式中. 不再去担心自己算术不好. 一个元素有无padding, border只会挤压它自己的内容. 元素这个整体的尺寸不变. 更像一个盒子一些.
bootstrap和amazeUI零碎的区别:
- bootstrap的h1~h6字号比较合理, 方便使用. 并且可以傻瓜式定制. amazeUI只有h1和h2分别是24px和20px, 其它全部是14px.
- amazeUI的基准字号是16px, 而且将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px, 在自定义字体大小的时候, 比较方便计算.比如36px就是3.6rem.
- amazeUI字体针对中文优化. 不过bootstrap支持定制. 貌似就是改一句font-family的事.
- 据说bootstrap用的图标是Glyphicons, amazeUI用的是更好的Font Awesome, 不知道对我来说区别有多大. 好像没有蛮大区别. 反正也不用.
- amezeUI默认有方便的动画. bootstrap没有.
- bootstrap有现成的媒体对象. 左图右文. amazeUI没有.
- amazeUI自带OffCanvas侧边栏, 在移动端侧边划出菜单. 效果可以做得不错. bootstrap貌似要自己解决.
我的选择:
由于文档对初学者的友好程度以及从网上找到解决方案的容易程度. 不得已, 只能选择bootstrap.
比如导航条, bootstrap会给出哪个一类控制哪些功能, 而amazeUI只是展示了一个代码段的案例. 如果前端比较熟悉的, 应该没有任何问题, 但对于我这种新手来说, 真的无从下手.
关于改变bootstrap或amazeUI的默认样式, 可以在chrome开发者工具里面, 定位到元素, 查看哪些css样式影响了自己需要的效果(chrome可以直接在浏览器中启用或停用样式). 找到相关的元素和样式后, 可以加自己的class, 覆盖默认的样式.
如果你是前端新手,建议你先用amaze,毕竟是国产的东西,文档比翻译过来的更容易理解一些。主要是他有webstorm和sublime插件片段,借助这些片段可以很好的写出页面来。
如果你是前端老手,建议你用bootstrap,国际化的东西无需多言,比amaze用的人多一些,不管是国内的还是国外的。
本人在学习之前也是比较了比较,就是因为amaze的文档和webstorm插件才放弃了bootstrap。。
amaze ui和bootstrap有哪些差别?的更多相关文章
- amaze ui使用简介
amaze ui使用简介 amaze UI 类似于bootstrap 不过比bootstrap更加轻量级 可以用来开发响应式网站,并且是移动优先的,针对移动设备开发的网站可以考虑使用这个框架 css中 ...
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- 有了bootstrap,为什么还要做amaze ui
1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...
- 样式 bootstrap purecss Amaze UI 推荐
Bootstrap 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAV ...
- Amaze UI 发布基于jQuery新版本v2.0.0之web组件
首先Amaze Ui第一版时我收到邮件邀请去试用,去了官网看了下,是基于zepto.js的一个类似bootstrap的响应式框架,提到框架当然是好事,快速开发呗.这词2.0的弃用zepto.js改用j ...
- Amaze UI的一点总结
做一个微信公众号内的网页的时候,用到了Amaze UI,也称妹子UI. 官网上宣称,Amaze UI中国首个开源 HTML5 跨屏前端框架,用下来的感觉是比较类似于bootstrap,都是移动端优先. ...
- amaze ui中的icon button
amaze ui中的icon button 说明几点: 1.链接效果 连接效果的本质一般都是a标签,好像很多button的链接效果都是用的a标签,submit表单提交或者button的type为sub ...
- 幻灯片插件FlexSlider -- Amaze UI幻灯片参数
用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...
- DoNet开源项目-基于Amaze UI的点餐系统
帮朋友做的点餐系统,主要是为了让顾客在餐桌上,使用微信扫描二维码,就可以直接点菜,吃完使用微信付款. 系统演示地址,账户名和密码均为:admin.(请不要删除admin用户) GitHub Clone ...
随机推荐
- [JSOI2018]潜入行动 树形DP_复杂计数
code #include <cstdio> #include <algorithm> #include <cstring> #include <string ...
- CF85E Guard Towers(二分答案+二分图)
题意 已知 N 座塔的坐标,N≤5000 把它们分成两组,使得同组内的两座塔的曼哈顿距离最大值最小 在此前提下求出有多少种分组方案 mod 109+7 题解 二分答案 mid 曼哈顿距离 >mi ...
- windows上 python有多版本,如何管理,如何区别?
win10环境下: 1. where python 查看安装了哪些版本. 2.更改对应python.exe 文件的名称就能更改调用python的名称了. 3.不同python是两个完全独立的软件(独立 ...
- python虚拟环境virtualenv、virtualenv下运行IDLE、powershell 运行脚本由执行策略引起的问题
一.为什么要创建虚拟环境: 应为在开发中会有同时对一个包不同版本的需求,创建多个开发环境就能解决这个问题.或许也会有对python不同版本的需求,这就需要使用程序来管理不同的版本,virtualenv ...
- 浅析[分块]qwq
首先说明这篇博客写得奇差无比 让我们理清一下为什么要打分块,在大部分情况下,线段树啊,splay,treap,主席树什么的都要比分块的效率高得多,但是在出问题的时候如果你和这些数据结构只是混的脸熟的话 ...
- Windows远程登录Linux
本文以Ubuntu Kylin1404为例,说明如何通过Windows远程登录Linux. 首先,要确保Ubuntu上SSH服务执行正常.默认情况下,Ubuntu已装有SSHclient.比方输入ss ...
- Shell脚本中替换字符串等操作
在做shell批处理程序时候,常常会涉及到字符串相关操作. 有非常多命令语句.如:awk,sed都能够做字符串各种操作. 事实上shell内置一系列操作符号.能够达到类似效果,大家知道,使用内部操作符 ...
- unix mkdir命令的使用方法
[语法]: mkdir [-m 模式] [-p] 文件夹名 [说明]: 本命令用于建立文件夹,文件夹的存取模式由掩码(umask)决定,要求对其父文件夹具有写权限,文件夹的UID和GID为实际 ...
- Mesh BRep Shapes
Mesh BRep Shapes eryar@163.com Abstract. 当对OpenCASCADE的BRep表示法的数据结构有了一定的理解后,建议可以自己实现一个显示数据生成的功能,即网格剖 ...
- 【python下使用OpenCV实现计算机视觉读书笔记2】图像与字节的变换
import cv2 import numpy import os # Make an array of 120,000 random bytes. randomByteArray = bytearr ...