1.1簡(jiǎn)介：
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。
1.2特點(diǎn)：
（1）跨設(shè)備、瀏覽器
甚至兼容IE7、8，一般不考慮IE9以下的瀏覽器
（2）響應(yīng)式布局
不僅可以支持PC端的各種分辨率的顯示，還可以支持移動(dòng)端屏幕響應(yīng)式切換顯示。
（3）提供全面的組件
提供大量實(shí)用的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件
（4）內(nèi)置jQuery插件
內(nèi)置很多實(shí)用的jQuery插件
（5）支持HTML5 、CSS3
HTML5語義化標(biāo)簽和CSS3屬性都得到很好的支持。
（6）支持LESS動(dòng)態(tài)樣式
LESS實(shí)用變量、嵌套，操作混合編碼，編寫更快、更靈活的CSS，能和Bootstrap很好的配合開發(fā)。
1.3Bootstrap結(jié)構(gòu)：
BootStrap下載地址：http://v3.bootcss.com/ (選擇生產(chǎn)環(huán)境，最新版) 如下圖：
下載完解壓后主要有三個(gè)文件夾，分別是css（樣式） 、fonts（字體）、js（腳本），結(jié)構(gòu)如下：
1.3.1 css目錄下有四個(gè)css后綴的文件，min是壓縮包，一般使用這個(gè)；其他屬于沒有壓縮的。map后綴的文件是css源碼映射表，在一些特定的瀏覽器工具中使用。
1.3.2 js目錄包含兩個(gè)文件，分別為壓縮和未壓縮的js文件。
1.3.3 fonts目錄下包含不同后綴的字體文件。
1.4創(chuàng)建第一個(gè)頁面
我使用的編輯器是sublime text。大家也可以網(wǎng)上搜索這個(gè)編輯器，感覺還是很強(qiáng)大的，當(dāng)然你也可以使用其他的編輯器。好的，不廢話進(jìn)入主題。
1.首先新建一個(gè)文件夾，然后把剛剛下載解壓得到額三個(gè)文件夾放進(jìn)文件夾內(nèi)，利用編輯器新建一個(gè)index.html文件。
2.引入樣式
在head里引入
<link rel="stylesheet" href="css/bootstrap.min.css">
3.下載jQuery腳本庫
瀏覽器打開http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右鍵另存為jquery.min.js保存到j(luò)s文件夾下
4.引入腳本庫
在body底部引入，這樣網(wǎng)頁打開時(shí)先不加載js庫，能提高頁面加載速度。
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
第一個(gè)頁面代碼：頁面顯示一個(gè)按鈕
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一個(gè)Bootstrap頁面</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">按鈕</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果圖如下：
