什麼是 Twitter Bootstrap？

12-30

https://github.com/twitter/bootstrap
http://twitter.github.com/bootstrap/

為什麼要用 Bootstrap

Bootstrap 是由兩個 twitter 員工開發並開源的前端框架，目前已經到了 2.0.4 的版本，在 Github 上面有 32517個 watch，和 6608個 fork。非常火爆，而如此火爆自然有它的道理，在我們團隊的所有項目中正全面推行使用 Bootstrap，我想根據自己的實際使用體驗來說明一下為什麼要用 Bootsrap。

twitter 出品

首先，Bootstrap 出自 twitter，大廠出品，並且開源，自然久經考驗，減少了測試的工作量。站在巨人的肩膀上，不重複造輪子。

同時，Bootstrap 的代碼有著非常良好的代碼規範，從中也可以學習到很多，在 Bootstrap 的基礎之上創建項目，日後代碼的維護也變得異常簡單清晰。

基於 Less、豐富的 Mixin

如果你不知道 Sass 或者 Less 這樣的 CSS 預處理技術，我只能說你實在太落伍了，建議你先去了解之。

Bootstrap 的一大優勢就是它是基於 Less 打造的，並且也有 Sass版本。正因為如此，它一推出就包含了一個非常實用的 Mixin 庫任你調用。

舉個很簡單的例子，當你平時要用到一些 css3 屬性的時候，你要寫不同的瀏覽器寫不同的 -prefix-，比如圓角 border-radius ：

-webkit-border-radius: 10px;

-moz-border-radius:10px;

-border-radius:10px;

但是通過 Bootstrap 給你預設好的 mixin，你直接寫成這樣就可以了：

@include border-radius (10px);

是不是輕鬆愉快？基本常用的 CSS3 mixin 都幫你整理好了，你都直接調用就可以了，在此不一一舉例。 Bootstrap 是目前最好的基於 Less(Sass) 的前端框架，豐富而實用的 Mixin 應該是其最好的地方。

可以 Responsive 的柵格系統

Bootstrap 的柵格 (Grid) 系統也很先進，整個 Grid 系統是可以 Responsive 的！如果你還不知道 Responsive Design，那麼你太落伍了，建議你了解之。

Bootstrap 已經幫你搭好了實現 Responsive Design 的基礎框架，並且非常容易修改。如果你是一個新手，Bootstrap 可以幫助你在非常短的時間內上手 Responsive Design。

豐富的組件

Bootstrap 的HTML組件和 Js組件非常豐富，並且代碼簡潔，非常易於修改，你完全可以在其基礎之上修改成自己想要的任何樣子。這是工作效率的極大提升。

插件

另外、由於 Bootstrap 的火爆，又出現了不少圍繞 Bootstrap 而開發的插件。其中最實用的莫過於 Font Awesome 了。它是一套 icon font，提供了豐富的 icon 給你選擇，新的 2.0 版又根據網友的意見增加了70個新的 icon。

在現在一股有 Apple 帶領的 Retina 潮流下，對圖片的視網膜屏下的解決方案已經變得越來越有必要了，而在 icon 這個東西上，icon font 是完美的解決方案，不用擔心解析度的問題，因為它實際上是字體。

以上

這些就是為什麼要用 Bootstrap 的原因，目前市面上沒有任何其他框架可以和它相媲美，但是它就雖然是一匹好馬，你還是需要花費一些時間去學習它、適應它，它在日後給你帶來的便利性是無可比擬的，你會後悔自己為什麼沒有早點接觸它。

一些題外話

我不喜歡用框架，我喜歡原生的寫法

這是我在給別人推薦 Bootstrap 的時候最常聽到的話，我只能說，Bootstrap 並不能幫你完成所有事情，它只是一個的框架，在這個框架上面你依舊可以任意的發揮，並且發揮得更好，但是前提是你要駕馭得了它。

如果你不夠熟悉它，你確實是有時候會被它有所牽絆，但是你熟悉了之後發現了其實它沒有對你進行任何限制，這需要一個過程。

是給無設計師的團隊或者程序員用的

對此我真的是無力吐槽，Bootstrap 的開發者就在他的博客上抱怨過，為什麼出來那麼一堆完全照搬 Bootstrap 樣式的網站。

