Bootstrap的H5響應式網站優化設計淺析

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了Bootstrap的H5響應式網站優化設計淺析范文，希望能給你帶來靈感和參考，敬請閱讀。

摘要：在如今用戶使用移動設備多于PC端的時代，企業傾向用響應式布局讓官網在不同尺寸的設備上都有良好展現，使得響應式網站廣泛流行。但企業如果想自己開發響應式網站花費技術成本比較高，網上的響應式建模雖然價格不高但風格又千篇一律沒有特色，這種情況下用bootstrap框架來做成了一個好的選擇。筆者在分析Bootstrap及響應式核心技術的基礎上，根據實踐工作經驗探討了響應式布局的優化措施和和常見問題的解決，并提出了基于Bootstrap響應式網站的展望。

關鍵詞：BootstrapHTML5響應式Sass優化

引言

據數據統計近些年使用移動互聯網的用戶數量一直在增長，使用智能手機、平板電腦的用戶已經大大超過PC用戶，響應式布局從而走進人們視野。但在國內，企業如果去做上檔次點的響應式網站，往往花費技術成本會比較高，而如果企業使用響應式網站建模，雖然這種方法費用不高，但這種建模做的響應式網站往往“撞衫率”很高，在這種情況下用Bootstrap框架去開發響應式網站就成了性價比很高的選擇。因為普通網頁開發者只要具備基本的前端技術能力，就可以通過短時間的學習后上手使用Bootstrap進行快速地開發，而且Bootstrap不僅兼容大部分JQuery插件，還在JQuery的基礎上進行了交互體驗和網站風格個性化的改善。

1關于Bootstrap及響應式核心技術

1.1Bootstrap

Bootstrap是Twitter公司開發的一個基于HTML、CSS和JavaScript的技術框架，此框架融合了最新的前端技術，它簡單靈活使開發便捷，有樣式化的參考文檔，而且開放式的代碼庫讓開發者可以按自己的想法進行發揮，這也使得其代碼庫更加豐富。Bootstrap提供的響應式開發功能在國內很受到歡迎，并且擁有龐大的用戶基礎和實踐基地。相比其它框架，Bootstrap在開發響應式方面有很多的優勢，如：Bootstrap框架被大多數瀏覽器和設備支持，不僅為PC端網頁提供了導航、模態框、圖片輪播等豐富的Web組件，還為移動開發提供了平穩的開發平臺。

1.2響應式的核心技術

首先，彈性布局。根據不同尺寸屏幕動態地對布局做出調整，如果用Bootstrap做響應式就是用網格系統進行柵格布局，網格系統的原理是用百分比劃分區域，Bootstrap為超小設備（<768）、小型設備（>768）、中型設備（>992）、大型設備（>1200）提供了不同的引用前綴，使網頁可以根據屏幕的寬度去調整頁面的寬度以及各模塊的百分比占比，以此來適應不同尺寸屏幕。其次，媒體查詢。根據不同分辨率尺寸改變相應樣式或已添加的前綴，從而實現在不同尺寸屏幕下改變網頁的視口大小，顯示、隱藏或移動內容，媒體查詢也是網格系統得以實現的關鍵。媒體查詢可以在HTML或CSS中進行，主要用到@mediascreenand(•••){}語句。最后，彈性圖片。如果同一張圖片在不同尺寸的屏幕下引用不同尺寸的圖片，用戶在使用手機端時就不會浪費其數據流量而且防止加載速度過慢，從而讓用戶在不同端都有好的體驗。方法主要有使用picture標簽、srcset搭配sizes、SVG圖片運用和使用JQuery判斷。

2響應式布局的優化和和常見問題的解決

筆者在實際工作實踐中，總結出在響應式開發中能夠優化的部分和一些問題的解決方法，下面將羅列出典型的幾個，處理好這些問題只為讓網站性能和用戶的體驗更好。

2.1響應式布局的優化

