我們需要以一個(gè)基本的HTML模板，這樣我們能夠把所需要的bootstrap文件包含進(jìn)來(lái)。下面就是我們twitter bootstrap項(xiàng)目的開(kāi)頭，復(fù)制這些代碼到一個(gè)文件中并將其命名為index.html。

這段代碼中我們已經(jīng)添加了一些CSS使頁(yè)面的背景呈亮灰色，因?yàn)檫@樣我們能夠輕易地在我們的設(shè)計(jì)中看見(jiàn)不同的列，使它更加容易理解。

引入twitter bootstrap文件

為了使用twitter bootstrap我們僅僅需要把一個(gè)文件引入到我們的模板當(dāng)中來(lái)，引入文件有很多種方法，如果你想了解這些方法請(qǐng)查閱相關(guān)文檔。

基于本教程的出發(fā)點(diǎn)，我們將會(huì)通過(guò)CDN來(lái)引入bootstrap-combined.min.css文件而不需要下載任何的文件。

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

Twitter Bootstrap的容器

bootstrap的container類是非常有用的，它能在頁(yè)面中創(chuàng)建一個(gè)居中的區(qū)域，然后我們能夠把其他位置的內(nèi)容放到里面。container類等價(jià)于創(chuàng)建了一個(gè)具有靜態(tài)寬度并且magin值為auto的一個(gè)居中的div框。twitter bootstrap的 container類的優(yōu)點(diǎn)在于它是響應(yīng)式的，它會(huì)以當(dāng)前屏幕的寬度為基礎(chǔ)計(jì)算出最佳的寬度予以實(shí)用。

在body標(biāo)簽中，使用container類創(chuàng)建一個(gè)div。它會(huì)作為頁(yè)面主要的放置其他代碼的外層包裹。

如果你調(diào)整這個(gè)DIV的高度并將其背景顏色設(shè)置為白色，你所看到的效果會(huì)是這樣：

標(biāo)題和導(dǎo)航

現(xiàn)在我們已經(jīng)有一個(gè)地方可以添加額外的HTML代碼，我們可以添加標(biāo)題文本然后再創(chuàng)建站點(diǎn)的主要導(dǎo)航條。

加入如下的文本或者你選擇的文字到container類的div標(biāo)簽當(dāng)中。

現(xiàn)在并沒(méi)有多少新的東西，這僅僅是一個(gè)標(biāo)題，讓我們轉(zhuǎn)移到更有趣的方面，twitter bootstrap導(dǎo)航。

Bootstrap 有一個(gè)nav類讓我們能夠創(chuàng)建各種各樣的導(dǎo)航元素，你可以在h1標(biāo)簽之后加入如下的代碼。

navbar相關(guān)的類擁有導(dǎo)航條所有的樣式，添加navbar-inverse類將會(huì)應(yīng)用一個(gè)很酷的黑色風(fēng)格，這是一個(gè)twitter bootstrap的常見(jiàn)搭配。我建議在這個(gè)樣式的基礎(chǔ)上進(jìn)行拓展從而創(chuàng)造你的獨(dú)一無(wú)二的導(dǎo)航。但在這個(gè)教程中我們?nèi)匀粫?huì)使用基礎(chǔ)的bootstrap樣式。

在類為navbar的DIV當(dāng)中，我們添加另一個(gè)類為nav-collapse的DIV并為其添加行內(nèi)樣式height:auto；這是告訴bootstrap當(dāng)這個(gè)頁(yè)面在小于970px寬度的瀏覽器窗口當(dāng)中時(shí)，它會(huì)提供一個(gè)壓縮的切換視圖。