Bootstrap Web設計與開發(fā)實戰(zhàn)（上篇）

BootstrapWeb設計與開發(fā)實戰(zhàn)（上篇）目錄\h第1章Bootstrap從何而來\h1.1初識Bootstrap\h1.2什么是響應式設計\h1.3響應式設計四大原則\h1.3.1移動優(yōu)先還是PC優(yōu)先\h1.3.2內容流\h1.3.3位圖還是矢量圖\h1.3.4相對單位還是固定單位\h1.4Bootstrap設計目標\h1.4.1優(yōu)先針對移動設備\h1.4.2瀏覽器支持\h1.4.3響應式設計\h1.5本章小結\h第2章Bootstrap開發(fā)環(huán)境\h2.1Bootstrap開發(fā)環(huán)境概述\h2.1.1下載Bootstrap開發(fā)包\h2.1.2Bootstrap開發(fā)包目錄結構\h2.1.3在網(wǎng)站中使用Bootstrap框架\h2.2調用Bootstrap樣式\h2.3調用Bootstrap組件\h2.4調用BootstrapJS特效\h2.5實戰(zhàn)：一個Bootstrap實現(xiàn)的響應式頁面\h2.6本章小結\h第3章Bootstrap腳手架\h3.1Bootstrap全局樣式\h3.1.1什么是全局樣式\h3.1.2基于HTML5文檔類型\h3.1.3屏幕、排版與鏈接\h3.1.4用Normalize重置樣式\h3.2柵格系統(tǒng)\h3.2.1默認柵格系統(tǒng)\h3.2.2流式柵格系統(tǒng)\h3.3頁面布局\h3.3.1固定布局\h3.3.2流式布局\h3.4響應式設計\h3.4.1啟用響應式特性\h3.4.2響應式Bootstrap特點\h3.4.3Bootstrap支持的設備\h3.4.4響應式布局輔助類\h3.4.5如何應用響應式布局\h3.5本章小結\h第4章Bootstrap樣式設計\h4.1Bootstrap排版\h4.1.1標題\h4.1.2頁面主體\h4.1.3強調\h4.1.4縮略語\h4.1.5地址\h4.1.6引用\h4.1.7列表\h4.1.8描述\h4.1.9代碼\h4.2Bootstrap表格\h4.2.1默認樣式表格\h4.2.2斑馬紋樣式表格\h4.2.3圓角邊框樣式表格\h4.2.4鼠標懸停樣式表格\h4.2.5帶行屬性樣式表格\h4.3Bootstrap按鈕\h4.3.1默認樣式按鈕\h4.3.2按鈕大小樣式\h4.3.3特殊樣式按鈕\h4.4Bootstrap圖片\h4.5本章小結\h第5章Bootstrap組件設計\h5.1Bootstrap下拉菜單\h5.1.1標簽\h5.1.2對齊方式\h5.1.3禁用\h5.1.4子下拉菜單\h5.2Bootstrap按鈕組\h5.2.1基本按鈕組\h5.2.2工具欄按鈕組\h5.2.3垂直按鈕組\h5.3Bootstrap按鈕式下拉菜單\h5.4Bootstrap導航\h5.4.1默認標簽導航\h5.4.2pills標簽導航\h5.4.3堆疊式標簽導航\h5.4.4下拉菜單式標簽導航\h5.4.5導航列表\h5.4.6標簽頁式導航\h5.5Bootstrap導航條\h5.5.1默認樣式導航條\h5.5.2導航條表單\h5.5.3響應式導航條\h5.6Bootstrap分頁\h5.6.1標準分頁方式\h5.6.2翻頁分頁方式\h5.7Bootstrap標簽與徽章\h5.8Bootstrap進度條\h5.8.1基本樣式進度條\h5.8.2斜條紋樣式進度條\h5.8.3堆疊樣式進度條\h5.9Glyphicons字體圖標\h5.10本章小結\h第6章Bootstrap插件設計\h6.1Bootstrap插件概述\h6.1.1單個或全部引入\h6.1.2data屬性\h6.1.3事件\h6.2Bootstrap模態(tài)對話框\h6.2.1模態(tài)對話框說明\h6.2.2靜態(tài)模態(tài)對話框\h6.2.3動態(tài)模態(tài)對話框\h6.3Bootstrap下拉菜單（高級版）\h6.4Bootstrap滾動監(jiān)聽\h6.5Bootstrap可切換式標簽頁\h6.6Bootstrap提示框\h6.6.1工具提示框\h6.6.2彈出框\h6.6.3警告框\h6.7Bootstrap按鈕\h6.7.1狀態(tài)按鈕\h6.7.2復選按鈕\h6.7.3單選按鈕\h6.8Bootstrap折疊\h6.9Bootstrap幻燈\h6.10本章小結\h第7章Bootstrap響應式多媒體\h7.1Bootstrap圖標的響應式\h7.2Bootstrap圖像的響應式\h7.2.1可適配的圖像\h7.2.2圖像網(wǎng)格\h7.3Bootstrap視頻的響應式\h7.4本章小結第1章

