最近需要做一個簡單的Web頁面??紤]到前端經(jīng)驗不足,為了快速產(chǎn)出,同時項目只是一個工具,對項目沒有什么要求,所以我選擇了Bootstrap這個框架作為Web框架。
寫從零學(xué)習(xí)Bootstrap的初衷:
看了半天的Bootstrap的文檔,包括官方的(http://v3.bootcss.com/getting-started/)和非官方的(http://www.runoob.com/bootstrap/bootstrap-tutorial.html),以及他人寫的簡單入門博客(http://www.cnblogs.com/fnng/p/4446047.html),和知乎上關(guān)于BootStrap上的評論(https://www.zhihu.com/question/35237472,https://www.zhihu.com/question/31409502)深深的感覺到,Bootstrap應(yīng)該是一個很好用的框架,學(xué)習(xí)起來也不難,是個高速產(chǎn)出的工具,但是靈活性不足以讓開發(fā)者隨心所欲的把玩。而且前端的東西太多太雜,如果沒有一個清晰的學(xué)習(xí)目標(biāo)和路線,很容易陷入無盡的細(xì)節(jié)中,沒有相應(yīng)的產(chǎn)出,會有挫敗感。因此我決定記錄下自己的學(xué)習(xí)路徑,方便自己復(fù)習(xí),以及廣大的初學(xué)者入門。
讓我們先從BootStrap的最簡單的模板開始:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標(biāo)簽*必須*放在最前面,任何其他內(nèi)容都*必須*跟隨其后! -->
<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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body></html>
讓我們一行行的來看(我用#代表解釋):
<!DOCTYPE html> #代表這是HTML5頁面
<html> #lang是“l(fā)anguage”的意思,是html標(biāo)簽的一個屬性,這個屬性是告訴搜索引擎,我這個頁面是中文頁面,是方便搜索引擎收錄的,對頁面顯示并沒有影響。"zh—CN"是ISO標(biāo)準(zhǔn)的一種寫法,表示中文。"zh"是"zhongwen"的前兩個字母(如果要告訴瀏覽器是英文界面,則lang="en","en"就對應(yīng)了“english”的前兩個字母),"CN"是國家代碼。(http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<meta charset="utf-8"> #meta標(biāo)簽是方便瀏覽器解析HTML文件的標(biāo)簽,charset屬性告訴瀏覽器,本HTML文件的編碼方式是utf-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> #http-equiv屬性告訴瀏覽器,本HTML規(guī)定的兼容性等細(xì)節(jié)是怎樣的。(http://www.jb51.net/web/70787.html)
#X-UA-Compatible值是IE8及以后版本的IE(IE9,IE10,11,...)中才生效的標(biāo)記,用來指定瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式。(網(wǎng)上有的文章居然說 X-UA-Compatible是IE8的專用標(biāo)記,簡直太誤導(dǎo)人了!比如這篇文章http://blog.sina.com.cn/s/blog_5ea463780100xwni.html,以及http://xiaoyu1985ban.iteye.com/blog/1816518)
#為什么要這么做?因為微軟之前的IE(IE6,IE7)是不符合W3C標(biāo)準(zhǔn)的,因此有些網(wǎng)站的代碼使用的是老IE的標(biāo)準(zhǔn),而不是W3C的標(biāo)準(zhǔn)。而從IE8開始,微軟采用了W3C標(biāo)準(zhǔn)。
#所以可以通過這個屬性值,來強(qiáng)制規(guī)定瀏覽器的渲染方式,當(dāng)設(shè)置content="IE6"的時候,這樣用戶以IE8及以上的瀏覽器也能正常顯示IE6標(biāo)準(zhǔn)下的HTML網(wǎng)頁。
#content="IE=edge"則是強(qiáng)制規(guī)定了瀏覽器以當(dāng)前所能支持的最新版本的IE標(biāo)準(zhǔn)進(jìn)行渲染。為什么要這樣做?因為有些用戶的瀏覽器可能設(shè)成了“兼容模式”,是以老IE標(biāo)準(zhǔn)去渲染HTML文件,當(dāng)遇到W3C標(biāo)準(zhǔn)的HTML代碼的時候會相出現(xiàn)錯誤。所以,當(dāng)我的代碼是W3C標(biāo)準(zhǔn)的,又不考慮老IE標(biāo)準(zhǔn)的支持時,強(qiáng)制使用瀏覽器中所能支持的最新版本IE渲染,能夠避免“兼容模式”帶來的顯示錯誤。(即不需要用戶手動更改瀏覽器的渲染模式)
<meta name="viewport" content="width=device-width, initial-scale=1"> #viewport規(guī)定了顯示窗口的相關(guān)設(shè)定,這里content中width規(guī)定了顯示寬度,initial-scale規(guī)定了初始縮放比例。(關(guān)于其他的功能:設(shè)置用戶能否縮放,最大縮放比例,最小縮放比例等,參考:http://my.oschina.net/liangrockman/blog/380727)
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
#這里是條件注釋判斷,當(dāng)IE版本小于IE9的時候,scrpit src采取上述cdn的資源。
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
#這里是鏈接了jquery和bootstrap的js文件,放在最后是為了加快網(wǎng)頁加載速度,即首先顯示出網(wǎng)頁內(nèi)容,然后加載js文件。如果放在前面,比如head標(biāo)簽里,則網(wǎng)速不好的時候,會一直卡在加載js文件那里,無法很快的顯示出網(wǎng)頁內(nèi)容,影響用戶體驗。
原文來自:博客園/青山牧云人