Bootstrap 3 有哪些改進？

12-30

Bootstrap 3 rc 1: http://twitter.github.io

================== 8月14日對Bootstrap 3 RC2的補充 ===================

現在的提交(Commits)的數已經超過2100個了，RC 2在RC 1的基礎上又有了很多改變。。。

1 文檔的改變

但是因為現在Bootstrap 3下載鏈接變成了最近版本 (lastest version)，並且每天的改動非常多，而文檔更新不是很及時，所以有些會對不上

2 一些全局CSS的改變

3. 柵格系統 (Grid system)

說個我認為比較重要的，相對於RC 1中的3層，現在有4層了

We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops)

.col-xs 對應手機設備
.col-sm 對應平板設備
.col-md 對應普通桌面設備
.col-lg 對應寬屏設備

4 組件的改進與刪減，包括：按鈕、表格、導航欄等

5 還有就是RC 2修復了RC 1中的超多Bug

===========================7月28對Bootstrap 3 RC1的回答=================

什麼改變了？

超過1,600次提交（commits）, 大於72,000 個增/減（additions/deletions）, 還有300多個文件的改變，是非常大的一次改變，所以我占坑，慢慢回答，拋磚引玉

1. 徹底的重寫，從桌面優先 (Desktop First)的設計方式，變成和Zurb的 Foundation 一樣的移動優先 (Mobile First) 全新的柵格系統 (Grid System)，更加強大！如果你用過Foundation的柵格系統 (Grid System)就有體會了。

2. 再見，IE7！最低從IE 8開始支持。而且因為設計已經變成移動優先，所以對IE8的支持也需要respond.js我相信Bootstrap 4時肯定會放棄對IE8的支持，就像現在的Foundation 4一樣

3. 扁平化設計，極簡風格。這個你應該從Bootstrap文檔的風格也可以看出來了，不過可能是暫時的，因為作者精力的原因，具體見 https://github.com/twbs/bootstrap/pull/6342#issuecomment-12332378

Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.

4. 更小的文件體積，Bootstrap.min.css的體積減少了40%以上。

在OS X系統上：

舊的壓縮後的Bootstrap.min.css和bootstrap-responsive.min.css是 106Kb + 17Kb = 123Kb。
新的Bootstrap.min.css將響應式柵格融入了進去，也就是不再區分Bootstrap.min.css和bootstrap-responsive.min.css，只有一個bootstrap.min.css 體積是67Kb
67Kb / 123Kb = 54.47%

JS插件文件體積從 29Kb 變成 27Kb 體積上變化不是很大

並且有了CDN，速度肯定更快了.

& &


&>&> 5.1   Modal 組件
舊版 (2.X) 的Bootstrap Modal
&

&

新版 (3.X) 的Bootstrap Modal
&

&


HTML相對來說只是簡潔了一些而已，但你可以點擊超鏈接進去使用一下新的Modal，你就會發現，新的Modal修復了


舊版滾動Modal時背景也會滾動的問題
當Modal內容過長時，新的Modal可以像頁面一樣滾動，而舊版的不行
還有些不能直觀看到的，比如對移動設備的支持更好了什麼的

&>&> 5.2 新的 List Group 和 Panels 組件，挺好的，其實沒的話很多人也想自己寫一個 
Panels組件：


List Group 組件：


總結：其實我覺得，有什麼變化簡單看看就好，如果你不需要支持IE7的話，用直接Bootstrap 3吧，騷年。。。。用了就真切的體會到了
@依華 補充一個3.0 最大的改變 ： 所有元素默認盒模型（box model）使用了border-box，注意，實現的方法是非常暴力的設置 *  { box-sizing: border-box }，理由呢，就是方便計算，方便使用grid system。實際上很可能在和第三方其他的UI庫合併使用時產生問題，畢竟現代瀏覽器的標準默認box model是 content-box。
放棄IE6和7，迎來大好藍天。
我的網站最代碼一直用bootstrap2.3.2做的，本以為遷移到3.0簡單，結果改了半天發現基本是需要重做整個網站了，果斷退回到2.3.2，發現設計api低層方面java的版本兼容性確認很牛叉。
這是個不錯的框架，可惜目前在國內IE6、IE7的用戶量還是挺大的
可以看看這些bootstrap3 的 PPT介紹： http://www.gbtags.com/gb/ppt/10.htm ， http://www.gbtags.com/gb/ppt/11.htm
移動優先，這是最大的改進
對移動端支持的更好，可以自適應設備解析度。
但是這個下載包太大，每次更新都得費好長一段時間！

現在 2016年  .ie6 7  市場佔有率 應該 不多了吧?


按鈕控制項去除光澤、陰影，簡而言之就是扁平了
內置的ICONS不用再糾結大小、顏色，放在白色底就是黑色，非白色底就是白色

這些是用肉眼和使用期間能發覺的，其餘還有很多改進。
另：要把使用Bootstrap 2.x的站升級到3.x真的很困難。
只用作後台自己人使用,前端考慮到用戶的瀏覽器版本兼容性問題,故而不能用其作為前端!
為什麼使用bootstrap3時，測試IE8時會彈出error：bootstrap『s responsive css is disabled，請教各路大神，如何解決
這篇文章介紹了Bootstrap 3的3大改進。Understanding Twitter Bootstrap 3
  推薦閱讀：


※因為什麼原因你開始從事web前端開發？
※在線代碼編輯器/IDE是如何實現的？
※你們的2016年前端學習計劃是什麼？
※自定義對象中this為什麼代表A.fn.A.init {}？
TAG:前端開發 | CSS | JavaScript | BootstrapTwitter |