Bootstrap從何而來Bootstrap框架源自于Twitter，是基于HTML、CSS和JavaScript構建的、目前最受歡迎的前端框架。Bootstrap簡潔靈活，提供很多響應式設計模板，也支持跨平臺操作，是目前Web開發(fā)和移動Web開發(fā)人員的首選框架。本章將介紹Bootstrap框架的基礎內容，幫助讀者了解認識Bootstrap框架。本章主要內容包括：了解響應式設計的概念掌握響應式設計的設計原則了解Bootstrap的設計目標1.1初識Bootstrap本節(jié)先向讀者介紹Bootstrap框架從何而來，幫助讀者了解Bootstrap框架的歷史及特點。Bootstrap框架是由Twitter設計師MarkOtto和JacobThornton共同開發(fā)出來的，準確講其是一個HTML+CSS的前端框架。Bootstrap框架提供了優(yōu)雅的HTML和CSS規(guī)范，是由動態(tài)CSS語言寫成，完美地解決了頁面響應式設計的難點。因此，Bootstrap框架推出后頗受歡迎，已經(jīng)成為Web開發(fā)人員實際意義上的設計規(guī)范，目前許多優(yōu)秀的開源前端框架均是基于Bootstrap源碼性能優(yōu)化而來的。Bootstrap框架中包含了豐富的Web組件，設計人員可以使用這些組件快速搭建出一個漂亮美觀、功能完備的網(wǎng)站。同時，Bootstrap框架還自帶了多個jQuery功能插件，這些功能插件為Bootstrap框架中的組件提供了功能支持。設計開發(fā)人員可以對Bootstrap框架中所有的CSS變量進行修改，根據(jù)實際需求來裁剪出滿足項目需要的代碼。Bootstrap框架目前最新版本是v3.3.5，且最新版本是完全向下兼容的。同時，官方網(wǎng)站也已經(jīng)發(fā)布了Bootstrap4.0預覽版，以供開發(fā)人員測試使用。1.2什么是響應式設計頁面可以根據(jù)用戶的終端設備尺寸或瀏覽器的窗口尺寸來自動地進行布局調整，這就是響應式布局設計。目前，用戶終端設備可謂是種類繁多、琳瑯滿目。我們細想一下，從臺式顯示器到筆記本電腦屏幕，從平板電腦再到手機界面，且同一類設備但不同廠家的產品屏幕尺寸也不盡相同，如果設計起頁面來，想想都頭大。響應式布局就是為了解決這個問題而誕生的，且目前已經(jīng)是主流的設計方式了。圖1.1就是一個直觀的響應式布局設計示意圖，圖中演示了同一個頁面在臺式顯示器、iPad及iPhone三種設備屏幕尺寸上呈現(xiàn)的效果。圖1.1響應式布局設計示意圖下面再來看圖1.2和圖1.3，這是兩個典型的響應式設計案例，讀者可以直觀地感受一下。圖1.2響應式設計案例1圖1.3響應式設計案例2近年來，新興的移動互聯(lián)網(wǎng)發(fā)展勢頭非常迅猛，尤其是高性能智能手機和平板的普及，使得在移動設備上瀏覽絢麗的頁面成為可能（相對于曾經(jīng)的WAP手機站來說）。響應式設計越來越流行，Bootstrap框架就是因此應運而生的?？梢哉f，Bootstrap框架的出現(xiàn)解決了之前一直困擾設計人員的終端設備屏幕尺寸的兼容性問題，是廣大前端設計開發(fā)人員的福音。1.3響應式設計四大原則本節(jié)介紹一下響應式設計所需要遵循的一些基本原則，歸納起來一共有4個方面，具體如下：移動優(yōu)先還是PC優(yōu)先內容流位圖還是矢量圖相對單位還是固定單位1.3.1移動優(yōu)先還是PC優(yōu)先隨著移動互聯(lián)網(wǎng)的發(fā)展，很多小型創(chuàng)業(yè)企業(yè)甚至沒有了自己的網(wǎng)站，只有一個APP應用。在這個時代，網(wǎng)站項目是從小屏幕入手過渡到大屏幕（移動優(yōu)先），還是從大屏幕入手過渡到小屏幕（PC優(yōu)先），成為企業(yè)考慮的首要問題。傳統(tǒng)的大企業(yè)改造型網(wǎng)站，大部分是從大屏幕逐步過渡到小屏幕，而且在過渡到小屏幕時會碰到一些額外的限制，如沒法在第一頁面顯示更多的內容，要更簡潔，具體到要放哪些標簽都是需要決策的內容。

在新興的創(chuàng)業(yè)公司中，通常情況下都會從兩方面同時著手，所以具體哪個優(yōu)先還是要看哪種方式最適合你。1.3.2內容流隨著移動屏幕尺寸越來越小，內容所占的垂直空間也越來越多。也就是說，內容會向下方延伸，這被稱為“內容流”。早先的Web設計師習慣了使用像素和點來設計頁面，可能會覺得這有點難以掌握。不過好在它很簡單，多多練習就習慣了。圖1.4展示了兩種設計狀態(tài)下頁面內容變寬后的效果。圖1.4內容流對比1.3.3位圖還是矢量圖以前我們知道，當一張圖片被放大后就會出現(xiàn)比較“虛”的情況，這種圖是位圖，而放大后不變“虛”的則是矢量圖。先來了解一下兩者的概念。矢量圖使用線段和曲線描述圖像，所以稱為矢量，同時圖形也包含了色彩和位置信息。位圖使用像素（一格一格的小點）來描述圖像，計算機屏幕其實就是一張包含大量像素點的網(wǎng)格，在位圖中，圖像由每一個網(wǎng)格中的像素點的位置和色彩值來決定，每一點的色彩是固定的，所以放大后觀看圖像時，每一個小點看上去就像是一個馬賽克，這就是我們常說的“虛”。在響應式設計中，圖標或圖像都會涉及這個問題。如果我們的圖標有很多細節(jié)，并且應用了很多華麗的效果，那就用位圖，否則，考慮使用矢量圖。如果是位圖，使用jpg、png或gif；矢量圖則最好使用SVG或圖標字體。位圖和矢量圖兩者各有利弊。矢量圖通常比較小，很適合移動端來展示，但部分比較老的瀏覽器可能不支持矢量圖。還有，有些圖標有很多曲線，可能導致它的大小比位圖還大，所以要根據(jù)實際情況明智取舍。1.3.4相對單位還是固定單位對于設計師而言，我們的設計對象可能是桌面屏幕，也可能是移動端屏幕，或者介于兩者之間的任意屏幕類型。不同的終端像素密度也會不同，所以我們需要使用靈活可變且能夠適應各種設備的單位。傳統(tǒng)的設計單位有px、pt、cm等，但他們都是固定單位，沒法實現(xiàn)跨平臺展示。那么，在這種情況下，百分比等相對單位就到了發(fā)揮作用的時候了。使用百分比時，我們所說的寬度50%是表示寬度占屏幕大小（或者叫視區(qū)，即所打開瀏覽器窗口的大?。┑囊话?，如圖1.5所示。圖1.5固定單位和相對單位對比1.4Bootstrap設計目標本節(jié)介紹一下Bootstrap設計目標，包括目標對象、瀏覽器支持和響應式設計等內容。1.4.1優(yōu)先針對移動設備其實自Bootstrap3版本開始，Bootstrap框架包含了貫穿于整個庫的移動設備優(yōu)先的樣式。在之前的Bootstrap版本中（直到2.x），設計人員需要手動引用一個特定CSS文件，才能讓整個項目友好地支持移動設備?，F(xiàn)在不一樣了，Bootstrap3版本默認的CSS本身就是對移動設備優(yōu)先友好支持。Bootstrap框架的設計目標從優(yōu)先支持桌面設備轉變到優(yōu)先支持移動設備，這實際上是一個非常及時的、適應Web設計發(fā)展方向的轉變。因為，現(xiàn)在越來越多的用戶在使用移動設備，而且使用的頻次也是越來越高。1.4.2瀏覽器支持Bootstrap框架支持目前市面上的、幾乎所有的主流瀏覽器，下面列舉幾款瀏覽器：InternetExplorer(IE)GoogleChromeFirefoxOperaSafariMicrosoftEdge1.4.3響應式設計Bootstrap框架的響應式CSS能夠自適應于臺式機、平板電腦和手機等多種設備終端。下面我們簡單歸納一下Bootstrap框架的特點：為開發(fā)人員創(chuàng)建接口提供了一個簡潔統(tǒng)一的解決方案。包含了功能強大的內置組件，易于定制。提供了基于Web開發(fā)的定制。最重要的是框架開源的，設計人員可以通過修改框架源碼滿足特定需求。1.5本章小結本章主要介紹了Bootstrap框架的基本知識、其與響應式布局的關系以及Bootstrap框架的設計目標。希望能夠提高讀者對應用Bootstrap框架進行Web開發(fā)的興趣。第2章

