?????最近在做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 的输拇。
二、Bootstrap 網(wǎng)格系統(tǒng)(Grid System)
????由于Bootstrap中的這一特性廣泛應(yīng)用于手機(jī)和電腦上邊贤斜,它的屏幕適配非常的好用策吠,所以這篇文章主要總結(jié)一下這一塊的知識。
從下方的一個(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ù)膶R(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è)備
四、結(jié)言
???其實(shí)本篇文章總結(jié)的并不是很好刽射,器只要目的是希望喜歡學(xué)習(xí)的同學(xué)們能夠多多去看官方文檔军拟,因?yàn)槲腋烁杏X該框架的官方文檔已經(jīng)說的很好了,例子也有很多大家只要看一看就會(huì)使用了誓禁!