用膩了bootstrap的能夠試試semantic-ui

semancti-ui介紹

semantic-ui是html/css框架的新貴，是繼bootstrap和foundation以後的又一css神器。semantic-ui一出如今github上就受到火熱的關注，一直在關注排行榜前列。semantic-ui最大的特色：充分利用CSS3動畫特效，簡潔實用漂亮的樣式這些都是其最受歡迎的緣由之一。css

扁平化設計

隨着iOS 7的發佈，扁平化設計(flat design)被更多人所熟識。什麼是扁平化設計呢？在實際當中，扁平化設計一詞所指的是拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺效果，從而打造出一種看上去更「平」的界面。扁平風格的一個優點就在於它能夠更加簡單直接的將信息和事物的工做方式展現出來，減小認知障礙的產生。html

在主流的css框架bootstrap中，開始是不支持扁平化設計的（bootstrap2），但在最新的bootstrap3中，幾乎全部的組件都改用了扁平化的設計，但因爲設計的很差，3的版本被不少原使用bootstarp的開發所詬病。前端

而semantic-ui是天生就是扁平化的設計，讓人用起來更加以爲時尚、簡潔。git

響應式設計

什麼是響應式設計？響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。不管用戶正在使用筆記本仍是iPad，咱們的頁面都應該可以自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不一樣設備;換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，咱們就能夠沒必要爲不斷到來的新設備作專門的版本設計和開發了。angularjs

在semantci-ui的官網裏面是這樣說的：github

Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it’s font-size change using a media query.web

semantic-ui的每一個組件都是使用「em」和「rem」，因此組件能夠在不一樣的顯示設備上自動地調整大小。chrome

semantic-ui兼容性

支持的瀏覽器以下bootstrap

Last 2 Versions FF, Chrome, IE (aka 10+)
Safari 6
IE 9+ (Browser prefix only)
Android 4
Blackberry 10

前幾天在semantic-ui的github項目裏提了個問題，問semantic-ui是否支持IE6～8，下面有個老外來了句：Support IE6? Are you creazy?呵呵，看來在國外仍是不鳥IE的偏多。瀏覽器

在這裏吐槽一下IE，IE能夠算是瀏覽器界的一朵奇葩…不對，奇葩還有些褒意在裏面，應該是瀏覽器界的一個毒瘤，一直阻礙着前端框架的發展，好在如今不少前端框架都不care IE了，好比angularjs，bootstrap等就直接只支持IE8+（不包括IE8），就連鼎鼎大名的Jquery也宣佈從2.x版本開始不支持IE6～8，看來IE的淘汰是在所不免了哈。

不過IE9之後狀況仍是有所好轉，《Javascript高級程序設計》的做者 Nicholas C. Zakas也讓你們對IE9之後的版本能夠刮目相看。但無論怎麼樣，IE6～8的各類bug和不兼容讓web前端開發舉步維艱是個不爭的事實，該淘汰的時候就應該淘汰。最好的作法讓用戶升級瀏覽器或改用chrome，不要在兼容性上面浪費精力。

semantic-ui示例

剛剛進入到semantci-ui的網站的時候，就被它的各類控件樣式吸引住了，感受比bootstrap好看不少，又很符合當前流行的「扁平化設計」的風格,這裏列一下幾個看起來比較酷的控件。

好看的按鈕

Cancel

Save

代碼以下

 
        <div class="ui buttons">  <div class="ui button">Cancel</div>  <div class="or"></div>  <div class="ui positive button">Save</div> </div>

好看的標籤

Dogs

Pretty nice animals.

Cats

Also pretty nice animals, but can prefer solitude.

Ogres and monsters

Never seen one as a pet before, but I imagine they’d make pretty terrible companions.

代碼以下

 
        <div class="ui two column grid" style="display: block;">  <div class="row">  <div class="column">  <div class="ui raised segment">  <div class="ui ribbon label">Dogs</div>  <p>Pretty nice animals.</p>  <div class="ui teal ribbon label">Cats</div>  <p>Also pretty nice animals, but can prefer solitude.</p>  <div class="ui red ribbon label">Ogres and monsters</div>  <p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>  </div>  </div>  </div> </div>

好看的註解

Dog Doggington

I think this is a great idea and i am voting on it

代碼以下

 
        <div class="ui comments">  <div class="comment">  <a class="avatar">  <img src="/images/post/photo2.jpg">  </a>  <div class="content">  <a class="author">Dog Doggington</a>  <div class="text">  I think this is a great idea and i am voting on it  </div>  </div>  </div> </div>

是否是很是酷？想使用這些很酷很炫的特性，就趕快使用semantic-ui吧～