Bootstrap開發(fā)環(huán)境從本章開始，就帶領讀者真正進入Bootstrap開發(fā)的實戰(zhàn)階段了，要實戰(zhàn)就要了解Bootstrap的開發(fā)環(huán)境、框架結構、布局方式，以及如何調用Bootstrap樣式和組件等方面的基本內容。本章的目的就是從Bootstrap項目的整體大局上入手，讓讀者對它的使用有個預先判斷。本章主要內容包括：下載Bootstrap的開發(fā)包初次在項目中使用Bootstrap在項目中調用Bootstrap的各種組成元素進行第一次Bootstrap項目實戰(zhàn)2.1Bootstrap開發(fā)環(huán)境概述本節(jié)先介紹Bootstrap框架的開發(fā)環(huán)境，包括如何下載Bootstrap開發(fā)包，如何在網(wǎng)站中使用Bootstrap框架，如何調用Bootstrap樣式、組件和JS特效等方面的內容。對于全書的內容來講，本節(jié)的內容是最基礎的部分。2.1.1下載Bootstrap開發(fā)包Bootstrap的官方網(wǎng)站地址是/，界面圖2.1所示?？梢栽诠倬W(wǎng)下載最新的版本和詳細的使用說明文檔。圖2.1Bootstrap官網(wǎng)目前，國內也有不錯的Bootstrap中文網(wǎng)站，例如“Bootstrap中文網(wǎng)”，讀者可以訪問網(wǎng)址/進行瀏覽，界面如圖2.2所示。圖2.2Bootstrap中文網(wǎng)在圖2.1中，讀者可以點擊DownloadBootstrap按鈕，轉到下載頁面，如圖2.3所示。圖2.3下載Bootstrap框架在上圖中可以看到三個下載選項。選擇第一項可以下載到Bootstrap框架開發(fā)包，但其不包括一些基本的源碼或文檔；如果想深入學習Bootstrap框架的源碼則需要下載第二項，但下載第二項需要注意，Bootstrap的源代碼是使用CSS的預編譯語言Less編寫的，下載源碼需要LESS編譯器；第三項是下載Sass預編譯包，后面章節(jié)中我們會進行介紹。如果開發(fā)人員要應用Bootstrap框架，則必須使用已經(jīng)編譯好的CSS文件。下載第一項，得到的是一個文件名為“bootstrap-3.3.7-dist.zip”的壓縮包，解壓后的目錄結構如圖2.4所示。其中，重要的文件存放在css目錄和js目錄之中了，下面我們會進行詳細的介紹。圖2.4壓縮包解壓后目錄結構2.1.2Bootstrap開發(fā)包目錄結構從圖2.4中可以看到，Bootstrap開發(fā)包中包含了css、js和font三個目錄，分別代表編譯好的樣式文件、腳本文件和字體文件。下面，看一下這三個目錄中具體都有什么文件，如圖2.5所示。圖2.5Bootstrap開發(fā)包目錄結構上圖中對設計人員有用的是css目錄中的樣式文件，以及js目錄中的腳本文件。其中，文件名中不含“min”關鍵字的是未壓縮的文件，而包含“min”關鍵字的是壓縮好的文件（體積小，下載速度快）。實際項目開發(fā)中，為了提高文件下載速度，都會選用壓縮好的文件。2.1.3在網(wǎng)站中使用Bootstrap框架在網(wǎng)站中使用Bootstrap框架的方法很簡單，和引入其他CSS或JavaScript文件一樣，使用<script>標簽引入JavaScript文件，使用<link>標簽引入CSS文件。不過需要注意的是Bootstrap的JavaScript效果都是基于jQuery的，因此需要使用Bootstrap的JavaScript動態(tài)效果的話，必須先引入jQuery。提示這里我們可以去/download/下載最新jQuery文件，或使用當前項目中已有的jQuery文件?！敬a2-1】引入Bootstrap（詳見源代碼ch02目錄中ch02.loadBootstrap.html文件）：01<html>

02<head>

03<linkhref="../bootstrap/css/bootstrap.css"rel="stylesheet">

04</head>

05<body>

06LoadBootstrap3...

07…..

08<scriptsrc="../js/jQuery.js"></script><!--jQuery應該放在前面優(yōu)先加載-->

09<scriptsrc="../bootstrap/js/bootstrap.js"></script>

10</body>

11</html>

