介绍
Semantic UI是一款语义化的UI框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等浏览器。
官网地址
使用方法
引入js与css文件: <script src="/js/semantic.min.js"></script> <link href="/css/semantic.min.css">
1.按钮
好看的前端框架(一)----Semantic UI
标签按钮
//带有标签图案的按钮<div class="ui button"> <i class="heart icon"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 喜欢 </font></font></div> <a class="ui basic label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 2,048 </font></font></a></div>
好看的前端框架(一)----Semantic UI
背景颜色按钮
//背景颜色的按钮<button class="ui inverted button"> <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">标准</font></font> </button>
好看的前端框架(一)----Semantic UI
有条件的按钮
//有条件的按钮<div class="ui buttons"> <button class="ui button"><font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">取消</font></font> </button> <div class="or"> </div> <button class="ui positive button"><font style="vertical-align: inherit;"> <font style="vertical-align: inherit;">保存</font></font></button> </div>
好看的前端框架(一)----Semantic UI
社交软件按钮
//社交软件按钮<button class="ui facebook button"> <i class="facebook icon"></i><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 脸书 </font></font></button>
好看的前端框架(一)----Semantic UI
圆形按钮
//圆形按钮<button class="ui circular facebook icon button"> <i class="facebook icon"></i> </button>
好看的前端框架(一)----Semantic UI
彩色按钮
//彩色按钮<button class="ui red button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色</font></font></button>
