bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧

bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧

ID:31191767

大小:68.50 KB

頁(yè)數(shù):3頁(yè)

時(shí)間:2019-01-07

bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧_第1頁(yè)
bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧_第2頁(yè)
bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧_第3頁(yè)
資源描述:

《bootstrap自動(dòng)適應(yīng)pc、平板、手機(jī)的bootstrap柵格系統(tǒng)_javascript技巧》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)

1、Bootstrap自動(dòng)適應(yīng)PC、平板、手機(jī)的Bootstrap柵格系統(tǒng)柵格系統(tǒng)英文為“gridsystems”,也有人翻譯為“網(wǎng)格系統(tǒng)”,運(yùn)用固定的格子設(shè)計(jì)版而布局,其風(fēng)格工整簡(jiǎn)潔,在二戰(zhàn)后大受歡迎,已成為今H出版物設(shè)計(jì)的主流風(fēng)格之一。1692年,新登基的法國(guó)國(guó)王路易十四感到法國(guó)的卬刷水平差強(qiáng)人意,因此命令成立一個(gè)管理印刷的皇家特別委員會(huì)。他們的首要任務(wù)是設(shè)計(jì)出科學(xué)的、合理的,重視功能性的新字體。委員會(huì)曲數(shù)學(xué)家尼古拉斯加宗(NicolasJaugeon)扌口任領(lǐng)導(dǎo),他們以羅馬體為基礎(chǔ),采用方格為設(shè)計(jì)依據(jù),每個(gè)字體方格分為64個(gè)基本

2、方格單位,每個(gè)方格單位再分成36個(gè)小格,這樣,一個(gè)印刷版而就有2304個(gè)小格組成,在這個(gè)嚴(yán)謹(jǐn)?shù)膬汉尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀,版面的編排,試驗(yàn)傳達(dá)功能的效能,這是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng),也是柵格系統(tǒng)最早的雛形。我給網(wǎng)頁(yè)柵格系統(tǒng)卜?的定義為:以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。網(wǎng)頁(yè)柵格系統(tǒng)是從平而柵格系統(tǒng)中發(fā)展而來(lái)。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō),柵格系統(tǒng)的使用,不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀,更具可用性。而且,對(duì)于前端開(kāi)發(fā)來(lái)說(shuō),網(wǎng)頁(yè)將更加的靈活與規(guī)范。Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的

3、流式柵格系統(tǒng),隨著屏幕或視口(viewport)尺寸的增加,系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類(lèi),還有強(qiáng)大的mixin用于生成更具語(yǔ)義的布局。也就是說(shuō)Bootstrap把一個(gè)元素的寬度劃分成12份。我們則在這個(gè)被劃分成12份的行安排元素。一、基本目標(biāo)制作如下的兩行,這兩行因?yàn)樵O(shè)備的不同里面各個(gè)單元格的寬度會(huì)改變:AAAA在手機(jī)小屏幕上,上行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份。二、制作過(guò)程先在網(wǎng)頁(yè)文件夾中配置好Bootstrap,在官網(wǎng)(點(diǎn)擊打開(kāi)鏈接)下載組件即可,用于生產(chǎn)環(huán)境的Bootstrap版本(點(diǎn)擊打開(kāi)鏈接),Bootstrap3對(duì)2并不兼容,建議直接根據(jù)其開(kāi)發(fā)文檔使用Bootstrap3o將Bootstrap解壓之后把得到的3個(gè)文件夾css,fonts,js拷貝到站點(diǎn)目錄下面。如果是Eclipse的JSPWebProject的話就把它們放到WebRo

5、ot文件夾下面。之后代碼如下,詳情請(qǐng)看注釋?zhuān)?!DOCTYPEhtmlPUBLIC〃-//W3C//DTDXHTML1.0Transitional//ENz,〃http://www?w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">網(wǎng)頁(yè)編碼,要使用的外部文件,自動(dòng)適應(yīng)屏幕一>

6、f-8〃/>〈linkhrcf=z,css/bootstrap.css"rcl二〃stylesheet"mcdia=/zscrccn">柵格系統(tǒng)〈!一使用Bootstrap如果不使用而板的話,要把元素放進(jìn)一個(gè)占滿100%屏幕的容器里-->

7、ss二〃container-fluid〃>〈!一同一對(duì)的元素之和必須等于12,否則出現(xiàn)錯(cuò)誤,如A的col-xs-2+B的col-xsTO是等于12的-->A

8、B

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
侵權(quán)申訴

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件,查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常,文件下載后無(wú)此問(wèn)題,請(qǐng)放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤,付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。