提示JavaScript文件放在文檔尾部有助于提高加載速度?！敬a解析】引入Bootstrap還可以使用第三方的CDN服務，Bootstrap3版本則建議使用Bootstrap中文網(wǎng)提供的CDN，網(wǎng)址是/；當然如果是做國外的項目，首選則是Google的CDN服務了。本例效果如圖2.6所示。圖2.6網(wǎng)站中引入Bootstrap框架2.2調用Bootstrap樣式以編寫一個表格為例，如果不使用Bootstrap或者其他類似的框架，有以下兩步：（1）第一步肯定是構思設計表格的樣式，寬度、高度、行高、對齊方式、邊框等很多地方需要考慮，而且一開始的設想與實際效果并不符合，還需要后面不斷地調試。（2）第二步需要編寫相應的HTML/CSS代碼，邊寫，邊調試，還要邊思考如何給id或者class命名，最后可能還需要上司或者同事進行審核。如果決定使用Bootstrap，那么只需要引入Bootstrap，然后在<table>標簽中添加一個class="table"，就可以獲得一個Bootstrap設定好的表格樣式。【代碼2-2】應用Bootstrap表格樣式（詳見源代碼ch02目錄中ch02.loadTableCSS.html文件）：01<!DOCTYPEhtml>

02<htmllang="en">

03<head>

04<metacharset="UTF-8">

05<linkhref="../bootstrap/css/bootstrap.css"rel="stylesheet">

06<title>Bootstrap-LoadTableCSS</title>

07</head>

08<body>

09<tableclass="table"><!--只需要添加class="table"即可-->

10<tr>

11<th>No</th>

12<th>Name</th>

13<th>Age</th>

14<th>Gendle</th>

15</tr>

16<tr>

17<td>001</td>

18<td>Tom</td>

19<td>18</td>

20<td>male</td>

21</tr>

22<tr>

23<td>002</td>

24<td>Mary</td>

25<td>20</td>

26<td>female</td>

27</tr>

28<tr>

29<td>003</td>

30<td>Jack</td>

31<td>22</td>

32<td>male</td>

33</tr>

34</table>

35<scriptsrc="../js/jquery.js"></script><!--jQuery應該放在前面優(yōu)先加載-->

36<scriptsrc="../bootstrap/js/bootstrap.js"></script>

37</body>

38</html>

39<head>

本例效果如圖2.7所示。圖2.7應用Bootstrap表格樣式當然，Bootstrap框架功能非常強大，提供多種表格樣式。下面，我們添加一種類名為“table-striped”的類似斑馬紋表格樣式，并同時添加類名為“table-bordered”的樣式來為表格加上邊框?！敬a2-3】（詳見源代碼ch02目錄中ch02.loadTableStripedCSS.html文件）01<tableclass="tabletable-stripedtable-bordered">

02<tr>

03<th>No</th>

04<th>Name</th>

05<th>Age</th>

06<th>Gendle</th>

07</tr>

08<tr>

09<td>001</td>

10<td>Tom</td>

11<td>18</td>

12<td>male</td>

13</tr>

14<tr>

15<td>002</td>

16<td>Mary</td>

17<td>20</td>

18<td>female</td>

19</tr>

20<tr>

21<td>003</td>

22<td>Jack</td>

23<td>22</td>

24<td>male</td>

25</tr>

26</table>

本例代碼效果如圖2.8所示。圖2.8帶斑馬紋和邊框的表格2.3調用Bootstrap組件除了添加class的方式外，在布局方面，只要符合約定的一些class命名和嵌套結構，我們就可以輕松地構建出一些通用組件，以導航條為例?！敬a2-4】（詳見源代碼ch02目錄中ch02.loadNavbar.html文件）01<!DOCTYPEhtml>

02<htmllang="en">

03<head>

04<metacharset="UTF-8">

05<linkhref="../bootstrap/css/bootstrap.css"rel="stylesheet">

06<title>Bootstrap-LoadTableStripedCSS</title>

07</head>

08<body>

09<divclass="navbar">

10<divclass="navbar-inner">

11<aclass="brand"href="#">Bootstrap-Navbar</a>

12<ulclass="nav">

13<liclass="active"><ahref="#">Home</a></li>

14<li><ahref="#">News</a></li>

15<li><ahref="#">BBS</a></li>

16<li><ahref="#">About</a></li>

17</ul>

18</div>

19</div>

20<scriptsrc="../js/jquery.js"></script><!--jQuery應該放在前面優(yōu)先加載-->

21<scriptsrc="../bootstrap/js/bootstrap.js"></script>

22</body>

23</html>

24<head>

只要符合div.navbar>div.navbar-inner>ul.nav>li這樣的HTML文檔結構，就可以構建出一個頂部導航條，本例效果如圖2.9所示。圖2.9導航條效果2.4調用BootstrapJS特效對于Bootstrap中JavaScript效果的添加，一方面需要根據(jù)文檔編寫特定的HTML結構，另一方面需要調用JavaScript插件。下面以標簽頁切換效果為例來講解?！敬a2-5】（詳見源代碼ch02目錄中ch02.loadTabs.html文件）（1）首先編寫HTML文檔：01<ulclass="navnav-tabs"id="myTab">

02<liclass="active"><ahref="#home"data-toggle="tab">Home</a></li>

03<li><ahref="#news"data-toggle="tab">News</a></li>

04<li><ahref="#blog"data-toggle="tab">Blog</a></li>

05<li><ahref="#about"data-toggle="tab">About</a></li>

06</ul>

07<!--href屬性的值要和后面tab-pane中的id值對應-->

08<divclass="tab-content">

09<divclass="tab-paneactive"id="home">HomePage</div><!--tab

標簽對應的內容-->

10<divclass="tab-pane"id="news">NewsPage</div>

11<divclass="tab-pane"id="blog">BlogPage</div>

12<divclass="tab-pane"id="about">AboutPage</div>

13</div>

（2）JavaScript插件的調用一般有兩種方式，一種是采用Bootstrap自帶的觸發(fā)規(guī)則，在標簽中添加data-toggle="tab"這樣的屬性來實現(xiàn)（上述代碼第2行），這種方式的好處是無須編寫任何JavaScript代碼就可以實現(xiàn)功能；另一種則類似普通jQuery插件的調用方式，例如：$('#myTaba').click(function(e){

e.preventDefault();

$(this).tab('show');

})

