我們需要以一個基本的HTML模板，這樣我們能夠把所需要的bootstrap文件包含進來。下面就是我們twitter bootstrap項目的開頭，復制這些代碼到一個文件中并將其命名為index.html。

這段代碼中我們已經添加了一些CSS使頁面的背景呈亮灰色，因為這樣我們能夠輕易地在我們的設計中看見不同的列，使它更加容易理解。

引入twitter bootstrap文件

為了使用twitter bootstrap我們僅僅需要把一個文件引入到我們的模板當中來，引入文件有很多種方法，如果你想了解這些方法請查閱相關文檔。

基于本教程的出發點，我們將會通過CDN來引入bootstrap-combined.min.css文件而不需要下載任何的文件。

它能夠使所有的twitter bootstrap CSS在我們的模板中生效。

Twitter Bootstrap的容器

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寬度的瀏覽器窗口當中時，它會提供一個壓縮的切換視圖。