資源描述：
《bootstrap自動適應(yīng)pc、平板、手機的bootstrap柵格系統(tǒng)_javascript技巧》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、Bootstrap自動適應(yīng)PC、平板、手機的Bootstrap柵格系統(tǒng)柵格系統(tǒng)英文為“gridsystems”,也有人翻譯為“網(wǎng)格系統(tǒng)”,運用固定的格子設(shè)計版而布局，其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今H出版物設(shè)計的主流風(fēng)格之一。1692年，新登基的法國國王路易十四感到法國的卬刷水平差強人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的,重視功能性的新字體。委員會曲數(shù)學(xué)家尼古拉斯加宗(NicolasJaugeon)扌口任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本
2、方格單位，每個方格單位再分成36個小格，這樣，一個印刷版而就有2304個小格組成，在這個嚴(yán)謹(jǐn)?shù)膬汉尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀，版面的編排，試驗傳達(dá)功能的效能，這是世界上最早對字體和版面進(jìn)行科學(xué)實驗的活動，也是柵格系統(tǒng)最早的雛形。我給網(wǎng)頁柵格系統(tǒng)卜?的定義為：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。網(wǎng)頁柵格系統(tǒng)是從平而柵格系統(tǒng)中發(fā)展而來。對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的
3、流式柵格系統(tǒng)，隨著屏幕或視口(viewport)尺寸的增加，系統(tǒng)會自動分為最多12列。它包含了易于使用的預(yù)定義類，還有強大的mixin用于生成更具語義的布局。也就是說Bootstrap把一個元素的寬度劃分成12份。我們則在這個被劃分成12份的行安排元素。一、基本目標(biāo)制作如下的兩行，這兩行因為設(shè)備的不同里面各個單元格的寬度會改變：AAAA在手機小屏幕上，上行A占2份B占10份，AB分享了這12份，下行A占1份B占1份C占10份，ABC分享了這12份。在平板的中等屏幕上，上行A占8份B占4份，AB分享了這12份，下行A占10份B占1份
4、C占1份，ABC分享了這12份。在PC的大屏幕上，上行A占4份B占8份，AB分享了這12份，下行A占1份B占10份C占1份，ABC分享了這12份。二、制作過程先在網(wǎng)頁文件夾中配置好Bootstrap,在官網(wǎng)（點擊打開鏈接）下載組件即可，用于生產(chǎn)環(huán)境的Bootstrap版本（點擊打開鏈接）,Bootstrap3對2并不兼容,建議直接根據(jù)其開發(fā)文檔使用Bootstrap3o將Bootstrap解壓之后把得到的3個文件夾css,fonts,js拷貝到站點目錄下面。如果是Eclipse的JSPWebProject的話就把它們放到WebRo
5、ot文件夾下面。之后代碼如下，詳情請看注釋：網(wǎng)頁編碼，要使用的外部文件，自動適應(yīng)屏幕一>6、f-8〃/>〈linkhrcf=z，css/bootstrap.css"rcl二〃stylesheet"mcdia=/zscrccn">柵格系統(tǒng)〈!一使用Bootstrap如果不使用而板的話，要把元素放進(jìn)一個占滿100%屏幕的容器里-->7、ss二〃container-fluid〃>〈!一同一對的元素之和必須等于12,否則出現(xiàn)錯誤，如A的col-xs-2+B的col-xsTO是等于12的-->A