本例最終實現(xiàn)的效果如圖2.10，點擊標簽頁就可以切換內容。圖2.10標簽頁效果2.5實戰(zhàn)：一個Bootstrap實現(xiàn)的響應式頁面Bootstrap3默認就引入了響應式設計，相比2.x版本，它有兩點比較大的變化：擁抱大屏幕，移除了小屏手機和大屏手機（480～768像素）這個媒介查詢區(qū)間，768像素以下的統(tǒng)一歸為小屏幕設備。設計了表現(xiàn)不同的柵格類，對柵格類的命名規(guī)則也做了很大的修改，更復雜，但使用也更靈活，能適應更多的場景。在Bootstrap2中，柵格全部采用span*作為前綴。而在Bootstrap3中采用了col-type-*這樣命名的前綴，其中type可以取xs（超小屏）、sm（小屏）、md（中屏）、lg（大屏）4個值。通過表2.1可以詳細查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設備上工作的。表2.1Bootstrap3的響應式布局區(qū)間【代碼2-6】一個Bootstrap實現(xiàn)的響應式頁面（詳見源代碼ch02目錄中ch02.firstBootstap.html文件）：01<!DOCTYPEhtml>

02<htmllang="en">

03<head>

04<metacharset="UTF-8">

05<linkhref="../bootstrap/css/bootstrap.css"rel="stylesheet">

06<title>Bootstrap-firstpage</title>

07</head>

08<bodystyle="margin:20px">

09<divclass="container">

10<divclass="row">

11<divclass="col-xs-12col-sm-3col-md-5col-lg-4"><!--左側邊欄-->

12<h1>News</h1>

13<h1>Blog</h1>

14<h1>About</h1>

15</div>

16<divclass="col-xs-12col-sm-9col-md-7col-lg-8"><!--右側邊欄-->

17<p>ThisisafirstBootstrappage.Pleaseteststhispageinvariousscreensize.</p>

18</div>

19</div>

20</div>

21<scriptsrc="../js/jquery.js"></script><!--jQuery應該放在前面優(yōu)先加載-->

22<scriptsrc="../bootstrap/js/bootstrap.js"></script>

23</body>

24</html>

根據(jù)表2.1中的介紹來看這個示例，可以發(fā)現(xiàn)在窗口尺寸大于1200px時，左側邊欄占據(jù)4列寬度，右側邊欄占據(jù)8列寬度；尺寸在992px～1200px時，左側邊欄占據(jù)5列寬度，右側邊欄占據(jù)7列寬度；而當尺寸在768px～992px時，左側邊欄占據(jù)3列寬度，右側邊欄占據(jù)9列寬度。小于768px時，則左右側邊欄都占據(jù)100%寬度，堆疊起來。下面，嘗試使用手機的屏幕尺寸來顯示該頁面（可以通過瀏覽器插件ResponsiveWebDesignTest來實現(xiàn)），圖2.11是“Portrait”樣式。圖2.11Bootstrap中的“Portrait”響應式頁面圖2.12是“Landscape”樣式。圖2.12Bootstrap中的“Landscape”響應式頁面2.6本章小結本章主要介紹了應用Bootstrap框架開發(fā)的入門知識，包括調用樣式、組件和JS特效等方面的內容，并配合具體代碼實例進行講解，希望對讀者有一定的幫助。第3章

Bootstrap腳手架腳手架這個詞可能讀者很陌生，英文原名是Scaffolding，好多中文翻譯為腳手架，也有人翻譯為基礎架構，實際就是網(wǎng)頁的整體模板和構架。這一章我們介紹Bootstrap腳手架方面的內容，其實就是介紹網(wǎng)頁在設計、布局方面的知識，因為這些內容偏理論概念，所以本章還會配合具體實例幫助讀者加深理解。本章主要內容包括：了解Bootstrap全局樣式認識柵格系統(tǒng)和流式柵格系統(tǒng)掌握頁面的幾種布局學習如何進行響應式設計3.1Bootstrap全局樣式本節(jié)介紹Bootstrap全局樣式，主要包括全局樣式的基本概念、使用特點方面的內容，是學習Bootstrap框架的起步要點。3.1.1什么是全局樣式所謂Bootstrap全局樣式，其實就是通過Bootstrap框架為頁面設置的全局CSS樣式表。該全局樣式表包括基本的HTML元素樣式、以及柵格系統(tǒng)，可以增強頁面及其元素的CSS效果。另外，開發(fā)人員深入學習Bootstrap全局樣式，有助于理解Bootstrap框架的底層結構，有助于Web開發(fā)獲得更好、更快、更強的實踐效果。3.1.2基于HTML5文檔類型Bootstrap框架使用到的某些HTML元素和CSS屬性需要將頁面設置為HTML5文檔類型。在具體Web項目中，每個HTML頁面都要參照下面的格式進行設置。<!DOCTYPEhtml>

<htmllang="zh-CN">

</html>

注：為了Bootstrap框架獲得更好的應用效果，我們可以將上面的頁面格式理解為是強制執(zhí)行的。3.1.3屏幕、排版與鏈接Bootstrap框架為屏幕、排版和鏈接設置了基本的全局樣式，具體定義在Bootstrap源碼包中的scaffolding.less文件中，讀者可以打開該源文件進行參閱。下面列舉一些scaffolding.less文件中的源碼，分析一下Bootstrap是如何定義全局樣式的?！敬a3-1】（詳見Bootstrap源碼包中scaffolding.less文件）body{

font-family:@font-family-base;

font-size:@font-size-base;

line-height:@line-height-base;

color:@text-color;

background-color:@body-bg;

}

【代碼3-1】設置了頁面body的全局樣式，具體如下：文字樣式為變量@font-family-base文字大小為變量@font-size-base行高度為變量@line-height-base顏色為變量@text-color背景顏色為變量@body-bg【代碼3-2】（詳見Bootstrap源碼包中scaffolding.less文件）a{

color:@link-color;

text-decoration:none;

&:hover,

&:focus{

color:@link-hover-color;

text-decoration:@link-hover-decoration;

}

}

