Bootstrap零基礎(chǔ)學(xué)習(xí)第一課之模板
最近需要做一個(gè)簡(jiǎn)單的Web頁(yè)面。
考慮到前端經(jīng)驗(yàn)不足，為了快速產(chǎn)出，同時(shí)項(xiàng)目只是一個(gè)工具，對(duì)項(xiàng)目沒有什么要求，所以我選擇了Bootstrap這個(gè)框架作為Web框架。
寫從零開始學(xué)Bootstrap的初衷：
看了半天的Bootstrap的文檔，包括官方的（http://v3.bootcss.com/getting-started/）和非官方的（http://www.runoob.com/bootstrap/bootstrap-tutorial.html），以及他人寫的簡(jiǎn)單入門博客（http://www.cnblogs.com/fnng/p/4446047.html），和知乎上關(guān)于BootStrap上的評(píng)論（https://www.zhihu.com/question/35237472，https://www.zhihu.com/question/31409502）深深的感覺到，Bootstrap應(yīng)該是一個(gè)很好用的框架，學(xué)習(xí)起來也不難，是個(gè)高速產(chǎn)出的工具，但是靈活性不足以讓開發(fā)者隨心所欲的把玩。而且前端的東西太多太雜，如果沒有一個(gè)清晰的學(xué)習(xí)目標(biāo)和路線，很容易陷入無盡的細(xì)節(jié)中，沒有相應(yīng)的產(chǎn)出，會(huì)有挫敗感。因此我決定記錄下自己的學(xué)習(xí)路徑，方便自己復(fù)習(xí)，以及廣大的初學(xué)者入門。
讓我們先從BootStrap的最簡(jiǎn)單的模板開始：
<!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個(gè)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="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頁(yè)面
<html lang="zh-CN"> #lang是“l(fā)anguage”的意思，是html標(biāo)簽的一個(gè)屬性，這個(gè)屬性是告訴搜索引擎，我這個(gè)頁(yè)面是中文頁(yè)面,是方便搜索引擎收錄的，對(duì)頁(yè)面顯示并沒有影響。"zh—CN"是ISO標(biāo)準(zhǔn)的一種寫法，表示中文。"zh"是"zhongwen"的前兩個(gè)字母（如果要告訴瀏覽器是英文界面，則lang="en"，"en"就對(duì)應(yīng)了“english”的前兩個(gè)字母），"CN"是國(guó)家代碼。（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://chabaoo.cn/web/70787.html）#X-UA-Compatible值是IE8及以后版本的IE（IE9，IE10，11,...）中才生效的標(biāo)記，用來指定瀏覽器去模擬某個(gè)特定版本的IE瀏覽器的渲染方式。（網(wǎng)上有的文章居然說 X-UA-Compatible是IE8的專用標(biāo)記，簡(jiǎn)直太誤導(dǎo)人了！）
#為什么要這么做？因?yàn)槲④浿暗腎E（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)。
#所以可以通過這個(gè)屬性值，來強(qiáng)制規(guī)定瀏覽器的渲染方式，當(dāng)設(shè)置content="IE6"的時(shí)候，這樣用戶以IE8及以上的瀏覽器也能正常顯示IE6標(biāo)準(zhǔn)下的HTML網(wǎng)頁(yè)。
#content="IE=edge"則是強(qiáng)制規(guī)定了瀏覽器以當(dāng)前所能支持的最新版本的IE標(biāo)準(zhǔn)進(jìn)行渲染。為什么要這樣做？因?yàn)橛行┯脩舻臑g覽器可能設(shè)成了“兼容模式”，是以老IE標(biāo)準(zhǔn)去渲染HTML文件，當(dāng)遇到W3C標(biāo)準(zhǔn)的HTML代碼的時(shí)候會(huì)相出現(xiàn)錯(cuò)誤。所以，當(dāng)我的代碼是W3C標(biāo)準(zhǔn)的，又不考慮老IE標(biāo)準(zhǔn)的支持時(shí)，強(qiáng)制使用瀏覽器中所能支持的最新版本IE渲染，能夠避免“兼容模式”帶來的顯示錯(cuò)誤。（即不需要用戶手動(dòng)更改瀏覽器的渲染模式） <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="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]-->
#這里是條件注釋判斷，當(dāng)IE版本小于IE9的時(shí)候，scrpit src采取上述cdn的資源。
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
#這里是鏈接了jquery和bootstrap的js文件，放在最后是為了加快網(wǎng)頁(yè)加載速度，即首先顯示出網(wǎng)頁(yè)內(nèi)容，然后加載js文件。如果放在前面，比如head標(biāo)簽里，則網(wǎng)速不好的時(shí)候，會(huì)一直卡在加載js文件那里，無法很快的顯示出網(wǎng)頁(yè)內(nèi)容，影響用戶體驗(yàn)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
- bootstrap table 服務(wù)器端分頁(yè)例子分享
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- 頁(yè)面遮罩層，并且阻止頁(yè)面body滾動(dòng)。bootstrap模態(tài)框原理
- 使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
- JS組件Bootstrap實(shí)現(xiàn)彈出框和提示框效果代碼
- Bootstrap樹形控件使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- JS組件Bootstrap Select2使用方法詳解
- 值得分享的Bootstrap Ace模板實(shí)現(xiàn)菜單和Tab頁(yè)效果
- Bootstrap Table使用方法詳解
相關(guān)文章
JS函數(shù)節(jié)流和函數(shù)防抖問題分析
這篇文章主要介紹了JS函數(shù)節(jié)流和函數(shù)防抖問題分析，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
javascript實(shí)現(xiàn)倒計(jì)時(shí)（精確到秒）
本文給大家分享的是個(gè)人項(xiàng)目中使用的javascript實(shí)現(xiàn)的精確到秒級(jí)的倒計(jì)時(shí)代碼，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
本文給大家匯總介紹了javascript中數(shù)組去重的4種方法,分別是循環(huán)匹配去重,JSON去重/對(duì)象去重/字典去重,隊(duì)列遞歸去重,INDEXOF去重方式，非常的細(xì)致全面，有需要的小伙伴可以參考下。2016-03-03
jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)
JSONP原理就是動(dòng)態(tài)插入帶有跨域url的script標(biāo)簽,然后調(diào)用回調(diào)函數(shù),把我們需要的json數(shù)據(jù)作為參數(shù)傳入,通過一些邏輯把數(shù)據(jù)顯示在頁(yè)面上,這篇文章主要給大家介紹了關(guān)于jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)的相關(guān)資料,需要的朋友可以參考下2022-01-01
js實(shí)現(xiàn)橫向伸展開的二級(jí)導(dǎo)航菜單代碼
這篇文章主要介紹了js實(shí)現(xiàn)橫向伸展開的二級(jí)導(dǎo)航菜單代碼,涉及javascript鼠標(biāo)事件及頁(yè)面元素遍歷的相關(guān)技巧,需要的朋友可以參考下2015-08-08
SVG的全稱是可擴(kuò)展的矢量圖形跟傳統(tǒng)的Raster方式的圖形(JPG, PNG, GIF等)有很大的差別，下面與大家分享下JavaScript中SVG API編程演示，感興趣的朋友可以參考下哈2013-06-06
JavaScript原生開發(fā)視頻播放器的實(shí)現(xiàn)代碼
這篇文章我們將一起探索一份自定義的視頻播放器實(shí)現(xiàn)代碼，甚至還可以實(shí)現(xiàn)有彈幕功能，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-06-06
JavaScript自定義插件實(shí)現(xiàn)tabs切換功能
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義插件實(shí)現(xiàn)tabs切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序可滑動(dòng)周日歷組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了JS如何完整獲取IE瀏覽器信息包括類型、版本、語(yǔ)言等等,需要的朋友可以參考下2014-05-05