?????最近在做javaWeb項(xiàng)目的時(shí)候接觸到一個(gè)布局框架感覺用處很大，所以在這里總結(jié)一下。

當(dāng)然，每一個(gè)牛B的框架背后肯定都會(huì)有一個(gè)官方文檔的，所以大家也可以去官方文檔去看看它的使用。
Bootstrap中文官方文檔：http://v3.bootcss.com/
Bootstrap英文官方文檔http://getbootstrap.com/2.3.2/

一、簡介

Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

該圖來源于菜鳥教程:http://www.runoob.com/bootstrap/bootstrap-intro.html

二、Bootstrap 網(wǎng)格系統(tǒng)（Grid System）

????由于Bootstrap中的這一特性廣泛應(yīng)用于手機(jī)和電腦上邊，它的屏幕適配非常的好用，所以這篇文章主要總結(jié)一下這一塊的知識(shí)。

該圖來源于菜鳥教程:http://www.runoob.com/bootstrap/bootstrap-intro.html

從下方的一個(gè)基本結(jié)構(gòu)總結(jié)他的特性：

<div class="container">
<div class="row">
<div class="col--"></div>
<div class="col--"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

從上邊可以看出其工作原理為：

1、行必須放置在 .container class 內(nèi)，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）。
使用行來創(chuàng)建列的水平組。
2、內(nèi)容應(yīng)該放置在列內(nèi)，且唯有列可以是行的直接子元素。
3、預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。LESS 混合類可用于更多語義布局。
列通過內(nèi)邊距（padding）來創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過 .rows 上的外邊距（margin）取負(fù)，表示第一列和最后一列的行偏移。
4、網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個(gè)可用的列來創(chuàng)建的。例如，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4。

三、適配的設(shè)備

來自Bootstrap中文網(wǎng)的表格

四、結(jié)言

???其實(shí)本篇文章總結(jié)的并不是很好，器只要目的是希望喜歡學(xué)習(xí)的同學(xué)們能夠多多去看官方文檔，因?yàn)槲腋烁杏X該框架的官方文檔已經(jīng)說的很好了，例子也有很多大家只要看一看就會(huì)使用了！