介紹

Semantic UI是一款語(yǔ)義化的UI框架，代碼可讀性與可理解性很強(qiáng)，界面簡(jiǎn)潔美觀，與bootstrap風(fēng)格接近，基于jquery，適用響應(yīng)式布局，提供一些基本模板，兼容Firefox、Chrome、safari,IE 10+等瀏覽器。

官網(wǎng)地址

https://semantic-ui.com/

使用方法

引入js與css文件: <script src="/js/semantic.min.js"></script> <link href="/css/semantic.min.css">

1.按鈕

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

標(biāo)簽按鈕

//帶有標(biāo)簽圖案的按鈕<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;">標(biāo)準(zhǔn)</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>