Twitter Bootstrap 3.0 是對其過去的重大改變，現在它更偏向於移動應用的框架，並且宣稱是最好的web設計css框架之一，的確如此。
可能有人曾經使用過Twitter Bootstrap 2.0 ，很好，說明對它有了初步的了解。
自從Twitter Bootstrap 3.0成為了偏向移動開發的框架之后，我們的設計將會百分百兼容並且完美顯示在移動終端上，是不是很酷呢？
今天讓我來代大家一層層的掀開Bootstrap美人的衣服吧，哈哈哈哈，哥YD的笑了。
讓我們開始吧
Twitter Bootstrap 網站就是采用Twitter Bootstrap 3.0 框架開發的，你瞧是不是很酷。
你可以從官方網站上把BootStrap 下載下來，然后解壓縮下來之后就是這樣（下載預編譯版就行，畢竟我們沒有必要去讀懂它的源碼）：
好了，看到了上面的文件夾了嘛？
css文件夾里面包含了：bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css.
bootstrap.css是最主要的css文件，我們所有的html文件中都必須包含它。（切記！）
bootstrap.min.css是壓縮版的，當我們正式發布我們的網站的時候建議使用它。
bootstrap-theme.css 是額外的css文件，本次我們稍微忽略一下它。
同樣還包含它的壓縮版的文件。不解釋了。
Bootstrap 2和Bootstrap 3 之間最大的差異就在於使用了font文件來替代圖片，用於顯示圖標。
這是很大的飛越，也是極其富有挑戰性的，真佩服twitter的牛人們！
這些font圖標稱之為Glyphicons——象形文字圖標，這名字可夠長的，將就着吧。
好的，讓我們來瞧瞧js文件夾里面藏的是什么吧？
bootstrap.js和bootstrap.min.js
它們包含了bootstrap主要的js 函數庫，像幻燈效果的，下拉選項的，搜索智能提示的，等等一系列的強大的js功能。
當然我們今天演示的只是它的一小部分，希望各位大爺大賞～～
我們下一步該干什么呢？
今天我就帶大家使用bootstrap來創建一個靜態的登陸界面。ok，讓我們直接開門見山吧。
怎么樣，還不錯吧？
真正強大的還在后面，現在改變你的瀏覽器窗口的大小，你會驚奇的發現我們的web界面也在跟着改變，是不是很神奇，而且沒有改變我們的閱讀習慣，棒極了～現在是不是有點蠢蠢欲動啊，哈哈，bootstrap 就是如此的讓人為之瘋狂，着迷，就像屌絲看到了蒼老師一樣。
是不是很激動？好的，讓我們來動手吧？開始撕扯你的襯衫吧，騷年！
架構
Bootstrap 3 能夠很好的兼容html5和css3，這不得不說創造它的牛人的遠見啊。
讓我們來創建一個index.html文件。
然后，加上doctype 標簽
<!DOCTYPE html>
之后，再加上基本的標簽，<title></title><body></body>之類的
<html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="//code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
請注意head－meta這個標簽，至關重要。
這行標簽就是剛才無論我們怎么調整窗口大小，而我們的網頁內容都狠完美的顯示的終極奧義，這就是完美自適應各類設備的一行小小的代碼，無論設備是手機、平板、pc、retina屏幕，甚至你的手表。
body－h1 這個標簽不解釋了，如果大家再瀏覽器里面打開這個頁面，你回發現字體是相當賞心悅目的哦。
body－script 包含了我們現在前端開發必須的神器，jquery.js和bootstrap.js。
再次深入探索Twitter BootStrap的奧秘
現在不妨讓我們來畫一張草圖，如果要實現剛才的那個頁面的話，我們可以這樣設計
是不是很像？不過很丑，沒關系，我們有Bootstrap。
menu 部分就是我們的導航部分，同navigation，簡稱 Nav，對於我們Bootstrap 3.0來說簡直就是小菜一碟。
在body標簽里面加上下面的代碼
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation"> </nav>
再來一炮吧！
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">Vacation Rentals</a> </div> </div>
大家請注意，這些class都是Bootstrap自帶的哦，大家記住以后直接拿來用就行了，當然，如果大家覺得樣式不滿意，可以自行修改，這些都是無關痛癢的。
現在，把下列代碼加入到navbar－header 塊中
<div class="collapse navbar-collapse navbar-ex1-collapse"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Company Details</a></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> Book Tickets</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Reservation<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Cancel</a></li> <li><a href="#">Confirm</a></li> </ul> </li> </ul> </div>
上述代碼就是我們導航的主要內容了，navbar－collapse能夠讓導航可觸摸，並且能夠自動的改變它的形狀在小一點的設備上。
其余的代碼很好理解。ul和li就是為了展示list 條目的。
還有navbar－right是為了把這個標簽擺放到導航欄的最右邊而存在的。
這里其實最重要的就是要記住這些標簽代表的東東，以后可以直接在Bootstrap 3. 中調用，省得自己再寫了。好了，我們完成了導航部分了，現在我們移步到body了，小激動了。
Header Area
Bootstrap 3提供了一個高復用的類叫做 jumbotron，它的作用是為了展示大的橫幅和內容的，就像海報一樣。
所以加上如下代碼：
<div class="container-fluid"> <div class="jumbotron"> <h1>Best Vacation Rentals</h1> <p>Sed placerat fringilla quam et.</p> <a class="btn btn-primary btn-lg">Start Now!</a> </div> </div>
container 類和container－fluid類的區別就是在於后者可以自動的對焦於瀏覽器的中間。
jumbotron這個類太棒了，淘寶等大購物網站，爭先恐后的再用它。
The Contents Area
現在我們碰到難題了，我們需要把Content 部分等分成3小塊。這叫Bootstrap 3等分系統。在以前的css3 布局中，我們可能會想到，width＝33%，float＝left，之類的，現在對於Bootstrap 來說，簡直是侮辱我們的節操啊，哈哈，不多說。看碼。
不知道你有沒有聽說過Twitter Bootstrap的12網格理論，就是說它可以把任何的屏幕等分成12格，這就是Bootstrap為什么能夠再任意屏幕的終端的展示的主要原因了。12里面的網格都包含12格更小的等分網格，然后小格子還有12個小格子……突然有點頭暈，就像從前有座山，山上有座廟，廟里有個老和尚，有一天老和尚對小和尚說，從前有座山……
<div class="container"> <div class="row"> <div class="col-md-4"> <a href="#"><img class="img-responsive img-circle" src="images/feat1.jpg"></a> <h3 class="text-center">Type 1</h3> <p>Dummy Text..</p> <a href="#" class="btn btn-success">Book Now @ $599</a> </div> <div class="col-md-4"> <a href="#"><img class="img-responsive img-circle" src="images/feat2.jpg"></a> <h3 class="text-center">Type 2</h3> <p>Dummy Text..</p> <a href="#" class="btn btn-danger">Book Now @ $899</a> </div> <div class="col-md-4"> <a href="#"><img class="img-responsive img-circle" src="images/feat3.jpg"></a> <h3 class="text-center">Type 3</h3> <p>Dummy Text ...</p> <a href="#" class="btn btn-info">Book Now @ $699</a> </div> </div> </div>
其中col－md－4就是將12/3等分的結果，所以下次四等分，就可以col－md－3，是不是很簡單呢？對，簡直弱爆了！
Footer Area
直接貼代碼吧，尼瑪，要睡覺了。
<footer> <div class="container"> <div class="row"> <div class="col-md-4">© 2013</div> <div class="col-md-4"> <ul class="nav nav-pills"> <li class="active"><a href="#">About Us</a></li> <li><a href="#">Support 24x7</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> <div class="col-md-4"> <h3 class="text-right">Vacation Rentals</h3> </div> </div> </div> </footer>
偶了，到此為之了，困了，同志們，自己調整吧！！！
參考：http://www.sitepoint.com/understanding-twitter-bootstrap-3/
github:https://github.com/njaulj