1.1簡(jiǎn)介:
Bootstrap,來(lái)自 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語(yǔ)言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)化而來(lái)。
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語(yǔ)義化標(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è);其他屬于沒(méi)有壓縮的。map后綴的文件是css源碼映射表,在一些特定的瀏覽器工具中使用。
1.3.2 js目錄包含兩個(gè)文件,分別為壓縮和未壓縮的js文件。
1.3.3 fonts目錄下包含不同后綴的字體文件。
1.4創(chuàng)建第一個(gè)頁(yè)面
我使用的編輯器是sublime text。大家也可以網(wǎng)上搜索這個(gè)編輯器,感覺(jué)還是很強(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腳本庫(kù)
瀏覽器打開http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右鍵另存為jquery.min.js保存到j(luò)s文件夾下
4.引入腳本庫(kù)
在body底部引入,這樣網(wǎng)頁(yè)打開時(shí)先不加載js庫(kù),能提高頁(yè)面加載速度。
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
第一個(gè)頁(yè)面代碼:頁(yè)面顯示一個(gè)按鈕
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一個(gè)Bootstrap頁(yè)面</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>
效果圖如下: