介紹
Semantic UI是一款語(yǔ)義化的UI框架，代碼可讀性與可理解性很強(qiáng)仲锄，界面簡(jiǎn)潔美觀，與bootstrap風(fēng)格接近湃鹊，基于jquery儒喊，適用響應(yīng)式布局，提供一些基本模板币呵，兼容Firefox怀愧、Chrome、safari,IE 10+等瀏覽器余赢。
官網(wǎng)地址
使用方法
引入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>
