前端框架之Semantic UI

 前記    

       今天，又一輪的實訓開始了。意味着最后一個暑假結束了。馬上就步入大四了，搭上了大學的最后一班車。開學后意味着新挑戰，有許多技術等着自己去學習。今天，老師教了我們一個前端新框架---------Semantic UI。我把自己學到的與大家分享！

         Semantic UI—完全語義化的前端界面開發框架，跟  Bootstrap 和  Foundation 比起來，還是有些不同的，在功能特性上、布局設計上、用戶體驗上均存在很多差異。

       

      Semantic UI 特點：

•       文檔和演示非常完善

•       易於學習和使用

•        配備網格布局

•       支持 Sass 和LESS 動態樣式語言

•       有一些非常實用的附加配置，例如inverted類。

•        對於社區貢獻來說是比較開放的。

•      有一個非常好的按鈕實現，情態動詞，和進度條。

•      在許多功能上使用圖標字體。

•  

• Semantic UI 對瀏覽器的支持：

  • Last 2 Versions FF, Chrome, IE (aka 10+)

  • Safari 6

  • IE 9+ (Browser prefix only)

  • Android 4

  • Blackberry 10

 搭建  Semantic UI 環境：

      第一步、下載文檔

             訪問  Semantic UI 主頁，網址為:http://www.semantic-ui.cn/,點擊Get Started按鈕。

  然后點擊Download Zip文檔

         第二步、解壓文檔，如圖所示：

第三步、新建包，js包、css包、HTML文件

      js包下導入semantic.css和themes，js包中導入semantic.js和jquery.js。然后在HTML代碼中將js、css引入其中。

第四步、選擇你想要的標簽，引入HTML中

      這是所有的標簽，選擇你適合的標簽吧！

   第五步、點擊你的HTML文件，查看酷炫的頁面吧！

 

這是小編的微信公眾號，歡迎大家掃碼關注;