Bootstrap框架技術

一、概述

首先我們來說說 Bootstrap 是什麼。

進入 Bootstrap 的官方網站（getbootstrap.com/），我們可以看到這樣一句話：Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

這句話的意思是：Bootstrap是最受歡迎的HTML、CSS和JS框架，用於開發響應式佈局、移動設備優先的Web項目。大家也可進入 Bootstrap 中文網（bootcss.com/）學習 Bootstrap 的框架內容。

二、優勢

Bootstrap是由 Twitter 發布並開源的前端框架，使用非常火爆。據我們調查，目前在各大中小型公司和企業中，前端項目非常多的都在全面推行使用 Bootstrap。當然如此火爆自然有它的道理，下面為大家簡單的分析一下：

首先，Bootstrap 出自 Twitter。由大公司發布，並且完全開源，自然久經考驗，減少了測試的工作量。這也就是我們經常說到的站在巨人的肩膀上，不重複造輪子。

其次，Bootstrap 的代碼有著非常良好的代碼規範。在使用 Bootstrap 時也有助於我們去養成良好的編碼習慣，在 Bootstrap 的基礎之上創建項目，日後代碼的維護也變得異常簡單清晰。

第三，Bootstrap 是基於 Less 打造的，並且也有 Sass版本。Less/Sass是CSS的預處理技術，正因如此，它一經推出就包含了一個非常實用的 Mixin 庫供我們調用，使得我們在開發過程中對CSS的處理更加簡單。

第四，響應式開發。Bootstrap響應式的柵格系統（Grid System）非常先進，它已經幫你搭建好了實現響應式設計的基礎框架，並且非常容易修改，如果你是一個新手，Bootstrap 可以幫助你在非常短的時間內上手響應式佈局的設計。

第五，豐富的組件與插件。Bootstrap 的 HTML組件和 JS組件非常豐富，並且代碼簡潔，非常易於修改，如果你覺得它設計的樣子不是你所想要的，你完全可以在其基礎之上修改成自己想要的任何樣子。由於 Bootstrap 的火爆，又出現了不少圍繞 Bootstrap 而開發的JS插件，這就使得開發的工作效率得到極大提升。

以上這些都是使用 Bootstrap 所帶來的優勢。當然 Bootstrap 並不能幫你完成所有事情，它只是一個的框架，在這個框架上面你依舊可以任意的發揮，並且發揮得更好，但是前提是你要駕馭得了它。

三、體驗

我們來看兩個使用 Bootstrap 佈局的頁面。

第一個頁面：home.baidu.com/。

我們僅看頁首導航部分，在PC端瀏覽器查看時效果如下：

打開開發者工具，模擬移動設備端在寬度為 768 像素下的查看效果：

我們發現，頁首導航條現在不見了，在首行居中部分顯示了 LOGO 圖片，最前邊顯示了一個可摺疊/展開的菜單，將菜單展開：

原來被隱藏的頁首導航欄被摺疊到了菜單中。

這是非常典型的一個響應式的使用，因為如果保持導航佈局結構，在低解析度顯示情況下，導航佈局寬度可能會超出水平顯示的寬度，那麼瀏覽器中就會出現水平滾動條，在移動設備端，這是不友好的體現。如果摺疊到菜單中，當需要使用時再展開，通過上下滑動來選擇菜單導航，這樣既使得頁面佈局更簡潔，又提升了用戶體驗，所以這是經常使用到的響應式佈局結構。

第二個頁面：fairchildsemi.com/。

在PC端瀏覽器中（水平1280像素解析度）打開頁面，顯示效果如下：

切換到移動設備端在水平方向 768 像素下查看顯示效果：

大家仔細比較這兩張圖，在頂部通欄顯示的效果、LOGO行顯示效果及導航欄顯示效果都發生了變化，在低解析度下查看時，頁面會變得更加簡潔，這也體現的是響應式佈局的優勢。

該頁面導航欄下方是通欄的大圖輪播效果，切換不同顯示解析度的情況下，該輪播效果都能自動適應各不同解析度，這是通過 Bootstrap 中的JS插件來完成的。如果是原生的JS寫法，這個輪播圖可能就要寫兩個小時，使用 Bootstrap 的情況，即使使用不熟練，也能夠在10分鐘以內完成該輪播圖效果了。

四、示例

好，體會了一下 Bootstrap 在開發時帶來的好處後，下面我們來自己動手，編寫一個使用 Bootstrap 佈局的登錄頁面。

俗話說，工欲善其事，必先利其器。要使用 Bootstrap 就需要先下載 Bootstrap 用於生產環境的資源。大家可以從 github.com/twbs/bootstr 下載用於生產環境的 Bootstrap。

下載的資源目錄結構：

css 目錄中放置的是使用 Bootstrap 時所需要使用到的全局的CSS樣式表文件，包括編譯好的 css 文件、壓縮過的 css 文件，還提供了 css 的源碼映射表 .map文件；fonts 目錄中放置的是字體圖標的文件；js 目錄中放置的是用於開發環境的 js 插件。需要注意的是，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以jQuery必須在 Bootstrap 之前引入。

