一、Bootstrap簡介
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
詳細的來說，Bootstrap是一個簡單、靈活的，可用于搭建簡潔漂亮WEB頁面的HTML，CSS，JAVASCRIPT的工具集。BootStrap基于HTML5 和 CSS3，具有漂亮的設計，友好的學習曲線，卓越的兼容性，還有12列的響應式柵格結構，豐富的組件等等。簡單的說，Bootstrap 是一款簡潔強大的前端開發框架，它可以讓WEB開發更迅速，更簡單。
二、Bootstrap到底是什么
2011年，twitter的“一小撮”工程師為了提高他們內部的分析和管理能力，用業余時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--Bootstrap。Bootstrap由MARK OTTO和Jacob Thornton所設計和建立，在github上開源之后，迅速成為該站上最多人watch&fork的項目。大量工程師踴躍為該項目貢獻代碼，社區驚人地活躍，代碼版本進化非常快速，官方文檔質量極其高(可以說是優雅)，同時涌現了許多基于Bootstrap建設的網站：界面清新、簡潔;要素排版利落大方。如屏幕這幾個網站頁面都是用Bootstrap框架制作的：
（http://www.ghostchina.com/）
（http://www.zend.com/）
（http://www.uberflip.com/）
GitHub上這樣介紹 bootstrap：
☑ 簡單靈活可用于架構流行的用戶界面和交互接口的html、css、javascript工具集。
☑ 基于html5、css3的bootstrap，具有大量的誘人特性：友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔。
☑ 自定義JQuery插件，完整的類庫，基于Less等。
三、如何開始使用Bootstrap
首先我們打開Bootstrap中文網鏈接 http://www.bootcss.com/ ，打開之后是這個樣子的：
上面顯示著當前最新版本的Bootstrap，點進去之后，可以看到如下界面：
一個醒目的Download鏈接在頁面的中心位置。
Bootstrap分為2 和 3版本，和jquery比較類似。Bootstrap2 系列版本支持更廣泛的瀏覽器，但是因為兼容性等歷史包袱，它本身的功能不夠激進，代碼也不夠簡潔。從Bootstrap 2.3.2之后，官方基本上關閉了對此系列版本的更新。而Bootstrap 3系列版本則放棄了IE 7 和 firefox 3.x 版本的支持。在IE 8 中，雖然支持，但是由于它對CSS 3 的支持有限，所以呈現出的效果也會大打折扣。
這里呢，我們主要針對當前最新的Bootstrap 3.3.7 版本，我們可以看到官方網站它的結構非常清晰，首頁呢是對Bootstrap框架的一個簡明額要的介紹，包含一些簡單的宣傳，還有一些應用的鏈接。當我們點擊 “下載Bootstrap” 按鈕時，會跳轉到起步頁面，如下圖所示。
Bootstrap網站呢，分為“起步”、“CSS”、“組件”、“JavaScript” 和 “定制化” 這樣幾個主要的類別，我們從“起步” 頁面看起。在這里，你可以下載最新版本的Bootstrap框架，還有它的源碼，還有Sass編譯的Bootstrap源碼。
當然，如果你不想下載，還可以使用Bootstrap官方提供的CDN鏈接，直接在頁面中引入官方CDN的路徑即可。
那么我們下載下來的Bootstrap框架主要包含哪些文件呢？這里列出了Bootstrap框架主要包含的文件，如下圖所示：
有css，一些js插件，還有一些字體文件。大家注意，Bootstrap所有的js插件都依賴于jQuery，因此jQuery必須在Bootstrap之前引入。
下面是官方推薦的標準的使用Bootstrap框架頁面模板
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 14 <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 17 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>你好，世界！</h1> 22 23 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 24 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 25 <!-- Include all compiled plugins (below), or include individual files as needed --> 26 <script src="js/bootstrap.min.js"></script> 27 </body> 28 </html>
我們逐行的簡單的看一下這個模板。
1、首先第1行是html 5的定義，然后第4行是頁面utf-8編碼。
2、注意Bootstrap不支持IE的兼容模式，第五行的代碼是為了讓在IE瀏覽器中運行最新的渲染模式。
3、接下來的第6行代碼，大家要注意，我們平時使用的移動瀏覽器，是把頁面放在一個虛擬的視口，也就是viewport中，通常這個虛擬的視口比屏幕寬，這樣呢就不用把每個網頁擠到很小的一個視口中，但是這樣會破壞沒有針對移動瀏覽器優化的網頁布局。用戶可以通過平移和縮放來看網頁不同的部分，viewport可以讓網頁開發者來控制它的大小和縮放。這里的寬度呢是控制viewport 也就是視口的大小，可以指定一個值。width=device-width 這句話的意思就是讓寬度等于設備的寬度，下面這句 initial-scale=1 是設置初始縮放的比例，也就是當頁面第一次載入的時候縮放的比例，這里設置為1，也就是不縮放。這段代碼的意思翻譯成中文也就是讓視口的寬度等于物理設備上真實的分辨率，初始的縮放比例為1，也就是不做任何的縮放，這樣呢網頁會因此顯得更加的細膩。一般我們在適配移動瀏覽器時基本上都要加上這樣一句代碼。
4、接下來第11行代碼，就是載入Bootstrap的CSS樣式。
5、第13行至第18行，在這里要注意如果IE的版本低于IE 9，因為Bootstrap 3.0的3.3系列的框架，它不支持IE 7，低于IE 9 也就是IE 8 引入了兩個js。第一個是讓IE 8 瀏覽器支持HTML 5標簽，第二個主要是讓IE 8 瀏覽器對媒體查詢，也就是我們的“media quires” 對它進行支持。
6、最后第23至26行很好理解，也就是加入jQuery和Bootstrap js插件的支持。大家注意，我們平時要把css文件放在<head></head>中，要把js文件放在<body>的最下面。
四、基本的HTML模板
上一小節已經對Bootstrap提供的模板做了詳細的介紹，在這一小節中我們把這個模板代碼粘貼過來，以供大家學習查看，大家可以根據實際情況在此基礎上進行擴展，只需要確保文件引用順序一致即可。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Bootstrap的HTML標準模板</title> 8 <!-- Bootstrap --> 9 <link href="css/bootstrap.min.css" rel="stylesheet"> 10 <!--你自己的樣式文件 --> 11 <link href="css/your-style.css" rel="stylesheet"> 12 <!-- 以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 --> 13 <!--[if lt IE 9]> 14 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 15 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 16 <![endif]--> 17 </head> 18 <body> 19 <h1>Hello, world!</h1> 20 21 <!-- 如果要使用Bootstrap的js插件，必須先調入jQuery --> 22 <script src="js/jquery-1.11.3/jquery.min.js"></script> 23 <!-- 包括所有bootstrap的js插件或者可以根據需要使用的js插件調用 --> 24 <script src="/js/bootstrap.min.js"></script> 25 </body> 26 </html>
我們來簡單解釋一下其中幾條的重要代碼：
bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器兼容html5新增的標簽，引入下面代碼文件即可。
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理為使IE6、7、8版本瀏覽器兼容css3樣式，引入下面代碼：
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
五、全局樣式
在制作Web頁面時，前端人員都習慣為網站設置一個全局樣式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是輕量的CSS基礎代碼庫，他并沒有一味的重置樣式，而是注重各瀏覽器基礎表現，降低開發難度。大部分前端人員都具有歸零的思想，但實際你會發現，歸零之后的樣式在開發過程中會存在著潛在的問題，例如，在全局樣式表中將em變成一個普通標記，明明應該是斜體，怎么就沒效果了呢？
Bootstrap框架在這一部分做了一定的變更，不再一味追求歸零，而是更注重重置可能產生問題的樣式（如，body,form的margin等），保留和堅持部分瀏覽器的基礎樣式，解決部分潛在的問題，提升一些細節的體驗，具體說明如下：
- 移除body的margin聲明
- 設置body的背景色為白色
- 為排版設置了基本的字體、字號和行高
- 設置全局鏈接顏色，且當鏈接處于懸浮“:hover”狀態時才會顯示下劃線樣式
例子：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>全局樣式</title> 6 <link href="css/bootstrap.min.css" rel="stylesheet"> 7 </head> 8 9 <body> 10 11 <!-- Main jumbotron for a primary marketing message or call to action --> 12 <div class="container theme-showcase" role="main"> 13 <div class="jumbotron"> 14 <h1>Hello, world!</h1> 15 <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 16 <p><a href="#" >Learn more ?</a></p> 17 </div> 18 </div> 19 </body> 20 </html>
運行效果：
其實Bootstrap的全局樣式采用了“normalize.css”，但并沒有一味的全部使用此重置樣式，而是在此基礎上進行了一些改良，讓其更適合Bootstrap的設計思想。你可以通過“normalize.less”（LESS版本）或“_normalize.scss”（Sass版本）進行深入的了解。
文章列表
留言列表
