Twitter Bootstrap 團隊已經發布了Bootstrap 3.0 RC1,我們可以從中先領略到Bootstrap 3.x帶來的全新特性。從目前來看,Bootstrap 3.0已經遠遠優于2.x版本了。下面就來看看該版本中引入了哪些新特性。
扁平化和整潔的UI
又是扁平化!自從蘋果iOS的UI從擬物化過渡到扁平化后,這種風格如今已經成為了現代化設計的代名詞。而標榜“移動優先”的Bootstrap 3沒有理由不扁平化。

Bootstrap 2.0通過一個簡單的應用和一個統一的界面使之風靡互聯網,而Bootstrap 3將這種風格上升到了另一個層次。除了帶來了扁平化的UI外,Bootstrap 3還將標志性的紫色和導航欄用到了文檔的主題中。

這樣使得界面更加整潔,也使得Bootstrap可以更好地跨設備和瀏覽器。
圖標字體
圖標字體(glyphicons)現在已經從Bootstrap代碼庫中分離出來,你可以作為插件來使用它。
圖標得到了重新設計,并且提供了一些新的有趣的圖標。

新的網格系統
Bootstrap 3中的新的網格系統允許根據設備大小通過變量來聲明。比如,你可以針對桌面環境設置4列布局,針對平板電腦設置2列布局,針對手機設置1列布局。這樣,你就可以很容易地控制你的頁面的跨設備顯示效果。

根據列的表單布局
Bootstrap終于擺脫了它的表單控件類,在Bootstrap 3中你可以使用更整潔的網格類。比如:
<div class="row"> <div class="col-4"> <label> </div> <div class="col-8"> <input type="text"> </div> </div>
列表組(List group)
List group是一個新的組件,現在你也可以使用Bootstrap來創建一些應用原型,比如RSS Feed、狀態列表、鏈接列表等。

如上圖,通過自定義內容列表組,您可以輕松地創建reddit網站原型或者其他元素,F在,Bootstrap也多少開始朝著CSS原型框架的方向發展了。
上下文面板
Bootstrap現在開始更加認真地對待其著色系統,無論是警告、通知還是其他元素,現在都根據整體著色來進行風格化。

Row Mixins
現在你可以輕松地創建自定義的網格,或打散網格只定義那些你需要的部分(比如內容、側邊欄),而無需自定義一個完整的12列網格。
除此之外,你還可以為你的流體形式的行指定斷點。下面是Bootstrap使用的代碼:

你可以通過各種變量來修改Mixins的行為,比如@grid-float-breakpoint、@grid-columns和@grid-gutter-width等。如果想重建網站的布局,可以這樣做:
@grid-float-breakpoints: 768px @grid-columns: 16 //I like 16 col layouts @grid-gutter-width: 20px #wrap { .make-row(); } #header { .make-column(3); } #inner { .make-column(13); } .content-sidebar-wrap { .make-row(); } #content { .make-column(12); } #sidebar { .make-column(4); }
Bootstrap 3.0最新版下載地址:http://getbootstrap.com/