2.1.1部分樣式運用CSS預處理技術Sass來編寫。CSS的傳統語法是各個元素都有獨立變化的樣式，Sass出現讓CSS能使用變量、簡單的邏輯程序、函數等一些編程特性，方便代碼的維護。開發者可以通過Sass嵌套地將元素的樣式組合在一起，這種嵌套的寫法讓“凌亂”的CSS傳統樣式變的有層次和條理，并且減少重復的樣式代碼。Sass可以為網站整體的主題色、字體大小、相同尺寸的模塊來定義一個變量，在后期想改的時候只需要改變變量的值而不用去一一做修改，比如在不同的節日企業想換官網的主題色，只需要改一處主題色的變量值就可以實現。2.1.2對CSS、JavaScript、在線Bootstrap的處理。內嵌或引入的JavaScript應盡量放在頁面的底部，這是由于瀏覽器是從上往下對HTML文件進行渲染的，頁面加載到JavaScript代碼或JavaScript文件引入時就會暫停并等待JavaScript執行完畢才會繼續往后執行，如果放在前面，用戶就需要在頁面加載上等待更多的時間，所以將JavaScript文件放在底部能對網站性能有一些優化。現在網上有很多代碼的壓縮和解壓工具，如果對CSS和JavaScript進行代碼壓縮，可以減少頁面的大小從而優化加載時間，在需要調試代碼時再用解壓工具進行解壓即可。如果打開用Bootstrap做的頁面都需要加載半天的情況時，可能是因為Bootstrap在線調用谷歌網站上的資源造成的，這種情況下只需要把所有在線調用的代碼置空就可以了。2.1.3運用瀏覽器緩存來減少HTTP請求次數。首先是在圖片的引用上，可以用<imgsrc="data:img/banner.png">來引用圖片，普通的引用方式<imgsrc="img/banner.png">由于src后面是一個網頁地址所以會觸發一次http請求，而加“data:”后就成為了網頁的內容，用戶在下一次打開后就不用加載，這樣做雖然增加了一些網頁大小，但會減少http請求次數提升網站性能，還可以通過ajax異步請求來使前端去緩存一些不經常變化的數據，來減少http請求次數。因為用戶在手機端相比PC端有一個流量的問題，所以減少http請求次數也可以為用戶節約流量。2.1.4頁面實現逐次加載。移動端畢竟在屏幕大小、信息量展示以及流量方面有限，所以在設計移動端時可以用比如瀑布流的方式進行逐次加載，這樣用戶所等待的加載時間少，而且在用戶不需看未加載的部分時此部分也沒有加載，減少了用戶的流量消耗，而在想看時做出相應的滑動手勢即可加載出相應的內容，用這種加載方式代替傳統的一次性把內容加載完畢的方式也是一種在用戶體驗和網站性能上的優化。

2.2響應式布局常見問題的解決

2.2.1關于Bootstrap的banner輪播問題。問題一：Bootstrap自帶的圖片輪播如果需要自動輪播，需要在<divid="carousel-ad"class="carouselslide">標簽里加上輪播的初始化data-ride="carousel"和設置輪播的間隔時間data-interval="3000"，這樣再打開頁面后雖然會自動輪播，但如果用戶點擊了banner圖或者鼠標在banner圖上滑動幾下，自動輪播就會停止，這個框架上的問題會影響用戶的體驗。問題二：Bootstrap的banner圖高度，是根據屏幕的寬度變小而等比例變小，在這種情況下，banner圖等比例縮小至移動端設備的寬度時，文字鏈接模塊的高度可能會超出banner的高度而展示不正常。上面兩點問題，可通過找一個能正常輪播的JQuery插件代替Bootstrap自帶的圖片輪播，然后基于這個插件用@media進行媒體查詢，在不同設備的尺寸范圍內，給banner圖定不同的并且合適的高度。2.1.2PC端的hover在移動端的處理。在PC端有hover但在移動端就沒有了，有時候在PC端做的鏈接如果加了hover會發現切換到移動端后，點第一次變成hover的樣式，點第二次才會跳轉到對應鏈接。這時可通過給body上綁定一個touchstart事件，便能解決。2.1.3彈出的模態框被遮罩遮住。出現這個情況最可能是因為模態框代碼的位置不合適造成的，正確的位置是放在HTML文件的跟元素內，也就是緊跟著body元素，這樣就可以減少其它部分的代碼或模塊對模態框造成影響。

3展望

除了本文總結的基于Bootstrap的響應式網站所存在的一部分問題外，還有種種其它或大或小的問題，但基于此框架做的響應式網站仍然是瑕不掩瑜，這種開發方式還是會被越來越多的企業青睞。在用Bootstrap框架做響應式設計時，也應該多考慮和設計好一些交互上的東西，畢竟這是用戶體驗上最直接的部分，設計者在設計時應該更多得考慮響應式網頁在不同端模塊的分布以及適合所在端的頁面交互，響應是本，交互是質，設計是根，把用戶所可能接觸到的方方面面都設計好，才會讓自己所做的響應式網站有更好的用戶體驗和得到更多的關注度。

參考文獻

[1]Bootstrap官方網站.

[2]BenFrain.響應式Web設計[M].中國工信出版集團,2017(1).

[3]車云月.Bootstrap響應式網站開發實戰[M].清華大學出版社,2018(1).

[4]楊旺功.BootstrapWeb設計與開發實戰[J].清華大學出版社,2017(1).

[5]李金亮，李春青.基于Bootstrap的WEB開發設計研究[J].信息技術，2016(2).

作者:原方亮 劉占方 單位:鄭州大學