大神教你幾招玩轉Bootstrap框架技術
一、概述
首先我們來說說 Bootstrap 是什麼。
進入 Bootstrap 的官方網站(http://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 中文網(http://www.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 並不能幫你完成所有事情,它只是一個的框架,在這個框架上面你依舊可以任意的發揮,並且發揮得更好,但是前提是你要駕馭得了它。
三、體驗
我們來看兩個使用 Bootstrap 佈局的頁面。
我們僅看頁首導航部分,在PC端瀏覽器檢視時效果如下:
開啟開發者工具,模擬移動裝置端在寬度為 768 畫素下的檢視效果:
我們發現,頁首導航條現在不見了,在首行居中部分顯示了 LOGO 圖片,最前邊顯示了一個可摺疊/展開的選單,將選單展開:
原來被隱藏的頁首導航欄被摺疊到了選單中。
這是非常典型的一個響應式的使用,因為如果保持導航佈局結構,在低解析度顯示情況下,導航佈局寬度可能會超出水平顯示的寬度,那麼瀏覽器中就會出現水平滾動條,在移動裝置端,這是不友好的體現。如果摺疊到選單中,當需要使用時再展開,通過上下滑動來選擇選單導航,這樣既使得頁面佈局更簡潔,又提升了使用者體驗,所以這是經常使用到的響應式佈局結構。
在PC端瀏覽器中(水平1280畫素解析度)開啟頁面,顯示效果如下:
切換到移動裝置端在水平方向 768 畫素下檢視顯示效果:
大家仔細比較這兩張圖,在頂部通欄顯示的效果、LOGO行顯示效果及導航欄顯示效果都發生了變化,在低解析度下檢視時,頁面會變得更加簡潔,這也體現的是響應式佈局的優勢。
該頁面導航欄下方是通欄的大圖輪播效果,切換不同顯示解析度的情況下,該輪播效果都能自動適應各不同解析度,這是通過 Bootstrap 中的JS外掛來完成的。如果是原生的JS寫法,這個輪播圖可能就要寫兩個小時,使用 Bootstrap 的情況,即使使用不熟練,也能夠在10分鐘以內完成該輪播圖效果了。
四、示例
好,體會了一下 Bootstrap 在開發時帶來的好處後,下面我們來自己動手,編寫一個使用 Bootstrap 佈局的登入頁面。
俗話說,工欲善其事,必先利其器。要使用 Bootstrap 就需要先下載 Bootstrap 用於生產環境的資源。大家可以從 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下載用於生產環境的 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 來建立,“列”也有類似的預定義類,規則如下表所示:
超小螢幕 手機 (<768px) |
小螢幕 平板 (≥768px) |
中等螢幕 桌面顯示器 (≥992px) |
大螢幕 大桌面顯示器 (≥1200px) |
|
.container 最大寬度 |
(自動) |
750px |
970px |
1170px |
類字首 |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
使用“列”的類字首,後跟佈局所佔據列寬(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 文件進行查閱。