【代碼3-2】設置了超鏈接a的全局樣式，具體如下：顏色為變量@link-color；當超鏈接處于“:hover”狀態(tài)時顏色為變量@link-hover-color，并增加了下劃線樣式。3.1.4用Normalize重置樣式從Bootstrap2開始，使用normalize.css樣式表進行重置，雖然設計開發(fā)時仍可以使用在reset.less文件中的許多重置代碼，但Bootstrap2還是去掉了一些不適合Bootstrap框架的元素。3.2柵格系統(tǒng)Bootstrap框架的柵格系統(tǒng)是其一大特色，通過使用柵格系統(tǒng)使得頁面布局更簡單、更合理、更美觀，并更易于維護。3.2.1默認柵格系統(tǒng)1.柵格系統(tǒng)特性Bootstrap框架默認的柵格系統(tǒng)最多為12列，形成一個940px寬的容器，而且默認沒有啟用響應式布局特性。如果設計時加入響應式布局的CSS文件，柵格系統(tǒng)則會根據(jù)可視窗口的寬度從724px到1170px進行自適應的動態(tài)調整。假如在可視窗口低于767px寬的情況下，列將不再固定并且會在垂直方向進行自動堆疊。以上這幾條描述的就是Bootstrap柵格系統(tǒng)的特性。圖3.1就是Bootstrap柵格系統(tǒng)（9列柵格）的一個示例。圖3.1Bootstrap柵格系統(tǒng)2.帶有基本柵格的HTML代碼假設應用簡單的列式布局，設計時創(chuàng)建一個類名為.row的容器，并在容器中加入合適數(shù)量的.spanXX列即可。由于Bootstrap默認是12列的柵格，所有.spanXX列所跨越的柵格數(shù)之和最多是12（或者等于其父容器的柵格數(shù)）?！敬a3-3】是一個基本的柵格布局設計（詳見源代碼ch03目錄中ch03.gridBase.html文件）：<divclass="bs-docs-grid">

<divclass="rowshow-grid">

<divclass="span1">1</div>

</div>

<divclass="rowshow-grid">

<divclass="span2">2</div>

</div>

<divclass="rowshow-grid">

<divclass="span4">4</div>

</div>

<divclass="rowshow-grid">

<divclass="span8">8</div>

</div>

<divclass="rowshow-grid">

<divclass="span12">12</div>

</div>

</div>

上面的代碼展示了.span1、.span2、.span4、.span8和.span12的柵格布局，頁面效果如圖3.2所示。圖3.2基本柵格系統(tǒng)3.偏移列Bootstrap柵格系統(tǒng)支持偏移列，可以使用.offsetXX類將列向右移動，相當于將列的左邊距增加了指定單位的寬度。【代碼3-4】是偏移列的柵格布局設計（詳見源代碼ch03目錄中ch03.gridOffset.html文件）：<divclass="bs-docs-grid">

<divclass="rowshow-grid">

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

</div>

<divclass="rowshow-grid">

<divclass="span2">span2</div>

<divclass="span3offset3">3offset3</div>

</div><!--/row-->

<divclass="rowshow-grid">

<divclass="span3offset3">3offset3</div>

<divclass="span2offset2">2offset2</div>

</div><!--/row-->

<divclass="rowshow-grid">

<divclass="span6offset6">6offset6</div>

</div><!--/row-->

</div>

上面的代碼展示了.offsetXX的柵格布局，頁面效果如圖3.3所示。圖3.3偏移列柵格系統(tǒng)4.嵌套列Bootstrap柵格系統(tǒng)還支持嵌套列，在默認柵格系統(tǒng)里將已有的.spanXX列內添加一個新的.row并加入.spanXX列，就可實現(xiàn)嵌套。需要注意的是，被嵌套列中的每列列數(shù)總和要等于父級列?！敬a3-5】是嵌套列的柵格布局設計（詳見源代碼ch03目錄中ch03.gridNesting.html文件）：<divclass="rowshow-grid">

<divclass="span12">

level1

<divclass="rowshow-grid">

<divclass="span3">

level2

</div>

<divclass="span6offset3">

level2

</div>

</div>

</div>

</div>

