Bootstrap的H5響應(yīng)式網(wǎng)站優(yōu)化設(shè)計(jì)淺析
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了Bootstrap的H5響應(yīng)式網(wǎng)站優(yōu)化設(shè)計(jì)淺析范文，希望能給你帶來靈感和參考，敬請(qǐng)閱讀。
摘要：在如今用戶使用移動(dòng)設(shè)備多于PC端的時(shí)代，企業(yè)傾向用響應(yīng)式布局讓官網(wǎng)在不同尺寸的設(shè)備上都有良好展現(xiàn)，使得響應(yīng)式網(wǎng)站廣泛流行。但企業(yè)如果想自己開發(fā)響應(yīng)式網(wǎng)站花費(fèi)技術(shù)成本比較高，網(wǎng)上的響應(yīng)式建模雖然價(jià)格不高但風(fēng)格又千篇一律沒有特色，這種情況下用bootstrap框架來做成了一個(gè)好的選擇。筆者在分析Bootstrap及響應(yīng)式核心技術(shù)的基礎(chǔ)上，根據(jù)實(shí)踐工作經(jīng)驗(yàn)探討了響應(yīng)式布局的優(yōu)化措施和和常見問題的解決，并提出了基于Bootstrap響應(yīng)式網(wǎng)站的展望。
關(guān)鍵詞：BootstrapHTML5響應(yīng)式Sass優(yōu)化
引言
據(jù)數(shù)據(jù)統(tǒng)計(jì)近些年使用移動(dòng)互聯(lián)網(wǎng)的用戶數(shù)量一直在增長(zhǎng)，使用智能手機(jī)、平板電腦的用戶已經(jīng)大大超過PC用戶，響應(yīng)式布局從而走進(jìn)人們視野。但在國內(nèi)，企業(yè)如果去做上檔次點(diǎn)的響應(yīng)式網(wǎng)站，往往花費(fèi)技術(shù)成本會(huì)比較高，而如果企業(yè)使用響應(yīng)式網(wǎng)站建模，雖然這種方法費(fèi)用不高，但這種建模做的響應(yīng)式網(wǎng)站往往“撞衫率”很高，在這種情況下用Bootstrap框架去開發(fā)響應(yīng)式網(wǎng)站就成了性價(jià)比很高的選擇。因?yàn)槠胀ňW(wǎng)頁開發(fā)者只要具備基本的前端技術(shù)能力，就可以通過短時(shí)間的學(xué)習(xí)后上手使用Bootstrap進(jìn)行快速地開發(fā)，而且Bootstrap不僅兼容大部分JQuery插件，還在JQuery的基礎(chǔ)上進(jìn)行了交互體驗(yàn)和網(wǎng)站風(fēng)格個(gè)性化的改善。
1關(guān)于Bootstrap及響應(yīng)式核心技術(shù)
1.1Bootstrap
Bootstrap是Twitter公司開發(fā)的一個(gè)基于HTML、CSS和JavaScript的技術(shù)框架，此框架融合了最新的前端技術(shù)，它簡(jiǎn)單靈活使開發(fā)便捷，有樣式化的參考文檔，而且開放式的代碼庫讓開發(fā)者可以按自己的想法進(jìn)行發(fā)揮，這也使得其代碼庫更加豐富。Bootstrap提供的響應(yīng)式開發(fā)功能在國內(nèi)很受到歡迎，并且擁有龐大的用戶基礎(chǔ)和實(shí)踐基地。相比其它框架，Bootstrap在開發(fā)響應(yīng)式方面有很多的優(yōu)勢(shì)，如：Bootstrap框架被大多數(shù)瀏覽器和設(shè)備支持，不僅為PC端網(wǎng)頁提供了導(dǎo)航、模態(tài)框、圖片輪播等豐富的Web組件，還為移動(dòng)開發(fā)提供了平穩(wěn)的開發(fā)平臺(tái)。
1.2響應(yīng)式的核心技術(shù)
首先，彈性布局。根據(jù)不同尺寸屏幕動(dòng)態(tài)地對(duì)布局做出調(diào)整，如果用Bootstrap做響應(yīng)式就是用網(wǎng)格系統(tǒng)進(jìn)行柵格布局，網(wǎng)格系統(tǒng)的原理是用百分比劃分區(qū)域，Bootstrap為超小設(shè)備（<768）、小型設(shè)備（>768）、中型設(shè)備（>992）、大型設(shè)備（>1200）提供了不同的引用前綴，使網(wǎng)頁可以根據(jù)屏幕的寬度去調(diào)整頁面的寬度以及各模塊的百分比占比，以此來適應(yīng)不同尺寸屏幕。其次，媒體查詢。根據(jù)不同分辨率尺寸改變相應(yīng)樣式或已添加的前綴，從而實(shí)現(xiàn)在不同尺寸屏幕下改變網(wǎng)頁的視口大小，顯示、隱藏或移動(dòng)內(nèi)容，媒體查詢也是網(wǎng)格系統(tǒng)得以實(shí)現(xiàn)的關(guān)鍵。媒體查詢可以在HTML或CSS中進(jìn)行，主要用到@mediascreenand(•••){}語句。最后，彈性圖片。如果同一張圖片在不同尺寸的屏幕下引用不同尺寸的圖片，用戶在使用手機(jī)端時(shí)就不會(huì)浪費(fèi)其數(shù)據(jù)流量而且防止加載速度過慢，從而讓用戶在不同端都有好的體驗(yàn)。方法主要有使用picture標(biāo)簽、srcset搭配sizes、SVG圖片運(yùn)用和使用JQuery判斷。
2響應(yīng)式布局的優(yōu)化和和常見問題的解決
筆者在實(shí)際工作實(shí)踐中，總結(jié)出在響應(yīng)式開發(fā)中能夠優(yōu)化的部分和一些問題的解決方法，下面將羅列出典型的幾個(gè)，處理好這些問題只為讓網(wǎng)站性能和用戶的體驗(yàn)更好。
2.1響應(yīng)式布局的優(yōu)化
2.1.1部分樣式運(yùn)用CSS預(yù)處理技術(shù)Sass來編寫。CSS的傳統(tǒng)語法是各個(gè)元素都有獨(dú)立變化的樣式，Sass出現(xiàn)讓CSS能使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等一些編程特性，方便代碼的維護(hù)。開發(fā)者可以通過Sass嵌套地將元素的樣式組合在一起，這種嵌套的寫法讓“凌亂”的CSS傳統(tǒng)樣式變的有層次和條理，并且減少重復(fù)的樣式代碼。Sass可以為網(wǎng)站整體的主題色、字體大小、相同尺寸的模塊來定義一個(gè)變量，在后期想改的時(shí)候只需要改變變量的值而不用去一一做修改，比如在不同的節(jié)日企業(yè)想換官網(wǎng)的主題色，只需要改一處主題色的變量值就可以實(shí)現(xiàn)。2.1.2對(duì)CSS、JavaScript、在線Bootstrap的處理。內(nèi)嵌或引入的JavaScript應(yīng)盡量放在頁面的底部，這是由于瀏覽器是從上往下對(duì)HTML文件進(jìn)行渲染的，頁面加載到JavaScript代碼或JavaScript文件引入時(shí)就會(huì)暫停并等待JavaScript執(zhí)行完畢才會(huì)繼續(xù)往后執(zhí)行，如果放在前面，用戶就需要在頁面加載上等待更多的時(shí)間，所以將JavaScript文件放在底部能對(duì)網(wǎng)站性能有一些優(yōu)化?，F(xiàn)在網(wǎng)上有很多代碼的壓縮和解壓工具，如果對(duì)CSS和JavaScript進(jìn)行代碼壓縮，可以減少頁面的大小從而優(yōu)化加載時(shí)間，在需要調(diào)試代碼時(shí)再用解壓工具進(jìn)行解壓即可。如果打開用Bootstrap做的頁面都需要加載半天的情況時(shí)，可能是因?yàn)锽ootstrap在線調(diào)用谷歌網(wǎng)站上的資源造成的，這種情況下只需要把所有在線調(diào)用的代碼置空就可以了。2.1.3運(yùn)用瀏覽器緩存來減少HTTP請(qǐng)求次數(shù)。首先是在圖片的引用上，可以用<imgsrc="data:img/banner.png">來引用圖片，普通的引用方式<imgsrc="img/banner.png">由于src后面是一個(gè)網(wǎng)頁地址所以會(huì)觸發(fā)一次http請(qǐng)求，而加“data:”后就成為了網(wǎng)頁的內(nèi)容，用戶在下一次打開后就不用加載，這樣做雖然增加了一些網(wǎng)頁大小，但會(huì)減少http請(qǐng)求次數(shù)提升網(wǎng)站性能，還可以通過ajax異步請(qǐng)求來使前端去緩存一些不經(jīng)常變化的數(shù)據(jù)，來減少http請(qǐng)求次數(shù)。因?yàn)橛脩粼谑謾C(jī)端相比PC端有一個(gè)流量的問題，所以減少http請(qǐng)求次數(shù)也可以為用戶節(jié)約流量。2.1.4頁面實(shí)現(xiàn)逐次加載。移動(dòng)端畢竟在屏幕大小、信息量展示以及流量方面有限，所以在設(shè)計(jì)移動(dòng)端時(shí)可以用比如瀑布流的方式進(jìn)行逐次加載，這樣用戶所等待的加載時(shí)間少，而且在用戶不需看未加載的部分時(shí)此部分也沒有加載，減少了用戶的流量消耗，而在想看時(shí)做出相應(yīng)的滑動(dòng)手勢(shì)即可加載出相應(yīng)的內(nèi)容，用這種加載方式代替?zhèn)鹘y(tǒng)的一次性把內(nèi)容加載完畢的方式也是一種在用戶體驗(yàn)和網(wǎng)站性能上的優(yōu)化。
2.2響應(yīng)式布局常見問題的解決
2.2.1關(guān)于Bootstrap的banner輪播問題。問題一：Bootstrap自帶的圖片輪播如果需要自動(dòng)輪播，需要在<divid="carousel-ad"class="carouselslide">標(biāo)簽里加上輪播的初始化data-ride="carousel"和設(shè)置輪播的間隔時(shí)間data-interval="3000"，這樣再打開頁面后雖然會(huì)自動(dòng)輪播，但如果用戶點(diǎn)擊了banner圖或者鼠標(biāo)在banner圖上滑動(dòng)幾下，自動(dòng)輪播就會(huì)停止，這個(gè)框架上的問題會(huì)影響用戶的體驗(yàn)。問題二：Bootstrap的banner圖高度，是根據(jù)屏幕的寬度變小而等比例變小，在這種情況下，banner圖等比例縮小至移動(dòng)端設(shè)備的寬度時(shí)，文字鏈接模塊的高度可能會(huì)超出banner的高度而展示不正常。上面兩點(diǎn)問題，可通過找一個(gè)能正常輪播的JQuery插件代替Bootstrap自帶的圖片輪播，然后基于這個(gè)插件用@media進(jìn)行媒體查詢，在不同設(shè)備的尺寸范圍內(nèi)，給banner圖定不同的并且合適的高度。2.1.2PC端的hover在移動(dòng)端的處理。在PC端有hover但在移動(dòng)端就沒有了，有時(shí)候在PC端做的鏈接如果加了hover會(huì)發(fā)現(xiàn)切換到移動(dòng)端后，點(diǎn)第一次變成hover的樣式，點(diǎn)第二次才會(huì)跳轉(zhuǎn)到對(duì)應(yīng)鏈接。這時(shí)可通過給body上綁定一個(gè)touchstart事件，便能解決。2.1.3彈出的模態(tài)框被遮罩遮住。出現(xiàn)這個(gè)情況最可能是因?yàn)槟B(tài)框代碼的位置不合適造成的，正確的位置是放在HTML文件的跟元素內(nèi)，也就是緊跟著body元素，這樣就可以減少其它部分的代碼或模塊對(duì)模態(tài)框造成影響。
3展望
除了本文總結(jié)的基于Bootstrap的響應(yīng)式網(wǎng)站所存在的一部分問題外，還有種種其它或大或小的問題，但基于此框架做的響應(yīng)式網(wǎng)站仍然是瑕不掩瑜，這種開發(fā)方式還是會(huì)被越來越多的企業(yè)青睞。在用Bootstrap框架做響應(yīng)式設(shè)計(jì)時(shí)，也應(yīng)該多考慮和設(shè)計(jì)好一些交互上的東西，畢竟這是用戶體驗(yàn)上最直接的部分，設(shè)計(jì)者在設(shè)計(jì)時(shí)應(yīng)該更多得考慮響應(yīng)式網(wǎng)頁在不同端模塊的分布以及適合所在端的頁面交互，響應(yīng)是本，交互是質(zhì)，設(shè)計(jì)是根，把用戶所可能接觸到的方方面面都設(shè)計(jì)好，才會(huì)讓自己所做的響應(yīng)式網(wǎng)站有更好的用戶體驗(yàn)和得到更多的關(guān)注度。
參考文獻(xiàn)
[1]Bootstrap官方網(wǎng)站.
[2]BenFrain.響應(yīng)式Web設(shè)計(jì)[M].中國工信出版集團(tuán),2017(1).
[3]車云月.Bootstrap響應(yīng)式網(wǎng)站開發(fā)實(shí)戰(zhàn)[M].清華大學(xué)出版社,2018(1).
[4]楊旺功.BootstrapWeb設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)[J].清華大學(xué)出版社,2017(1).
[5]李金亮，李春青.基于Bootstrap的WEB開發(fā)設(shè)計(jì)研究[J].信息技術(shù)，2016(2).
作者:原方亮 劉占方 單位:鄭州大學(xué)