記住、完全用 Bootstrap 的樣式只會讓人心生厭煩。

簡書用的就是 Bootstrap ：http://jianshu.io

一樓的回答很詳細，我再做點補充，簡單說下我所知的目前前端樣式框架的主流現狀，直接從markdown轉過來，湊合看下：）

## SASS and LESS

不管是[SASS](http://sass-lang.com/)，還是[LESS](http://lesscss.org)，都可以視為一種基於CSS之上的高級語言，其目的是使得CSS開發更靈活和更強大，這兩者我的感覺是對於程序員來說，SASS的功能要遠比LESS強大，基本可以說是一種真正的編程語言了，而對於設計師，LESS則相對清晰明了，[這裡](http://css-tricks.com/sass-vs-less/)是Chris Coyier寫的一篇關於SASS和LESS的背靠背對比，可以說是相當中肯的(評論也相當有料喔)。當然，如果使用Rails之類的框架，基於SASS是會來的更方便一些。

---

## Compass and Blueprint

SASS和[Compass](http://compass-style.org/)的關係，在很多人來看類似於ruby和rails，compass基於SASS，是一個真正意義上的編程框架，提供了大量的mixin(可理解為函數庫)，無論是對css3繁雜的多瀏覽器寫法的簡化支持，還是實現各種常見功能的helper，都是強大而豐富的。另外，包括Scott Davis和Eric Meyer的核心團隊，也可以說是全明星組合。

[Blueprint](http://www.blueprintcss.org/)是一套預定義的樣式，包括對大部分常用web交互組件的渲染，並且有一個強大的格子布局系統(grid system)，即使不懂設計的程序員，也可以使用blueprint的默認樣式做出很漂亮的頁面。

Blueprint和Compass，是一個分工很明確的組合，前者負責樣式渲染，後者則是基礎框架和模塊，可以說，在bootstrap誕生之前，是web開發首選的黃金組合。

---

## HTML5 Boilerplate

[HTML5 Boilerplate](http://html5boilerplate.com/)項目(以下簡稱h5bp)則如同名字一樣，實現的是一個web頁面的標準模板，尤其針對html5進行了全面優化，同時也對老瀏覽器向後兼容，基本上來說，h5bp與樣式相關的主要部分，是compass的一個子集，不過h5bp並不只限於css，還默認引入了很多很好的js開發庫，包括[Modernizr](http://modernizr.com/)和Jquery，再加上一個標準化的index.html模板

h5bp是這裡提到的所有框架中使用起來最方便的，當然受功能限制，她最適用的目標是單頁web app或者靜態頁面，對於複雜的項目來說，需要和其他框架做互補。

---

## Twitter Bootstrap

新興而野心十足的Bootstrap跟上述又都不同，她是基於LESS的一套前端工具庫，意圖非常明顯，想以一個項目，整合Compass，Blueprint，h5bp的目標功能，成為web前端的一站式解決方案。

* 一套完整的基礎css模塊，但不如compass豐富和強大

* 一套預定義樣式表，包括一個格子布局系統，和blueprint提供的差不多，只是設計風格不一樣

* 一組基於Jquery的js交互插件，這是Bootstrap真正強大的地方，也是她嚴格意義上可以取代Blueprint的原因所在，這些非常不錯的小插件，包括對話框，下拉導航等等，不但功能完善，而且十分精緻，正在成為眾多jquery項目的默認設計標準。

特別提一下，Bootstrap使用[Normalize.css](http://necolas.github.com/normalize.css/)來進行Reset CSS，這一項目已經成為了事實標準(超過Compass的Eric meyer 2.0)，強烈推薦使用，另外前邊說的h5bp也使用Normalize，因此，如果你在項目中同時使用了h5bp和Bootstrap，請注意，**沒有必要再引入h5bp的初始樣式表style.css**

---

## So What?

說了一大堆，該來點結論了，目前對於web開發，尤其是由程序員進行的full stack開發，最好的組合是：

**SASS+Compass+Bootstrap**

這樣既可以利用SASS強大的編程能力，Compass強大的底層函數，又可以獲取Bootstrap豐富的UI組件支持。

只是，Bootstrap是基於LESS的，要讓她們協同工作，需要一個SASS的Bootstrap移植版本，幸虧github上從來不缺這類項目，當前最好的一個是[bootstrap-sass](https://github.com/thomas-mcdonald/bootstrap-sass)

樓上的回答都很詳細了正好最近也在折騰。。貼上一個中文版文檔吧 http://wrongwaycn.github.com/bootstrap/docs/index.html

用過bootstrap2.3.2開發最代碼網站感覺上手很輕便，期間感覺有些component有些笨重，選擇過960gs，但發現太簡陋了，可能還是習慣bootstrap了，果斷還是換回來了，不過2.0到3.0的切換基本是需要重寫的，這個遷移成本有點大，如果想升級到新版的網站請注意,另外對ie的支持可能不如firefox和chrome好，建議如果你網站的客戶是ie的就還是不要用了。

鞋拔子，就三個字，當你做為一個開發發愁怎麼自己把網站或app弄好看點的時候，鞋拔子就來幫你了

Bootstrap是在1979年由Efron在Annul of statistics上發表的《BootstrapMethods：Another Look at theJackknife》一文中所提出的開創性的重抽樣方法。我們可以看出，文章的名字叫做對於Jackknife的另一種看法，或者說是另一種應用。

在實際問題中，我們經常會遇到計算所估計參數和指標的方差、置信區間等等相關統計量和結果，並作出一定的假設檢驗和分析。但是，這些分析絕大多數是建立在正態分布的基礎上的，一旦所研究的問題並不是很好的正態分布的近似，再用正態的方法進行計算便會出現問題。由此，便誕生出一系列的非參數方法，這類方法對於所研究問題的分布並不做過多的要求，可以應用的範圍極其廣泛，且這類方法同樣也適用於正態分布的情況之下，因此受到了很多人的重視。

最開始提出的就是Jackknife方法，俗稱「刀切法」。這個方法的思想比較簡單，以估計置信區間為例，假設每次刪除1個樣本觀測，就可以得到一系列的估計值，通過這個估計值從下到大進行排列，出去前2.5%和後2.5%的數值，剩下的區間就是所估計的置信區間。但是這種方法在很多情況下表現不好，從而提出了Bootstrap。

Bootstrap則是將樣本看做總體的一個良好的代表，在這個基礎上進行有放回的抽取樣本，所抽取的方法根據相應的經驗分布進行抽取，由於每次得到的重抽樣樣本存在著一定的差別，在這些重抽樣樣本估計的結果同樣適用Jackknife的方法進行排序，得到的95%置信區間變為所求估計量的置信區間。通常Bootstrap的表現要由於Jackknife。

這種方法確實想法比較獨特，且效果比較好，且便於操作和實現。儘管近些年來存在著一些理論上的證明，指出了Bootstrap漸進性變現較差等缺點，但是作為一種簡單實用的方法，還是有很大的應用價值和研究價值的。具體的內容推薦你看一下我上面提到的原文。

著作權歸作者所有，轉載需聯繫作者以獲得授權，引用需註明出處。

作者ID:尹誠

鏈接:什麼是Bootstrap？

前端神器，可快速搭建網頁，風格簡潔大方。

說白了，就是事先寫好的一組 css 樣式，比如按鈕，表單，表格等，用的時候，只需條用相應的 class 。

另外說一句，我研究過後並做了一些小 DEMO，，最終還是放棄了，原因:

1，不適合中文，英文倒是不錯。

2，大，是的太大，居然比 jquery 還大。

3，不支持我們都討厭的 IE 6，7

對於只追求網站看起來高大上一點的、和主流網站接軌的，不需要仔細寫動作架構的外包程序猿來說，好用的一匹！

在IE下使用真是頭疼。。

是目前比較流行的前端框架。使用Bootstrap將大大節省開發時間。

可以看一下下面的這篇文章，詳細介紹了Bootstrap。

Bootstrap3正式版發布！

請參考 BootStrap簡介及應用要點

Twitter Bootstrap在我用的時候我就覺得很彆扭，不是因為技術，而是因為樣式，當我發現我寫完後，做的頁面和官網或者是其它使用Twitter Bootstrap網站長的一模一樣的時候，我的心理就不平衡了...這個時候我就覺得Twitter Bootstrap只能說提供了一個設計模板給我們