20分鐘成功編寫(xiě)bootstrap響應(yīng)式頁(yè)面 就這么簡(jiǎn)單
最近發(fā)現(xiàn)一個(gè)叫 Bootstrap 的好東西，Bootstrap 是現(xiàn)在最流行的響應(yīng)式 CSS 框架，它以移動(dòng)設(shè)備優(yōu)先，能夠快速適應(yīng)不同設(shè)備。使用它編寫(xiě)響應(yīng)式頁(yè)面快捷、方便，而且屏蔽了瀏覽器差異。使用了 Bootstrap 后，再也無(wú)法想象過(guò)去使用原始的 CSS 編寫(xiě)網(wǎng)頁(yè)的悲慘生活了。
經(jīng)過(guò)學(xué)習(xí)，我發(fā)現(xiàn)自己也具備了分分鐘開(kāi)發(fā)出一個(gè)高大上的頁(yè)面的能力。本文將會(huì)為大家介紹 Bootstrap，并且?guī)ьI(lǐng)大家一起實(shí)現(xiàn)一個(gè)響應(yīng)式頁(yè)面。
圖 1. 移動(dòng)優(yōu)先，適應(yīng)不同設(shè)備
一、安裝
最簡(jiǎn)單的方式是直接在網(wǎng)頁(yè)中引用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）提供的 Bootstrap，當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí)，會(huì)從就近的服務(wù)器上獲取資源。
清單 1. 從內(nèi)容分發(fā)網(wǎng)絡(luò)上獲取 Bootstrap
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap.min.css "> <!-- Optional theme --> <link rel="stylesheet" href="bootstrap/3.3.4/css/bootstrap-theme.min.css "> <!-- Latest compiled and minified JavaScript --> <script src="bootstrap/3.3.4/js/bootstrap.min.js"> </script>
還可以選擇下載 Bootstrap 在本地部署。用戶可以下載頁(yè)面下載完整的 Bootstrap，也可以在定制頁(yè)面根據(jù)項(xiàng)目需要，選擇項(xiàng)目用到的功能，編譯并下載一個(gè)簡(jiǎn)化版的 Bootstrap。下載完成后得到一個(gè) zip 文件，解壓后的目錄結(jié)構(gòu)如下所示：
清單 2. Bootstrap 目錄結(jié)構(gòu)
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
這里我們主要關(guān)注三個(gè)簡(jiǎn)化后的文件：bootstrap.min.css 是 Bootstrap 的主要組成部分，包含了大量要用到的 CSS 類；bootstrap-theme.min.css 包含了可選的 Bootstrap 主題；bootstrap.min.js 提供了一些 JavaScript 方法，需要注意的是 Bootstrap 依賴于 jQuery，因此使用 bootstrap.min.js 前必須引入 jQuery。和使用內(nèi)容分發(fā)網(wǎng)絡(luò)一樣，我們使用相對(duì)路徑在自己的頁(yè)面中引入相應(yīng)的 CSS 和 JavaScript。在實(shí)際開(kāi)發(fā)中，我們常常使用 Bootstrap 提供的模板作為起點(diǎn)，該模板引入了響應(yīng)式頁(yè)面需要的元數(shù)據(jù)和 Bootstrap，開(kāi)發(fā)者可在此基礎(chǔ)之上編寫(xiě)自己的響應(yīng)式頁(yè)面：
清單 3. Bootstrap 基礎(chǔ)模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
二、CSS
Bootstrap 首先是一個(gè) CSS 框架，它預(yù)定義了很多 CSS 類，開(kāi)發(fā)者只需要為 HTML 元素添加適當(dāng)?shù)?CSS 類，就能得到想要的樣式，可以完成頁(yè)面的布局、排版等功能。Bootstrap 提供的 CSS 功能異常強(qiáng)大，本文將重點(diǎn)放在其提供的網(wǎng)格系統(tǒng)上，對(duì)于其他功能，只在應(yīng)用時(shí)順便提及。您若想了解更多功能，可參考官方文檔。
容器
使用 Bootstrap 布局時(shí)，需要將 HTML 元素包含在一個(gè)容器（.container）里，Bootstrap 提供了兩種容器：.container 和 .container-fluid。前者將內(nèi)容固定寬度居中顯示，后者讓內(nèi)容橫向撐滿整個(gè)瀏覽器窗口，如下所示：
清單 4. .container 和 .container-fluid
<div class="container"> <p>“小時(shí)候每當(dāng)我生病，母親都會(huì)為我沖一杯咖啡，她溫柔地說(shuō)：“外國(guó)人都喝這個(gè)的。 ”幼小的我總害怕咖啡，酸甜苦澀交錯(cuò)。如今我走遍米蘿、上島、星巴克都找不到小時(shí)候喝的那個(gè)味道， 直到那天我喝了一杯板藍(lán)根?！?</p> </div> <div class="container-fluid"> <p>“小時(shí)候每當(dāng)我生病，母親都會(huì)為我沖一杯咖啡，她溫柔地說(shuō)：“外國(guó)人都喝這個(gè)的?！? 幼小的我總害怕咖啡，酸甜苦澀交錯(cuò)。如今我走遍米蘿、上島、星巴克都找不到小時(shí)候喝的那個(gè)味道， 直到那天我喝了一杯板藍(lán)根?！?</p> </div>
下圖是顯示在瀏覽器中的樣子：
圖 2. 容器
網(wǎng)格系統(tǒng)
和我們?cè)凇毒帉?xiě)第一個(gè)響應(yīng)式頁(yè)面》中設(shè)計(jì)的網(wǎng)格系統(tǒng)一樣，Bootstrap 也將頁(yè)面分為行（.row），每行 12 列（.col-md-*）。行必須包含在容器里，根據(jù)屏幕大小不同，列又分為.col-xs-、.col-sm-、.col-md-、.col-lg-，分別對(duì)應(yīng)手機(jī)(<768px)、平板(≥768px)、中等屏幕電腦(≥992px)和大屏幕電腦(≥1200px)。其中出現(xiàn)的這些像素稱為臨界點(diǎn)，每當(dāng)瀏覽器大小或屏幕尺寸從一個(gè)臨界點(diǎn)到達(dá)另一個(gè)臨界點(diǎn)時(shí)，相應(yīng)的 CSS 類就會(huì)起作用，頁(yè)面布局就會(huì)發(fā)生變化。詳見(jiàn)下圖：
圖 3.網(wǎng)格系統(tǒng)
怎么理解上面這個(gè)表格呢？假如在電腦上瀏覽頁(yè)面，需要將頁(yè)面分為三列，分別占行寬的 1/4、2/4、1/4，則可編寫(xiě)代碼如下：
清單 5. 一行分三列
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div>
打開(kāi)瀏覽器，可以看到它們各自占據(jù)了 12 列中的 3、6、3 列，加起來(lái)恰好是 12 列。如果我們縮小瀏覽器窗口，直到其小于 970px，此時(shí)會(huì)發(fā)現(xiàn)變成了三行，堆在一起顯示。除過(guò).col-xs-，其他 CSS 類的行為都一樣，在屏幕尺寸小于其臨界點(diǎn)時(shí)，會(huì)堆起來(lái)顯示，只有在屏幕尺寸大于其臨界點(diǎn)時(shí)，才按列顯示，而.col-xs- 在任何情況下都按列顯示。
對(duì)應(yīng)不同屏幕尺寸的 CSS 類可以混合使用，比如我想讓一個(gè)頁(yè)面在電腦上顯示 3 列，在手機(jī)上顯示成 2 列，則可編寫(xiě)代碼如下，在手機(jī)上，第三列會(huì)換行到下一行顯示，并且占據(jù)行寬的一半：
清單 6. 在電腦和手機(jī)上顯示不同數(shù)量的列
<div class="row"> <div class="col-xs-6 col-md-3">.col-md-3</div> <div class="col-xs-6 col-md-6">.col-md-6</div> <div class="col-xs-6 col-md-3">.col-md-3</div> </div>
如果希望在所有設(shè)備上顯示相同的列，只需要定義最小尺寸的.col-xs- 即可，布局會(huì)自動(dòng)擴(kuò)展到更大尺寸，反之則不成立：
清單 7. 所有設(shè)備上顯示同數(shù)量的列
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
還可以給列一定的偏移量，比如第一列占行寬的 1/4，我們希望第二列向右偏移 6 列，占用行末的 3 列：
清單 8. 列偏移
<div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3 col-md-offset-6">.col-md-3</div> </div>
列的順序也可以通過(guò).col-md-push-* 和 .col-md-pull-* 調(diào)整，它們的含義是將某元素向后推或向前拉若干列，開(kāi)發(fā)者可使用該特性，將重要內(nèi)容在手機(jī)顯示時(shí)，拉到前面：
清單 9. 推拉列
<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>
更讓人興奮的是，這種網(wǎng)格系統(tǒng)還可以嵌套，這樣就能進(jìn)行各種各樣復(fù)雜的布局了:
清單 10. 嵌套
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> <div class="col-sm-3"> Level 1: .col-sm-3 </div> </div> </div>
上面的代碼總體上分成兩列，其中第一列又嵌套了兩列。
Bootstrap 的網(wǎng)格功能為網(wǎng)頁(yè)布局提供了各種可能性，而且使用起來(lái)非常簡(jiǎn)單，下面我們不妨通過(guò)一個(gè)案例，看看使用 Bootstrap 編寫(xiě)一個(gè)響應(yīng)式頁(yè)面是多么簡(jiǎn)單。
三、實(shí)戰(zhàn)
假設(shè)現(xiàn)在要實(shí)現(xiàn)一個(gè)如下面的圖片所示的網(wǎng)頁(yè)：
圖 4. 網(wǎng)頁(yè)設(shè)計(jì)
首先，我們先將網(wǎng)頁(yè)元素劃分成相應(yīng)的行和列，下圖是作者的劃分：
圖 5. 將網(wǎng)頁(yè)設(shè)計(jì)劃分成行和列
據(jù)此，定義我們的 HTML 結(jié)構(gòu)，并添加適當(dāng)?shù)?Bootstrap CSS 類：
清單 11. 定義 HTML 結(jié)構(gòu)
<div class="container"> <div class="row"> <div class="col-md-3"> <img src="http://placehold.it/150x150"> </div> <div class="col-md-9"> <h1>Jane Doette</h1> <h3>front-end ninja</h3> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <img src="http://placehold.it/950x350"> </div> </div> <div class="row"> <div class="col-md-12"> <h2>Featured Work</h2> </div> </div> <div class="row"> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>applify</h2> <a >https://github.com/udacity/applify</a> </div> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>sunflower</h2> <a >https://github.com/udacity/sunflower</a> </div> <div class="col-md-4"> <img src="http://placehold.it/250x250"> <h2>bokeh</h2> <a >https://github.com/udacity/bokeh</a> </div> </div> </div>
作者編寫(xiě)上述代碼花了不到 10 分鐘，由于沒(méi)有圖片，作者使用了網(wǎng)上提供的占位圖片。在瀏覽器里打開(kāi)該頁(yè)面，已經(jīng)接近設(shè)計(jì)了，但字體、大小寫(xiě)、排版還與設(shè)計(jì)不符。接下來(lái)就要進(jìn)行微調(diào)，瀏覽 Bootstrap 文檔，可以發(fā)現(xiàn)相關(guān)的 CSS 類，最終完成的效果如下圖所示：
圖 6. 實(shí)現(xiàn)效果
更有意思的是，當(dāng)你縮小瀏覽器窗口，或者從手機(jī)上訪問(wèn)該頁(yè)面時(shí)，會(huì)發(fā)現(xiàn)它已經(jīng)是一個(gè)簡(jiǎn)單的響應(yīng)式頁(yè)面了，而我們并沒(méi)有添加任何額外代碼！看一下時(shí)間，總共花了不到 20 分鐘，我也兌現(xiàn)了分分鐘編寫(xiě)一個(gè)響應(yīng)式頁(yè)面的承諾。
- Bootstrap Metronic完全響應(yīng)式管理模板之菜單欄學(xué)習(xí)筆記
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- Bootstrap響應(yīng)式側(cè)邊欄改進(jìn)版
- Bootstrap實(shí)現(xiàn)圓角、圓形頭像和響應(yīng)式圖片
- 談一談bootstrap響應(yīng)式布局
- BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- 利用ASP.NET MVC和Bootstrap快速搭建響應(yīng)式個(gè)人博客站(一)
- bootstrap響應(yīng)式工具使用詳解
相關(guān)文章
js實(shí)現(xiàn)鍵盤(pán)控制DIV移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤(pán)控制DIV移動(dòng)的方法,以實(shí)例形式完整的講述了js控制div移動(dòng)所涉及的css、js與html使用技巧,需要的朋友可以參考下2015-01-01
JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
js去除重復(fù)字符串兩種實(shí)現(xiàn)方法
js去除重復(fù)字符串在項(xiàng)目開(kāi)發(fā)中很實(shí)用，接下來(lái)詳細(xì)介紹實(shí)現(xiàn)方法，感興趣的朋友可以參考下2013-01-01
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)右鍵菜單功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法
bootstrap-table是一個(gè)基于Bootstrap風(fēng)格的強(qiáng)大的表格插件神器。接下來(lái)通過(guò)本文給大家介紹Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法，感興趣的朋友一起看看吧2016-09-09
讓div運(yùn)動(dòng)起來(lái) js實(shí)現(xiàn)緩動(dòng)效果
讓div運(yùn)動(dòng)起來(lái)，這篇文章主要介紹了js實(shí)現(xiàn)緩動(dòng)效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript對(duì)象的淺拷貝與深拷貝實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)象的淺拷貝與深拷貝,結(jié)合實(shí)例形式分析了javascript淺拷貝與深拷貝的原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JavaScript中自定義事件用法,較為詳細(xì)的分析了自定義事件的原理與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
簡(jiǎn)單實(shí)用的js調(diào)試logger組件實(shí)現(xiàn)代碼
開(kāi)發(fā)js組件的時(shí)間調(diào)試總是麻煩的，最常用的就是用alert或者debugger來(lái)測(cè)試js的運(yùn)行狀態(tài)。2010-11-11
JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法
這篇文章主要介紹了JS和jQuery使用submit方法無(wú)法提交表單的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05