好看的前端框架(一)----Semantic UI

介绍

Semantic UI是一款语义化的UI框架，代码可读性与可理解性很强，界面简洁美观，与bootstrap风格接近，基于jquery，适用响应式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等浏览器。

官网地址

https://semantic-ui.com/

使用方法

引入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>