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