Bootstrap零基礎學習第一課之模板

更新時間：2016年07月18日 08:42:43 作者：青山牧云人

這篇文章主要為大家詳細介紹了Bootstrap零基礎學習第一課：模板，感興趣的小伙伴們可以參考一下

最近需要做一個簡單的Web頁面。
考慮到前端經(jīng)驗不足，為了快速產(chǎn)出，同時項目只是一個工具，對項目沒有什么要求，所以我選擇了Bootstrap這個框架作為Web框架。
寫從零開始學Bootstrap的初衷：
看了半天的Bootstrap的文檔，包括官方的（http://v3.bootcss.com/getting-started/）和非官方的（http://www.runoob.com/bootstrap/bootstrap-tutorial.html），以及他人寫的簡單入門博客（http://www.cnblogs.com/fnng/p/4446047.html），和知乎上關于BootStrap上的評論（https://www.zhihu.com/question/35237472，https://www.zhihu.com/question/31409502）深深的感覺到，Bootstrap應該是一個很好用的框架，學習起來也不難，是個高速產(chǎn)出的工具，但是靈活性不足以讓開發(fā)者隨心所欲的把玩。而且前端的東西太多太雜，如果沒有一個清晰的學習目標和路線，很容易陷入無盡的細節(jié)中，沒有相應的產(chǎn)出，會有挫敗感。因此我決定記錄下自己的學習路徑，方便自己復習，以及廣大的初學者入門。
讓我們先從BootStrap的最簡單的模板開始：

<!DOCTYPE html>
<html lang="zh-CN">
 <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標簽*必須*放在最前面，任何其他內(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="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="http://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="http://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="zh-CN"> #lang是“l(fā)anguage”的意思，是html標簽的一個屬性，這個屬性是告訴搜索引擎，我這個頁面是中文頁面,是方便搜索引擎收錄的，對頁面顯示并沒有影響。"zh—CN"是ISO標準的一種寫法，表示中文。"zh"是"zhongwen"的前兩個字母（如果要告訴瀏覽器是英文界面，則lang="en"，"en"就對應了“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標簽是方便瀏覽器解析HTML文件的標簽，charset屬性告訴瀏覽器，本HTML文件的編碼方式是utf-8.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> #http-equiv屬性告訴瀏覽器，本HTML規(guī)定的兼容性等細節(jié)是怎樣的。（http://www.dbjr.com.cn/web/70787.html）#X-UA-Compatible值是IE8及以后版本的IE（IE9，IE10，11,...）中才生效的標記，用來指定瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式。（網(wǎng)上有的文章居然說 X-UA-Compatible是IE8的專用標記，簡直太誤導人了?。?/p>

#為什么要這么做？因為微軟之前的IE（IE6，IE7）是不符合W3C標準的，因此有些網(wǎng)站的代碼使用的是老IE的標準，而不是W3C的標準。而從IE8開始，微軟采用了W3C標準。

#所以可以通過這個屬性值，來強制規(guī)定瀏覽器的渲染方式，當設置content="IE6"的時候，這樣用戶以IE8及以上的瀏覽器也能正常顯示IE6標準下的HTML網(wǎng)頁。

#content="IE=edge"則是強制規(guī)定了瀏覽器以當前所能支持的最新版本的IE標準進行渲染。為什么要這樣做？因為有些用戶的瀏覽器可能設成了“兼容模式”，是以老IE標準去渲染HTML文件，當遇到W3C標準的HTML代碼的時候會相出現(xiàn)錯誤。所以，當我的代碼是W3C標準的，又不考慮老IE標準的支持時，強制使用瀏覽器中所能支持的最新版本IE渲染，能夠避免“兼容模式”帶來的顯示錯誤。（即不需要用戶手動更改瀏覽器的渲染模式） <meta name="viewport" content="width=device-width, initial-scale=1"> #viewport規(guī)定了顯示窗口的相關設定，這里content中width規(guī)定了顯示寬度，initial-scale規(guī)定了初始縮放比例。（關于其他的功能：設置用戶能否縮放，最大縮放比例，最小縮放比例等，參考：http://my.oschina.net/liangrockman/blog/380727）

#這里是條件注釋判斷，當IE版本小于IE9的時候，scrpit src采取上述cdn的資源。

#這里是鏈接了jquery和bootstrap的js文件，放在最后是為了加快網(wǎng)頁加載速度，即首先顯示出網(wǎng)頁內(nèi)容，然后加載js文件。如果放在前面，比如head標簽里，則網(wǎng)速不好的時候，會一直卡在加載js文件那里，無法很快的顯示出網(wǎng)頁內(nèi)容，影響用戶體驗。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程

您可能感興趣的文章: