Web前端技術：Bootstrap插件基礎---Bootstrap環境安裝，使用Bootstrap 的基本HTML 模板，製做導航欄，下拉菜單，製做輪播圖，柵格佈局，製做標籤頁，製做模態框，頁面底部

一、Bootstrap環境安裝

下載 Bootstrap 的已編譯的版本，解壓縮 ZIP 文件，獲得下面的文件/目錄結構：

新建一文件夾做爲網站的根目錄，將上面獲得的文件存放於該目錄，網站的目錄結構可參照下圖。

 

二、 使用Bootstrap 的基本HTML 模板

 

三、 製做導航欄

導航欄是 Bootstrap 網站的一個基礎組件，也是導航頁的響應式基礎組件。它在移動設備的視圖中是摺疊的，隨着可用視口寬度的增長，導航欄也會水平展開。以下所示。

                                                                  正常顯示效果

 

 

 

                                                                 視口寬度小顯示效果

在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。基本框架以下。

①　button標籤裏包含三個span顯示三條橫線圖標。　

②　經過 data 屬性：向元素添加 data-toggle="collapse" 和 data-target，自動分配可摺疊元素的控制。data-target 屬性接受一個 CSS 選擇器，並會對其應用摺疊效果。請確保向可摺疊元素添加 class .collapse。

• data-toggle="collapse" 添加到您想要展開或摺疊的組件的連接上。
• href 或 data-target 屬性添加到父組件，它的值是子組件的 id。

③　修改導航欄的樣式，加入class樣式：navbar-inverse（黑底白字），並把導航欄固定在瀏覽器頂部，添加class樣式: navbar-fixed-top。  

 

 四、下拉菜單

 

使用下拉菜單（Dropdown）插件向任何組件（好比導航欄、標籤頁、膠囊式導航菜單、按鈕等）添加下拉菜單。基本結構以下。

①　經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單

②　利用caret樣式實現下拉菜單的小三角效果

③　下拉菜單的ul必須使用dropdown-menu樣式

④　Bootstrap提供divider類樣式，具備分隔線的效果

 

五、製做輪播圖

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式，效果以下圖所示。

該插件基本結構以下。

 

①　設置.carousel樣式，包括：滾動廣告的高度500、背景顏色#000、margin-bottom: 60px

②　設置.carousel下的 .item樣式，包括：滾動廣告的高度500、背景顏色#000

③　防止圖片大小不一致，寬度拉伸，設置.carousel .img寬度100%

④　設置carousel-caption下的p下邊距 20px，字體大小20px，行高1.8em

⑤　設置body的padding-top，使輪播圖與導航欄無空隙。

 

六、 柵格（網格）佈局

Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。

根據上述結構，完成下面的效果。

 

七、製做標籤頁

標籤頁（Tab）插件能夠把內容放置在標籤頁或者是膠囊式標籤頁甚至是下拉菜單標籤頁中。

標籤頁其實就是一個列表，主要有兩部份內容組成：

①　選項卡菜單組件，對應的是 Bootstrap的 nav-tabs選項卡。導航連接要設置 data-toggle="tab"，經過 href="對應內容面板的選擇符(通常是ID)"，主要做用是用戶點擊的時候能找到該選擇符所對應的面板內容tab-pane。

②　選項卡面板組件，面板內容統一放在 tab-content 容器中，並且每一個內容面板 tab-pane 都須要設置一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配

它的基本結構以下。

經過該結構，在上面的container容器內完成標籤頁的製做，注意如下幾個方面。

①　上圖中白色線內容比較關鍵

②　因爲選項卡面板的每個tab-pane採用柵格佈局，因此內容必定要放在row的div中，且注意row必定要放在container的容器中，前面講明柵格佈局。

③　每一個tab-pane包括一行兩欄。

效果以下圖所示。

①　在tab-pane的row容器中添加.feature樣式，設置padding:30px 0

②　每欄的標題應用.feature-leading樣式，設置：字體大小50px、字體顏色#2a6496、上邊距120px

③　每欄的副標題應用text-muted樣式，設置：字體大小28px、字體顏色#999

八、製做模態框

模態框（Modal）插件是覆蓋在父窗體上的子窗體。一般，目的是顯示來自一個單獨的源的內容，能夠在不離開父窗體的狀況下有一些互動。子窗體可提供信息、交互等。

本例在單擊導航欄中的「關於」時，彈出一個模態框，以下圖所示。

模態框的基本結構包括三個部分，具體以下：

①　頭部——主要包括關閉按鈕和模態框標題

②　主要內容——主要是一些文本

③　底部——主要是一些按鈕，如關閉、提交等按鈕。

使用模態窗口，常使用按鈕或連接來觸發。設置觸發的方法：在控制器元素（好比按鈕或者連接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）

 

九、頁面底部

在container窗口內製做頁面底部信息，效果以下圖所示。

1*利用HTML5的footer標籤完成，並將「回到頂部」段落右浮動，完成頁面效果。參考：應用Bootstrap提供的pull-right類樣式。

2*完成後可能頁面底部內容離底部太近，所以，能夠設置body的padding-bottom，這樣頁面底部相對會美觀。