將下載好的資源放到自己項目目錄下：

新建登錄的 html 頁面，為了確保適當的繪製和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標籤，再使用 <link> 引入外部 css 樣式表文件。源碼如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width_=device-width, initial-scale=1">

<title>用戶登錄</title>

<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

</body>

</html>

對於登錄表單的佈局，我們使用 Bootstrap 的柵格系統（Grid System）來實現。

柵格系統會隨著屏幕或視口（viewport）尺寸的變化，自動分為最多12列，我們可以直接使用 Bootstrap 中預定義的類來實現佈局。

柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，待佈局的內容就可以放入這些創建好的佈局中。

「行（row）」必須包含在佈局容器 .container （固定寬度）或 .container-fluid （100% 寬度）中，通過行可以在水平方向創建一組「列（column）」，待佈局的內容就放置於「列」中。

「行」可以使用預定義類 .row 來創建，「列」也有類似的預定義類，規則如下表所示：

使用「列」的類前綴，後跟佈局所佔據列寬（1~12）即可。那麼我們可以設計如下佈局：

<div class="container">

<div class="row">

<div class="col-md-6 col-sm-8"></div>

</div>

</div>

登錄表單在中等屏幕時佈局佔用6列的寬度，在小屏幕時佔用8列寬度。如下所示：

但通常我們會將登錄表單在水平方向居中位置顯示出來，當然方式也有多種，可以使用柵格系統中列的偏移來完成。使用 .col-md-offset-* 類可以將列向右側偏移，通過使用 * 選擇器為當前元素增加了左側的邊距（margin），如.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。那麼上述佈局可以更新為：

<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2"></div>

如下圖所示效果：

使用 h1 標籤來描述頁面標題，使用預定義類 .text-center 讓文本在 h1 塊中居中顯示：

<h1 class="text-center">用戶登錄</h1>

接下來開始實現表單內容的佈局。我們可以使用 Bootstrap 中定義好的輸入框組來佈局，如下所示效果：

這時我們需要使用到預定義類 .input-group 來表示輸入框組，可以使用 .input-group-addon 在輸入框的任意一側添加額外元素或按鈕，如果需要輸入框寬度自適應佈局容器大小，則可使用 .form-control 類來實現。該佈局結構代碼如下：

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" class="form-control" placeholder="Username">

</div>

可以將輸入框前的元素替換為一個圖標的表示，這時可以使用 Bootstrap 提供的 Glyphicons 字體圖標。在字體圖標下方直接提供了預定義的類樣式名，如：

則修改佈局如下：

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" placeholder="Username">

</div>

顯示效果如下：

以同樣的方式添加密碼框佈局，再添加一個是否記住用戶名的複選框。效果如下：

最後佈局登錄按鈕。

在 Bootstrap 中也設置了許多預定義好的按鈕樣式，可以直接拿來使用。Bootstrap 可以使用預定義好的類 .btn將元素變成按鈕的樣子，這裡還是使用表單提交按鈕來佈局，只是使用Bootstrap的樣式：

<input type="submit" class="btn" value="登錄">

現在佈局好之後的效果：

這樣登錄按鈕顯得很彆扭，繼續使用 .btn-block 可以將按鈕變成塊級元素，拉伸到父元素的 100% 寬度，同時使用 .btn-success 樣式設置按鈕成功樣式：

最後在佈局的列結構上使用 .well 樣式，就能加上嵌入的簡單效果。完整代碼清單如下：

<div class="container">

<div class="row">

<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2 well">

<h1 class="text-center">用戶登錄</h1>

<form>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" placeholder="Username">

</div>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

<input type="password" class="form-control" placeholder="Password">

</div>

<div class="checkbox">

<label>

<input type="checkbox"> 記住用戶名

</label>

</div>

<input type="submit" class="btn btn-success btn-block" value="登錄">

</form>

</div>

</div>

</div>

效果：

到此，一個簡單的使用 Bootstrap 佈局的登錄表單就完成了。我們回顧一下，實現這個佈局時，完全不用自己書寫 CSS 樣式代碼，直接使用 Bootstrap 預定義好的類來完成即可。如果自己定義各樣式內容，要達到上述響應式佈局效果，可能需要兩個小時，但如果使用 Bootstrap 來實現，不用 10 分鐘就完成了佈局，這就是效率。

五、小結

從以上示例來看，Bootstrap 已為開發者預定義了非常多的有用的類，開發者只需要在使用過程中熟記這些類名即可，當然也可以在已經定義樣式的基礎上再來實現定製，這就需要十分熟練的使用了。

Bootstrap 中除了這些預定義好的類之外，還有非常多的其它組件與JS插件可以使用，大家可以繼續通過 Bootstrap 文檔進行查閱。


推薦閱讀：
相关文章