互聯(lián)網(wǎng)時(shí)代的到來(lái)，網(wǎng)絡(luò)界面不斷地優(yōu)化，不斷地追求美感。包括各種各樣的網(wǎng)頁(yè)設(shè)計(jì)***，包括幽靈按鈕、更強(qiáng)調(diào)字體、視頻背景、卡片式設(shè)計(jì)、扁平化以及響應(yīng)式設(shè)計(jì)，為了更加便于開(kāi)發(fā)前端頁(yè)面，前端框架應(yīng)運(yùn)而生，其中Bootstrap是最有名的一個(gè)。
一開(kāi)始學(xué)習(xí)這個(gè)框架的時(shí)候，說(shuō)實(shí)話（誰(shuí)還不是一個(gè)菜鳥(niǎo)）。開(kāi)始接觸這個(gè)布局框架的時(shí)候就是感覺(jué)到無(wú)力。學(xué)過(guò)框架的人都說(shuō)簡(jiǎn)單，覺(jué)得肯定是騙人的。你看首先要用這個(gè)框架必須搭建環(huán)境，這就難倒很多人。比如說(shuō)HTML用搭建環(huán)境嗎?顯而易見(jiàn)，肯定不用搭配環(huán)境。當(dāng)我們知道真相的時(shí)候我們的悲傷肯定小于喜悅的，因?yàn)樗协h(huán)境搭配的方式，只不過(guò)比HTML要麻煩一點(diǎn)。想學(xué)會(huì)框架必須了解它的工作原理。雖然說(shuō)這個(gè)框架和之前接觸到的HTML、CSS有所不同，但是原理都是一樣的。理解這個(gè)框架我們可以從不同角度來(lái)理解，比如說(shuō)一個(gè)容器，你可以理解成一個(gè)房子，一棟樓，一個(gè)空間等，比如說(shuō)網(wǎng)格可以理解成組成部分。其實(shí)不管我們用什么方式理解，都要選擇適合自己記憶的理解方式。不知道大家在學(xué)習(xí)這個(gè)框架之前，有沒(méi)有和我一樣的困惑？
首先它簡(jiǎn)潔，方便，兼容性強(qiáng)。大家使用這個(gè)框架不用在學(xué)別的前端知識(shí)，因?yàn)樗依薍TML、CSS、JavaScript這幾種前端知識(shí)方便大家快速上手。曾經(jīng)由于屏幕大小的問(wèn)題需要我們一遍又一遍的更改網(wǎng)頁(yè)樣式，但是由于Bootstrap的出現(xiàn)不再擔(dān)心這個(gè)問(wèn)題了。原因是什么：它是響應(yīng)式框架適用于各種屏幕大小。除了這些它最讓我欣賞的就是它的網(wǎng)頁(yè)布局：它給人們帶來(lái)一種簡(jiǎn)約的美，更能體現(xiàn)出化繁為簡(jiǎn)這個(gè)道理。不管是京東還是蘇寧，進(jìn)網(wǎng)頁(yè)一看不會(huì)讓你感覺(jué)視覺(jué)疲勞，把物品表達(dá)的清清楚楚。
下面是一些個(gè)人對(duì)Bootstrap的理解請(qǐng)大家糾錯(cuò)一起共勉。首先我們學(xué)習(xí)Bootstrap我們明確以幾點(diǎn)：
什么是Bootstrap?怎么搭配環(huán)境呢？它是怎組成一個(gè)布局的？它是用來(lái)干什么的？它的弊端在那里的？1.什么是Bootstrap?
首先我們來(lái)普及一下概念：
Bootstrap是一個(gè)前端框架、是目前最受歡迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起開(kāi)發(fā)的，Bootstrap框架是基于HTML、CSS、JavaScript開(kāi)發(fā)的，它因簡(jiǎn)潔、直觀、功能強(qiáng)大被開(kāi)發(fā)者廣發(fā)使用。Bootstrap前端框架使得Web開(kāi)發(fā)更加快捷，提供了優(yōu)雅的HTML、CSS和JavaScript規(guī)范，它是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成。Bootstrap前端框架剛推出就頗受歡迎，一直是GitHub上的熱門(mén)開(kāi)源項(xiàng)目，是一些前端開(kāi)發(fā)者較為熟悉的框架。
其實(shí)就是對(duì)HTML、CSS和JS的一種包裝！
只要我們掌握了HTML和CSS基礎(chǔ)的知識(shí)我們就可以一起學(xué)習(xí)Bootstrap了。
2.怎么搭配Bootstrap的環(huán)境呢？
首先我們?cè)诰W(wǎng)站下載一個(gè)Bootstrap壓縮包，之后解壓（除了系統(tǒng)盤(pán)別的盤(pán)都可以）
Bootstrap提供了三種不同的方式幫助你快速開(kāi)發(fā)，每種方式可根據(jù)開(kāi)發(fā)者的能力和使用場(chǎng)景而定，具體如下。
用戶生產(chǎn)環(huán)境的Bootstrap：下載包為編譯并且壓縮后的CSS、JavaScript和字體文件，不包含文檔和源碼文件。
Bootstrap源碼：包含Less、JavaScript和字體文件的源碼等。
Sass：這是Bootstrap從Less到Sass的源碼移植項(xiàng)目，用于快速地在Rails、Compass或只針對(duì)Sass的項(xiàng)目中引入。
參考地址如下。
Bootstrap官網(wǎng)：http://www.bootstrap.com/。
Boostrap中文網(wǎng)：http://www.bootcss.com/
簡(jiǎn)單模板
<!DOCTYPEhtml>
<htmllang=”zh-CN”>
<head>
<metacharset=”utf-8″/>
<metahttp-equiv=”X-UA-Compatible”content=”IE=edge”/>
<metaname=”viewport”content=”width=device-width,initial-scale=1″/>
<title>Bootstrap基本模板</title>
<linkhref=”../bootstrap-3.3.4/css/bootstrap.min.css”rel=”stylesheet”/>
<linkhref=”../bootstrap-3.3.4/css/bootstrap-theme.min.css”rel=”stylesheet”/>
<!–[ifltIE9]>
<scriptsrc=”../bootstrap-3.3.4/js/html5shiv.min.js”></script>
<scriptsrc=”../bootstrap-3.3.4/js/respond.min.js”></script>
<![endif]–>
</head>
<body>
<h1>您好,Bootstrap從此刻開(kāi)始</h1>
<scriptsrc=”../bootstrap-3.3.4/js/jquery.min.js”type=”text/javascript”></script>
<scriptsrc=”../bootstrap-3.3.4/js/bootstrap.min.js”type=”text/javascript”></script>
</body>
</html>
3.它是怎么組成一個(gè)布局？
首先Bootstrap是一個(gè)響應(yīng)式布局框架，我們都知道一個(gè)框架里面必有一個(gè)容納其他內(nèi)容的東西，這個(gè)東西叫容器。在Bootstrap中我們用的是containerclass（在Bootstrap中我們通常在class這個(gè)類中寫(xiě)樣式），在這個(gè)容器中,它是有固定寬度（但是所謂固定寬度并不允許我們?cè)O(shè)置容器的寬度，而是bootstrap內(nèi)部通過(guò)bootstrap.css根據(jù)屏幕寬度利用媒體查詢，幫我們?cè)O(shè)置了固定寬度，為什么設(shè)置寬度的時(shí)候都要以百分比來(lái)設(shè)置因?yàn)槟艹浞值哪軌蝮w現(xiàn)自適應(yīng)的。這是容器的使用圖片我們看一下：
我們知道一個(gè)完美布局不單單是主要有一個(gè)簡(jiǎn)單的容器，如果我們這樣想純屬于貶低它。在此不得不提到一個(gè)名字：柵格系統(tǒng)也可以叫做網(wǎng)格系統(tǒng)，我們可以看看網(wǎng)格系統(tǒng)整個(gè)布局圖片：
我們可以根據(jù)這張布局圖片這屬于container的內(nèi)部布局，網(wǎng)格系統(tǒng)包括row(行)，column（列），在圖片1中我們可以看到行和列。
首先row行我們包括十二個(gè)column列相當(dāng)于十二個(gè)網(wǎng)格（每個(gè)網(wǎng)格對(duì)應(yīng)一個(gè)列）,如圖二所示每個(gè)column列也有十二個(gè)網(wǎng)格，每個(gè)網(wǎng)格能放十二個(gè)column列。一般的網(wǎng)頁(yè)布局都是按著2-8-2（column列）來(lái)給網(wǎng)頁(yè)布局的！我們也可以用不同的布局來(lái)表達(dá)自己的邏輯！
下面這張圖是在768像素到992像素之間的通用的布局***col-md-1，這個(gè)（1）代表的是一個(gè)網(wǎng)格相當(dāng)一個(gè)列（column）。
以下就是Bootstrap的幾點(diǎn)各種屏幕自適應(yīng)響應(yīng)式的樣式大家了解一下對(duì)今后的網(wǎng)頁(yè)布局很有幫助！
4.它是用來(lái)干什么的？
隨著各種計(jì)算機(jī)的問(wèn)世，屏幕大小，網(wǎng)頁(yè)界面不適合屏幕的，這讓我們這些前端工程師很是頭痛。
Bootstrap的問(wèn)世解決了很多的問(wèn)題，首先我們的頁(yè)面不用更換，它可以適用各種屏幕的大小（我們可以不用擔(dān)心不同的屏幕換不同的網(wǎng)頁(yè)的問(wèn)題）。通過(guò)框架布局我們可以迅速的做出一個(gè)既美觀邏輯又清晰的網(wǎng)頁(yè)來(lái)。我們來(lái)看一下完整的Bootstrap頁(yè)面！
下面的網(wǎng)頁(yè)是正常大小。
下面的網(wǎng)頁(yè)是屏幕縮小的大小
Bootstrap能調(diào)用CSS、JavaScript對(duì)沒(méi)有美工處理的網(wǎng)站修飾充分的展現(xiàn)出他們的美感與簡(jiǎn)約的動(dòng)感。
Bootstrap大多數(shù)被用來(lái)做一些內(nèi)容不是太復(fù)雜的門(mén)戶網(wǎng)站，比如淘寶、京東、管理系統(tǒng)等頁(yè)面在PC端和移動(dòng)端根據(jù)屏幕的大小，來(lái)自適應(yīng)的網(wǎng)頁(yè)布局（一般來(lái)說(shuō)PC端的網(wǎng)站比移動(dòng)端的網(wǎng)站內(nèi)容比較多，這跟屏幕大小的自適應(yīng)有關(guān)）。使網(wǎng)民更加的對(duì)網(wǎng)站有印象，讓網(wǎng)民對(duì)網(wǎng)頁(yè)一目了然，就知道這個(gè)網(wǎng)頁(yè)具體想表達(dá)哪些內(nèi)容。這樣的網(wǎng)頁(yè)一般應(yīng)用于簡(jiǎn)約的門(mén)戶網(wǎng)站。
5.Bootstrap的局限性
總體來(lái)說(shuō)bootstrap不太適合做那些頁(yè)面布局很復(fù)雜，內(nèi)容較多，特別炫酷的網(wǎng)站，因?yàn)閎ootstrap已經(jīng)寫(xiě)好CSS的樣式了所以引用bootstrap要改css樣式，組件，插件太多了，還容易造成代碼混亂，還不如直接不用更快，特別是對(duì)于新手前端工程師是來(lái)說(shuō)更不推薦使用，但是它很適合做那些企業(yè)內(nèi)部的網(wǎng)站，一般此類網(wǎng)站不會(huì)對(duì)頁(yè)面的布局沒(méi)有過(guò)多的要求，只要體現(xiàn)主要功能即可，bootstrap就完全是切合此類網(wǎng)站的特性。
作者贈(zèng)言：
想要學(xué)習(xí)Bootstrap的機(jī)靈鬼們，還在猶豫什么？如此實(shí)用簡(jiǎn)單的框架難道還不值得我們青睞嗎？
如果有什么不對(duì)的地方歡迎大家指出，畢竟本人才疏學(xué)淺，歡迎大家指出問(wèn)題所在，相互學(xué)習(xí)共贏互利！
世上無(wú)難事只怕有心人，世上本沒(méi)路人走的多了就有了，期待我們更上一層樓！
