javaWeb項(xiàng)目中的Bootstrap 響應(yīng)式布局(一)

?????最近在做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é)一下這一塊的知識。

該圖來源于菜鳥教程: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ù)膶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è)備

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

四、結(jié)言

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末懈息,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子摹恰,更是在濱河造成了極大的恐慌辫继,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俗慈,死亡現(xiàn)場離奇詭異姑宽,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)闺阱,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進(jìn)店門炮车,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人酣溃,你說我怎么就攤上這事瘦穆。” “怎么了赊豌?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵扛或,是天一觀的道長。 經(jīng)常有香客問我碘饼,道長熙兔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任艾恼,我火速辦了婚禮住涉,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘钠绍。我一直安慰自己秆吵,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布五慈。 她就那樣靜靜地躺著纳寂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泻拦。 梳的紋絲不亂的頭發(fā)上毙芜,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機(jī)與錄音争拐,去河邊找鬼腋粥。 笑死,一個(gè)胖子當(dāng)著我的面吹牛架曹,可吹牛的內(nèi)容都是我干的隘冲。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绑雄,長吁一口氣:“原來是場噩夢啊……” “哼展辞!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起万牺,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤罗珍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后脚粟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體覆旱,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年核无,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扣唱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,015評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡团南,死狀恐怖噪沙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情已慢,我是刑警寧澤曲聂,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站佑惠,受9級特大地震影響朋腋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜膜楷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一旭咽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赌厅,春花似錦穷绵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽勾缭。三九已至,卻和暖如春目养,著一層夾襖步出監(jiān)牢的瞬間俩由,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工癌蚁, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留幻梯,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓努释,卻偏偏與公主長得像碘梢,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子伐蒂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評論 2 355

推薦閱讀更多精彩內(nèi)容