上面的代碼展示了嵌套列的柵格布局，頁面效果如圖3.4所示。圖3.4嵌套列柵格系統(tǒng)3.2.2流式柵格系統(tǒng)流式柵格系統(tǒng)的特點是對每一列的寬度使用百分比而不是像素數(shù)量，這是其與固定柵格系統(tǒng)的主要區(qū)別。流式柵格系統(tǒng)與固定柵格系統(tǒng)一樣擁有響應式布局的能力，這就保證其能對不同的分辨率和設備做出適當?shù)恼{整。1.基本的流式柵格的HTML代碼流式柵格將固定柵格的.row類替換為.row-fluid類，就能讓任何一行“流動”起來。應用于每一列的類不用改變，這樣能方便地在流式與固定柵格之間切換?！敬a3-6】是一個基本的流式柵格布局設計（詳見源代碼ch03目錄中ch03.fluidBase.html文件）：<divclass="bs-docs-grid">

<divclass="row-fluidshow-grid">

<divclass="span1">1</div>

</div>

<divclass="row-fluidshow-grid">

<divclass="span2">2</div>

</div>

<divclass="row-fluidshow-grid">

<divclass="span4">4</div>

</div>

</div>

上面的代碼展示了.span1、.span2和.span4的流式柵格布局，頁面效果如圖3.5所示。圖3.5基本流式柵格系統(tǒng)2.流式柵格的偏移Bootstrap流式柵格系統(tǒng)同樣支持偏移列，使用.offsetXX類即可，相當于將列的左邊距增加了指定百分比的寬度?！敬a3-7】是流式柵格布局偏移設計（詳見源代碼ch03目錄中ch03.fluidOffset.html文件）：<divclass="bs-docs-grid">

<divclass="row-fluidshow-grid">

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

<divclass="span1">1</div>

</div>

<divclass="row-fluidshow-grid">

<divclass="span2">span2</div>

<divclass="span3offset3">3offset3</div>

</div><!--/row-->

<divclass="row-fluidshow-grid">

<divclass="span3offset3">3offset3</div>

<divclass="span2offset2">2offset2</div>

</div><!--/row-->

<divclass="row-fluidshow-grid">

<divclass="span6offset6">6offset6</div>

</div><!--/row-->

</div>

上面的代碼展示了.offsetXX的流式柵格布局，頁面效果如圖3.6所示。圖3.6流式柵格系統(tǒng)偏移3.流式柵格的嵌套Bootstrap流式柵格系統(tǒng)同樣支持嵌套列，在默認柵格系統(tǒng)里將已有的.spanXX列內添加一個新的.row-fluid并加入.spanXX列，就可實現(xiàn)嵌套。需要注意的是，被嵌套列中的每列列數(shù)總和要等于父級列?！敬a3-8】是流式柵格布局嵌套設計（詳見源代碼ch03目錄中ch03.fluidNesting.html文件）：<divclass="row-fluidshow-grid">

<divclass="span12">

level1

<divclass="row-fluidshow-grid">

<divclass="span3">

level2

</div>

<divclass="span6offset3">

level2

<divclass="row-fluid">

<divclass="span6">Fluid6</div>

<divclass="span6">Fluid6</div>

</div>

</div>

</div>

</div>

</div>

上面的代碼展示了嵌套列的流式柵格布局，頁面效果如圖3.7所示。圖3.7流式柵格系統(tǒng)嵌套3.3頁面布局Bootstrap框架設計了固定布局與流式布局兩大類，下面分別針對這兩類布局進行介紹。3.3.1固定布局Bootstrap提供了一個通用的固定寬度，當然也可以變?yōu)轫憫降牟季址绞?，僅僅需要用<divclass="container">即可?！敬a3-9】是一個Bootstrap固定布局的設計（詳見源代碼ch03目錄中ch03.fixedLayout.html文件）：<divclass="mini-layout">

<divclass="mini-layout-body"></div>

</div>

上面的代碼展示了Bootstrap固定布局的設計，頁面效果如圖3.8所示。圖3.8固定布局3.3.2流式布局Bootstrap同樣提供了一個流式布局，僅僅需要利用<divclass="container-fluid">代碼就可以創(chuàng)建一個流式、兩列的頁面，非常適合于應用和文檔類頁面。【代碼3-10】是一個Bootstrap流式布局的設計（詳見源代碼ch03目錄中ch03.fluidLayout.html文件）：<divclass="mini-layoutfluid">

<divclass="mini-layout-sidebar"></div>

<divclass="mini-layout-body"></div>

</div>

上面的代碼展示了Bootstrap流式布局的設計，頁面效果如圖3.9所示。圖3.9流式布局3.4響應式設計Bootstrap框架設計的初衷就是為了更好地滿足響應式設計原理，本小節(jié)就主要介紹針對Bootstrap如何應用響應式設計的內容。3.4.1啟用響應式特性通過在文檔中的<head>標簽里添加合適的meta標簽并引入一個額外的樣式表即可啟用響應式CSS。如果已經(jīng)在定制頁面編譯好一個Bootstrap，那么只需添加一個meta標簽。<metaname="viewport"content="width=device-width,initial-scale=1.0">

<linkhref="assets/css/bootstrap-responsive.css"rel="stylesheet">

提示Bootstrap在默認情況下是沒有引入響應式特性的，因為不是任何情況都需要使用到。我們并不是鼓勵開發(fā)者移除此功能，而是在需要使用的時候才啟用它。3.4.2響應式Bootstrap特點媒體查詢允許在一些條件基礎上自定義CSS，例如：ratios、widths、displaytype等，但通常都是圍繞著min-width和max-width這兩個屬性進行。應用響應式Bootstrap特點可以概括如下：修改柵格系統(tǒng)中列的寬度。需要的時候，用堆疊元素代替浮動。調整標題和文本的大小以便適合各種設備。提示謹慎地使用媒體查詢，先從手機屏幕開始吧。對于大型的項目，應該考慮使用專門的代碼庫，而不是構筑在媒體查詢之上。3.4.3Bootstrap支持的設備Bootstrap所支持的幾個媒體查詢都放在了一個文件中，可以讓項目更靈活地適應不同設備和屏幕分辨率，具體如表3.1所示。表3.1媒體設備【代碼3-11】是媒體查詢的代碼示例：/*大屏幕*/

@media(min-width:1200px){...}

/*平板電腦和小屏電腦之間的分辨率*/

@media(min-width:768px)and(max-width:979px){...}

/*橫向放置的手機和豎向放置的平板之間的分辨率*/

@media(max-width:767px){...}

/*橫向放置的手機及分辨率更小的設備*/

@media(max-width:480px){...}

3.4.4響應式布局輔助類為了更快地開發(fā)移動設備，下面列出的輔助類用于針對不同設備顯示和隱藏內容。表3.2是可用的類列表，以及它們在媒體查詢布局下的效果。表3.2輔助類3.4.5如何應用響應式布局Bootstrap響應式布局需要在適當?shù)那闆r下進行使用，使用時避免創(chuàng)建同一個站點的不同版本，當上述介紹的類能對每種設備的展示做有益補充的時候才使用。注意：響應式工具不能用于table元素中，而且本就不支持。3.5本章小結本章主要介紹了應用Bootstrap框架開發(fā)的全局樣式表、柵格系統(tǒng)和頁面布局等方面的內容，并配合具體代碼實例進行講解。希望對讀者有一定的幫助。第4章

Bootstrap樣式設計這一章我們介紹Bootstrap基本樣式設計方面的內容，主要包括對HTML基本元素進行樣式定義，并利用可擴展的類來增強其展示效果方面的內容，并配合具體實例幫助讀者加深理解。本章主要內容包括：Bootstrap中頁面各組成元素的排版Bootstrap中表格的設計Bootstrap中按鈕的設計Bootstrap中圖片的設計4.1Bootstrap排版本節(jié)我們先介紹Bootstrap排版樣式方面的內容，主要包括標題、強調、縮略語、地址、引用和列表等元素，是Bootstrap樣式設計的基礎內容。4.1.1標題HTML中的所有標題標簽，從<h1>到<h6>均可以使用標題樣式。另外，從Bootstrap3還提供了.h1到.h6類，為的是給內聯(lián)（inline）屬性的文本賦予標題的樣式?！敬a4-1】是一個頁面標題的布局設計（詳見源代碼ch04目錄中ch04.cssHx.html文件）：01<divclass="bs-examplebs-example-type">

