我們需要一個(gè)基本的HTML模板，以便我們可以包含所需的引導(dǎo)程序文件。這是我們的twitter bootstrap項(xiàng)目的開(kāi)始，將代碼復(fù)制到文件中并將其命名為index.html。

在這段代碼中，我們添加了一些CSS，使頁(yè)面背景變?yōu)榛疑?，因?yàn)槲覀兛梢栽谠O(shè)計(jì)中輕松查看不同的列，以便更容易理解。

引入twitter bootstrap文件

為了使用twitter bootstrap，我們只需要在我們的模板中引入一個(gè)文件。導(dǎo)入文件的方法有很多種。如果您想了解這些方法，請(qǐng)參閱相關(guān)文檔。

基于本教程的起點(diǎn)，我們將通過(guò)CDN引入bootstrap-combined.min.css文件而不下載任何文件。

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

Twitter Bootstrap的容器

bootstrap容器類非常有用，它可以在頁(yè)面中創(chuàng)建一個(gè)居中區(qū)域，然后我們可以將其他位置的內(nèi)容放在里面。容器類相當(dāng)于創(chuàng)建一個(gè)居中的div框，其靜態(tài)寬度和magin值為auto。 twitter bootstrap容器類的優(yōu)點(diǎn)是它具有響應(yīng)性，它可以通過(guò)根據(jù)當(dāng)前屏幕的寬度計(jì)算最佳寬度來(lái)工作。

在body標(biāo)簽中，使用容器類創(chuàng)建div。它將作為頁(yè)面上其他代碼主要放置的外部包裝器。

如果您調(diào)整此DIV的高度并將其背景顏色設(shè)置為白色，您看到的效果將如下所示：

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

現(xiàn)在我們可以添加額外的HTML代碼，我們可以添加標(biāo)題文本，然后為該站點(diǎn)創(chuàng)建主導(dǎo)航欄。

將以下文本或您選擇的文本添加到容器類的div標(biāo)記中。

現(xiàn)在沒(méi)有太多新東西，這只是一個(gè)標(biāo)題，讓我們轉(zhuǎn)到twitter引導(dǎo)程序?qū)Ш降母腥さ姆矫妗?

Bootstrap有一個(gè)導(dǎo)航類，允許我們創(chuàng)建各種導(dǎo)航元素。您可以在h1標(biāo)記之后添加以下代碼。

與導(dǎo)航欄相關(guān)的類具有導(dǎo)航欄的所有樣式。添加navbar-inverse類將應(yīng)用酷黑色樣式，這是twitter引導(dǎo)程序的常見(jiàn)匹配。我建議擴(kuò)展此樣式以創(chuàng)建您獨(dú)特的導(dǎo)航。但在本教程中，我們?nèi)詫⑹褂没疽龑?dǎo)程序樣式。

在DIV類導(dǎo)航欄中，我們添加另一個(gè)帶有nav-collapse的DIV并添加內(nèi)聯(lián)樣式高度: auto;這告訴bootstrap當(dāng)頁(yè)面在小于970px寬度的瀏覽器窗口中時(shí)，它將提供A壓縮切換視圖。

標(biāo)簽:＆amp; nbsp＆amp; nbsp沈陽(yáng)微信二次開(kāi)發(fā)＆amp; nbsp沈陽(yáng)營(yíng)銷類型網(wǎng)站建設(shè)＆amp; nbsp沈陽(yáng)網(wǎng)站設(shè)計(jì)＆amp; nbsp沈陽(yáng)微信營(yíng)銷