用腻了bootstrap的可以试试semantic-ui
semancti-ui介绍
semantic-ui是html/css框架的新贵,是继bootstrap和foundation之后的又一css神器。semantic-ui一出现在github上就受到火热的关注,一直在关注排行榜前列。semantic-ui最大的特点:充分利用CSS3动画特效,简洁实用漂亮的样式这些都是其最受欢迎的原因之一。
扁平化设计
随着iOS 7的发布,扁平化设计(flat design)被更多人所熟识。什么是扁平化设计呢?在实际当中,扁平化设计一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。
在主流的css框架bootstrap中,开始是不支持扁平化设计的(bootstrap2),但在最新的bootstrap3中,几乎所有的组件都改用了扁平化的设计,但由于设计的不好,3的版本被很多原使用bootstarp的开发所诟病。
而semantic-ui是天生就是扁平化的设计,让人用起来更加觉得时尚、简洁。
响应式设计
什么是响应式设计?响应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
在semantci-ui的官网里面是这样说的:
Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it’s font-size change using a media query.
semantic-ui的每个组件都是使用“em”和“rem”,所以组件可以在不同的显示设备上自动地调整大小。
semantic-ui兼容性
支持的浏览器如下
- Last 2 Versions FF, Chrome, IE (aka 10+)
- Safari 6
- IE 9+ (Browser prefix only)
- Android 4
- Blackberry 10
前几天在semantic-ui的github项目里提了个问题,问semantic-ui是否支持IE6~8,下面有个老外来了句:Support IE6? Are you creazy?呵呵,看来在国外还是不鸟IE的偏多。
在这里吐槽一下IE,IE可以算是浏览器界的一朵奇葩…不对,奇葩还有些褒意在里面,应该是浏览器界的一个毒瘤,一直阻碍着前端框架的发展,好在现在很多前端框架都不care IE了,比如angularjs,bootstrap等就直接只支持IE8+(不包括IE8),就连鼎鼎大名的Jquery也宣布从2.x版本开始不支持IE6~8,看来IE的淘汰是在所难免了哈。
不过IE9以后情况还是有所好转,《Javascript高级程序设计》的作者 Nicholas C. Zakas也让大家对IE9以后的版本可以另眼相看。但不管怎么样,IE6~8的各种bug和不兼容让web前端开发举步维艰是个不争的事实,该淘汰的时候就应该淘汰。最好的做法让用户升级浏览器或改用chrome,不要在兼容性上面浪费精力。
semantic-ui示例
刚刚进入到semantci-ui的网站的时候,就被它的各种控件样式吸引住了,感觉比bootstrap好看很多,又很符合当前流行的“扁平化设计”的风格,这里列一下几个看起来比较酷的控件。
好看的按钮
代码如下
1 |
|
好看的标签
Pretty nice animals.
Also pretty nice animals, but can prefer solitude.
Never seen one as a pet before, but I imagine they’d make pretty terrible companions.
代码如下
1 |
|
好看的注解

代码如下
1 |
|
是不是非常酷?想使用这些很酷很炫的特性,就赶快使用semantic-ui吧~
用腻了bootstrap的可以试试semantic-ui的更多相关文章
- 目前几款基于html5的前端框架:如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
- Bootstrap看厌了?试试Metro UI CSS吧
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...
- Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
- 160908、前端开发框架Semantic UI
简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
- 开始学习使用 Semantic UI
最近在找一个功能比较丰富的前端框架,之前一直使用的Bootstrap,感觉组件还是不够丰富,很多东西都需要不少自定义.于是就发现了 Semantic UI. 不过感觉网上相关的中文资料好少,官方网站( ...
- Semantic UI 语义化设计的前端框架
UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...
- Semantic UI – 完全语义化的前端界面开发框架
Semantic UI 是一个 UI 库,使前端开发更简单,更容易学习.Semantic UI 介绍了许多界面元素.在大多数情况下,只有你需要的元素建立一个自定义的构建可能是最好的. UI 组件分为四 ...
- 修改 Semantic UI 的默认字体
Semantic UI 默认使用的是谷歌提供的字体,并且是直接使用了谷歌的官方链接.由于大家都知道的原因,谷歌网站在国内访问速度很差,甚至根本无法访问,还有就是可能会在离线环境下使用 Semantic ...
- Semantic UI基础使用教程
自己今后要使用Semantic UI进行项目开发了,一步步的记录下来,供大家参考,也让自己去简单的学习一下,有空了就会更新一点东西,大家有什么问题可以相互交流一下,文采不是很好,希望大家要多多见谅,这 ...
随机推荐
- 本地获取System权限CMD方法汇总(转)
本地获取System权限CMD方法汇总(转) 稍微整理了下,大概有三种方法可以本地获取system权限的cmd,但前提都是当前用户具备administrator权限. 下面列举的三种方法各有千秋,看你 ...
- ajax请求超时时间
http://www.cnblogs.com/charling/p/3356216.html get post 请求 http://www.cnblogs.com/oneword/archive/20 ...
- MFC Socket
目录 第1章同步TCP通讯 1 1.1 同步通讯与异步通讯 1 1.2 同步通讯类 1 1.3 同步TCP通讯客户端 4 1.3.1 界面 4 1.3.2 界面类声明 ...
- 数据库中间件mycat简单入门
当在项目中mysql数据库成为瓶颈的时候,我们一般会使用主从复制,分库分表的方式来提高数据库的响应速度,比如mysql主从复制,在没有数据库中间件的情况下,我们只能由开发工程师在程序中控制,这对于一个 ...
- 本地化Model Factory
即让其生成中文的测试数据 先简单介绍Model Factory两个常用方法: 进入tinker页面生成测试数据: Factory(User::class,10)->make():make()方法 ...
- cssText
cssText 的本质就是设置 HTML 元素的 style 属性值 cssText 的方便之处在于一次可以写很多属性,而且变更 CSS 样式不必变 JS 代码,只需变样式字符串.但它有个缺点,就是它 ...
- Ubuntu下配置和编译cpp-ethereum客户端
Ethereum,中文翻译是“以太坊”,是一个公有区块链的开源项目.因为以太坊是基于P2P网络所以没有中心节点,所以用户仅安装Ethereum客户端即可连入Ethereum公共网络或者在自己的test ...
- 解决li在ie,firefox中行高不一致问题
转载 http://www.cnblogs.com/jikey/archive/2011/11/13/2247543.html li在ie与firefox的高度是不一样的,解决办法是li font-s ...
- jQuery+zTree加载树形结构菜单
jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...
- 关于SQL语句优化的一个问题
今天写了一个很简单的存储过程,结果一执行,40多秒,后来调整了一句话写法,瞬间出来,其实差别不大,如下: select item_no=vpc.ITEM_ID ,BL_QTY=sum(vpc.QTY_ ...