這篇教程旨在讓你在20分鐘内學會使用twitter bootstrap建立一個站點。看完這個教程後你應該能夠使用bootstrap來建立一個基本的響應式布局的頁面，了解栅格系統，并且能夠使用bootstrap導航、導覽列和了解響應式設計的基礎。這些全部都是使用twitter bootstrap所需要具備的知識。
<a href="http://www.revillwebdesign.com/demos/bootstraptutorial" target="_blank">線上檢視DEMO</a>
——大漠
我們需要以一個基本的HTML模闆，這樣我們能夠把所需要的bootstrap檔案包含進來。下面就是我們twitter bootstrap項目的開頭，複制這些代碼到一個檔案中并将其命名為index.html。
這段代碼中我們已經添加了一些CSS使頁面的背景呈亮灰色，因為這樣我們能夠輕易地在我們的設計中看見不同的列，使它更加容易了解。
為了使用twitter bootstrap我們僅僅需要把一個檔案引入到我們的模闆當中來，引入檔案有很多種方法，如果你想了解這些方法請查閱相關文檔。
基于本教程的出發點，我們将會通過CDN來引入bootstrap-combined.min.css檔案而不需要下載下傳任何的檔案。
它能夠使所有的twitter bootstrap CSS在我們的模闆中生效。
bootstrap的container類是非常有用的，它能在頁面中建立一個居中的區域，然後我們能夠把其他位置的内容放到裡面。container類等價于建立了一個具有靜态寬度并且magin值為auto的一個居中的div框。twitter bootstrap的 container類的優點在于它是響應式的，它會以目前螢幕的寬度為基礎計算出最佳的寬度予以實用。
在body标簽中，使用container類建立一個div。它會作為頁面主要的放置其他代碼的外層包裹。
如果你調整這個DIV的高度并将其背景顔色設定為白色，你所看到的效果會是這樣：
現在我們已經有一個地方可以添加額外的HTML代碼，我們可以添加标題文本然後再建立站點的主要導覽列。
加入如下的文本或者你選擇的文字到container類的div标簽當中。
現在并沒有多少新的東西，這僅僅是一個标題，讓我們轉移到更有趣的方面，twitter bootstrap導航。
Bootstrap 有一個nav類讓我們能夠建立各種各樣的導航元素，你可以在h1标簽之後加入如下的代碼。
navbar相關的類擁有導覽列所有的樣式，添加navbar-inverse類将會應用一個很酷的黑色風格，這是一個twitter bootstrap的常見搭配。我建議在這個樣式的基礎上進行拓展進而創造你的獨一無二的導航。但在這個教程中我們仍然會使用基礎的bootstrap樣式。
在類為navbar的DIV當中，我們添加另一個類為nav-collapse的DIV并為其添加行内樣式height:auto；這是告訴bootstrap當這個頁面在小于970px寬度的浏覽器視窗當中時，它會提供一個壓縮的切換視圖。
如果你儲存了index.html檔案然後在浏覽器中打開，當你調整浏覽器視窗的寬度時你就能夠看到這個變化，如圖所示。
大于979px
小于979px
另外，我們可以添加nav類到一個HTML無序清單元素中以便從bootstrap CSS檔案中應用更多的樣式，也可以添加一個active類到“HOME”清單項中。
我們已經完成了站點的主導航，現在我們需要添加主要内容區和一個側邊欄來支援更多的連結或導航路徑。請把下面的代碼添加到導覽列之後。
栅格系統利用了12列的布局，這意味着一個頁面可以被分割成12個相同的列。下面這張從bootstrap官方文檔中拿到的圖檔給出了一個很好的展示。
在我們剛剛黏貼在導覽列下面的代碼中你可以看到名為span9和span3的類。它們會把頁面分割成左邊9列寬度和右邊3列寬度的兩部分，形成我們的内容區域和側邊欄。使用栅格系統的其中一個好處就是它會根據視窗寬度動态計算出列的寬度，是以你不需要寫任何的媒體查詢也能使你的站點工作在任何的螢幕分辨率下。
你可以通過改變span的數量和調整浏覽器的大小來觀察它們的效果。你會注意到當内容區小于724px的時候，這些列會垂直地堆放。
現在我們在主内容區域把下列文本或者任何其他的文本放在在h2标簽之後，這隻是為了把頁面拉長一點。
現在站點會像如下顯示：
我們将要使用垂直頁籤來建立一個額外的導航區。複制和黏貼下面的代碼到sidebar的h2标簽之後。
這是一個簡單的展示！上面的代碼照字面了解僅僅是一個具有類為nav-tabs和nav-stacked的無序清單，但它卻為我們創造了一個導航面闆。
看看最後的效果，一個基于twitter bootstrap的響應式設計的頁面完成了。
通過twitter bootstrap所提供的特性，我們給出了這個非常快速的bootstrap基礎教程,但花點時間練習并多多查閱官方的文檔，不久之後你就可以成為一個bootstrap的專家了。
在閱讀本教程之後你應該懂得如何使用栅格系統，不同類型的導航和響應式設計的基本原理。
如果你有任何的問題或者回報，請在下面的評論區留下你的資訊，感謝你的閱讀。
譯者手語：整個翻譯依照原文線路進行，并在翻譯過程略加了個人對技術的了解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載煩請注明出處：