02<tableclass="table">

03<tbody>

04<tr>

05<td><h1>h1.Bootstrapheading</h1></td>

06</tr>

07<tr>

08<td><h2>h2.Bootstrapheading</h2></td>

09</tr>

10<tr>

11<td><h3>h3.Bootstrapheading</h3></td>

12</tr>

13<tr>

14<td><h4>h4.Bootstrapheading</h4></td>

15</tr>

16<tr>

17<td><h5>h5.Bootstrapheading</h5></td>

18</tr>

19<tr>

20<td><h6>h6.Bootstrapheading</h6></td>

21</tr>

22</tbody>

23</table>

24</div>

上面的代碼展示了標題樣式，頁面效果如圖4.1所示。圖4.1標題樣式在標題內還可以包含<small>標簽或賦予.small類的元素，可以用來標記副標題。【代碼4-2】是一個頁面副標題的布局設計（詳見源代碼ch04目錄中ch04.cssHxSmall.html文件）：01<divclass="bs-examplebs-example-type">

02<tableclass="table">

03<tbody>

04<tr>

05<td><h1>h1.Bootstrapheading<small>Secondarytext</small></h1></td>

06</tr>

07<tr>

08<td><h2>h2.Bootstrapheading<small>Secondarytext</small></h2></td>

09</tr>

10<tr>

11<td><h3>h3.Bootstrapheading<small>Secondarytext</small></h3></td>

12</tr>

13<tr>

14<td><h4>h4.Bootstrapheading<small>Secondarytext</small></h4></td>

15</tr>

16<tr>

17<td><h5>h5.Bootstrapheading<small>Secondarytext</small></h5></td>

18</tr>

19<tr>

20<td><h6>h6.Bootstrapheading<small>Secondarytext</small></h6></td>

21</tr>

22</tbody>

23</table>

24</div>

上面的代碼展示了副標題樣式，頁面效果如圖4.2所示。圖4.2副標題樣式4.1.2頁面主體Bootstrap框架默認將全局的字體大小設置為14px，行高度設置為20px，并且這些屬性會直接賦予<body>中的元素和所有段落元素。此外，段落（<p>）元素還被設置了等于0.5倍行高（即10px）的底部外邊距（margin）；同時，通過添加.lead類可以讓段落突出顯示?！敬a4-3】是一個頁面主體樣式的設計（詳見源代碼ch04目錄中ch04.bodyCopy.html文件）：01<divclass="bs-docs-example">

02<p>Bootstrap框架默認將全局的字體大小設置為14px，行高度設置為20px，并且這些屬性會直接賦予<body>中的元素和所有段落元素。</p>

03<p>此外，段落元素還被設置了等于0.5倍行高（即10px）的底部外邊距（margin）；同時，通過添加.lead類可以讓段落突出顯示。</p>

04</div>

05<divclass="bs-docs-example">

06<pclass="lead">通過添加<code>.lead</code>讓段落突出顯示</p>

07</div>

上面的代碼展示了頁面主體的段落樣式，其中第07行代碼通過增加.lead類實現(xiàn)了突出顯示，頁面效果如圖4.3所示。圖4.3頁面主體樣式4.1.3強調Bootstrap框架針對頁面需要強調的元素，優(yōu)化設計了加粗、斜體、對齊和顏色強調等樣式，使用時直接使用HTML元素標簽并輔助一些樣式即可?！敬a4-4】是一個使用強調樣式的設計（詳見源代碼ch04目錄中ch04.emphasizeTag.html文件）：01<divclass="bs-docs-example">

02<p><strong>用增加font-weight值的方式加粗強調一段文本</strong>.</p>

03</div>

04<divclass="bs-docs-example">

05<p><em>還可以用斜體字強調一段文本</em>.</p>

06</div>

07<divclass="bs-docs-example">

08<p><small>對于不需要強調的inline或block類型的文本使用small標簽</small>.</p>

09</div>

在上面的代碼中，第02行代碼通過<strong>標簽實現(xiàn)了文本加粗顯示，第05行代碼通過<em>標簽實現(xiàn)了文本斜體顯示，08行代碼通過<small>標簽針對不需要強調的文本實現(xiàn)了縮小顯示，頁面效果如圖4.4所示。圖4.4強調樣式（一）【代碼4-5】是一個通過文本對齊方式實現(xiàn)強調樣式的設計（詳見源代碼ch04目錄中ch04.emphasizeTag.html文件）：01<divclass="bs-docs-example">

02<p><strong>通過對齊方式也可以強調一段文本</strong>.</p>

03<pclass="text-left">左對齊文字</p>

04<pclass="text-center">中間對齊文字</p>

05<pclass="text-right">右側對齊文字</p>

06</div>

在上面的代碼中，第03～05行代碼分別通過“.text-left”“.text-center”和“.text-right”樣式類實現(xiàn)了文本的三種對齊方式，頁面效果如圖4.5所示。圖4.5強調樣式（二）【代碼4-6】是一個通過顏色樣式強調文本的設計（詳見源代碼ch04目錄中ch04.emphasizeTag.html文件）：01<divclass="bs-docs-example">

02<p><strong>通過工具類使用顏色來強調不同類別文本</strong>.</p>

03<pclass="muted">Thisismutedtextby'.muted'class.</p>

04<pclass="text-warning">Thisiswarningtextby'.text-warning'class.</p>

05<pclass="text-error">Thisiserrortextby'.text-error'class.</p>

06<pclass="text-info">Thisisinfotextby'.text-info'class.</p>

07<pclass="text-success">Thisissuccesstextby'.text-success'class.</p>

08</div>

在上面的代碼中，第03～07行代碼分別通過“.muted”“.text-warning”“.text-error”“.text-in