我們需要一個基本的HTML模板，以便我們可以包含所需的引導程序文件。這是我們的twitter bootstrap項目的開始，將代碼復制到文件中并將其命名為index.html。

在這段代碼中，我們添加了一些CSS，使頁面背景變為灰色，因為我們可以在設計中輕松查看不同的列，以便更容易理解。

引入twitter bootstrap文件

為了使用twitter bootstrap，我們只需要在我們的模板中引入一個文件。導入文件的方法有很多種。如果您想了解這些方法，請參閱相關文檔。

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

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

Twitter Bootstrap的容器

bootstrap容器類非常有用，它可以在頁面中創建一個居中區域，然后我們可以將其他位置的內容放在里面。容器類相當于創建一個居中的div框，其靜態寬度和magin值為auto。 twitter bootstrap容器類的優點是它具有響應性，它可以通過根據當前屏幕的寬度計算最佳寬度來工作。

在body標簽中，使用容器類創建div。它將作為頁面上其他代碼主要放置的外部包裝器。

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

標題和導航

現在我們可以添加額外的HTML代碼，我們可以添加標題文本，然后為該站點創建主導航欄。

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

現在沒有太多新東西，這只是一個標題，讓我們轉到twitter引導程序導航的更有趣的方面。

Bootstrap有一個導航類，允許我們創建各種導航元素。您可以在h1標記之后添加以下代碼。

與導航欄相關的類具有導航欄的所有樣式。添加navbar-inverse類將應用酷黑色樣式，這是twitter引導程序的常見匹配。我建議擴展此樣式以創建您獨特的導航。但在本教程中，我們仍將使用基本引導程序樣式。

在DIV類導航欄中，我們添加另一個帶有nav-collapse的DIV并添加內聯樣式高度: auto;這告訴bootstrap當頁面在小于970px寬度的瀏覽器窗口中時，它將提供A壓縮切換視圖。

標簽:＆amp; nbsp＆amp; nbsp沈陽微信二次開發＆amp; nbsp沈陽營銷類型網站建設＆amp; nbsp沈陽網站設計＆amp; nbsp沈陽微信營銷