基于Bootstrap框架實現公共圖書館網站響應式優化研究
2021-03-04 11:50:52楊義臣
電腦知識與技術 2021年34期
楊義臣
摘要：隨著移動智能設備的普及和5G通信網絡技術的成熟，人們已經進入移動互聯網時代。越來越多的用戶使用手機、平板電腦等移動設備訪問公共圖書館網站。然而國內大部分公共圖書館網站沒有針對移動設備進行優化，影響用戶體驗。Bootstrap框架是目前較為流行的響應式設計布局框架，使用Bootstrap框架優化國家圖書館官方網站，可以在不改變網站整體結構的前提下，完善其在移動設備上的展現形式，在移動互聯網時代為用戶提供更好的互聯網服務。
關鍵詞：Bootstrap框架;響應式優化;國家圖書館
中圖分類號：TP393? ? ? 文獻標識碼：A
文章編號：1009-3044（2021）34-0102-04
隨著移動智能設備的普及和5G通信網絡技術的逐漸成熟，人們已經進入移動互聯網時代。越來越多的用戶開始使用手機、平板電腦等移動設備訪問公共圖書館網站，接受圖書館提供的互聯網服務[1]。然而，在筆者對國家圖書館和省、自治區、直轄市、特別行政區等34家圖書館門戶網站進行調研發現，僅有40%的圖書館門戶網站進行了網站響應式優化，實現了網站在移動設備上的適配，大部分圖書館網站無法適配移動設備，影響移動互聯網用戶的使用體驗。
為了改善移動互聯網用戶的使用體驗，公共圖書館應通過便捷、實用的方式對其門戶網站進行響應式優化，讓圖書館網站在移動互聯網時代提供更優質的服務。
1 Bootstrap框架
Bootstrap框架是一種用于快速開發 Web 應用程序和網站的前端框架。將Bootstrap框架運用到公共圖書館網站建設中，可以在不影響網站整體結構的前提下完成網站的響應式優化。
1.1 Bootstrap框架介紹
Bootstrap框架是一種廣為流行的響應式設計布局框架，它于2011年8月由時任Twitter的架構師馬克·奧托（Mark Otto）和雅各·桑頓（Jacob Thornton）開發和發布，是基于HTML5和CSS3架構的實現多種響應式設計布局的開源Web組件[2]。
1.2 Bootstrap框架功能
Bootstrap框架具有獨創的12列響應式柵格結構，由JavaScript插件、表單控件和CSS樣式組件構成。Web前端開發人員只需要在制作網頁時加入其組件，即可輕松實現網頁的響應式設計布局，在各種終端設備上為用戶呈現出最適宜的網頁樣式，無論用戶使用電腦還是其他移動智能設備，都可以在視覺、交互等方面獲得更好的體驗[3]。
1.3 Bootstrap框架優勢
Bootstrap框架發布后立即受到廣大Web前端開發人員的喜愛，成為最熱門的響應式設計布局框架之一，主要在于它具備便捷、易用等優勢。
1）環境安裝簡捷
Bootstrap框架環境安裝非常簡捷，在HTML網頁代碼的<head></head>區加載預編譯的bootstrap.js和bootstrap.css文件，或者加載預編譯壓縮的bootstrap.min.js和bootstrap.min.css文件，即可完成Bootstrap框架的環境安裝。
2）代碼編寫簡單易用
Bootstrap框架中預定義了一套CSS樣式和與樣式相對應JavaScript代碼，前端開發者在應用時只需要提供固定的HTML結構，隨后添加Bootstrap框架中提供的class名稱就可以完成指定樣式或者效果的實現。
3）強大的柵格系統
Bootstrap框架具備一個響應式的、移動設備優先的、不固定的柵格系統，可以隨著設備或者視口（viewport）大小的增加而適當地擴展到12列。前端開發者可以根據Bootstrap框架的代碼規范，以一系列的行（row）和列（column）搭配組合出網頁的布局。
配合CSS3中更加完善的媒體查詢（@media）規則，Bootstrap框架支持基于設備或者視口的大小移動、顯示并隱藏內容。最新的Bootstrap框架中默認的柵格系統分為5個級別，這5個級別適用于不同尺寸的屏幕設備（見表1）[4]。
4）占用資源少
Bootstrap框架不僅功能強大，同時占用資源非常小，預編譯壓縮的bootstrap.min.js文件僅有62KB，bootstrap.min.css文件也僅有157KB，用戶在訪問使用bootstrap框架制作的網站時不會出現資源占用過多導致加載延遲的問題。
5）瀏覽器兼容性強
Bootstrap框架在瀏覽器兼容方面非常廣泛，兼容IE、Chrome、Firefox以及各版本的iOS和Android瀏覽器，其中，Bootstrap4版本框架兼容IE9和iOS7以上版本的瀏覽器，Bootstrap3版本框架兼容IE8和IOS6版本的瀏覽器。
2 國家圖書館官方網站響應式優化
在移動互聯網時代，公共圖書館的互聯網服務應該廣泛支持PC、平板電腦、手機等多終端設備訪問，在不同設備上呈現出最適宜的展現形式，以此提高用戶的使用體驗。
國家圖書館作為國家總書庫，國家書目中心，國家古籍保護中心，國家典籍博物館，在移動互聯網服務方面應走在圖書館的前列，而國家圖書館的官方網站目前并沒有進行響應式優化。
將Bootstrap框架運用到國家圖書館官方網站建設中，可以在不改變網站整體結構的前提下，完成響應式優化，為移動互聯網用戶提供更好的互聯網服務。
2.1 國家圖書館官方網站現狀
國家圖書館官方網站目前是其第十版網站（見圖1），網站上線于2012年，面向廣大用戶提供基于PC終端的互聯網服務，近十年沒做結構調整。在這十年時間里，智能手機在國內逐漸興起并完全普及，移動通信網絡也從3G時代變為5G時代，用戶訪問互聯網的習慣更是發生了天翻地覆的變化[5]。在互聯網時代，用戶更習慣使用手機、平板電腦等移動設備訪問互聯網，接受互聯網服務。
使用平板電腦、手機等移動設備訪問國家圖書館官方網站，會出現字體和圖片偏小、網站整體結構不符合移動互聯網用戶使用習慣等問題（見圖2-圖3），影響移動互聯網用戶的使用體驗。
2.2 運用Bootstrap框架優化國家圖書館官方網站
將Bootstrap框架運動到國家圖書館官方網站建設中，可在不改變網站整體結構的前提下實現網站響應式優化，讓用戶在移動互聯網環境下訪問國家圖書館官方網站時獲得良好的體驗。
1）安裝Bootstrap框架環境
運用Bootstrap框架對國家圖書館官方網站進行響應式優化，需要先安裝環境，將bootstrap.min.js和bootstrap.min.css文件加載到網頁代碼中，常用的加載方式為在網頁的<head>區加入<link href="css/bootstrap.min.css" rel="stylesheet">，在網頁的<body>區最下方加入<script src="js/bootstrap.min.js"></script>，只需簡單的兩步，即可完成Bootstrap框架環境的安裝。
2）根據網頁結構劃分區域
完成Bootstrap框架環境安裝后，需要對國家圖書館官方網站的網頁結構進行區域劃分，以此作為響應式優化的基礎。國家圖書館官方網站上線時間較早，網頁中各區域劃分并不明顯，因此在響應式優化前必須將其網頁進行詳細的區域劃分。
根據國家圖書館官方網站的結構，可將網站劃分為頂部區域、輪播圖區域、檢索區域、資源區域、讀者服務區、底部區域、特殊區域（見圖4～圖10）。
3）各區域的響應式優化
運用Bootstrap框架對國家圖書館官方網站的各區域進行響應式優化。優化主要通過Bootstrap框架的柵格化系統實現，通過<div class=“col- col-sm- col-md- col-xl-”></div>對各區域在不同設備上的占比進行調整，保證其在不同設備上展現不同的形式。
國家圖書館官方網站的頂部區域、檢索區域、讀者服務區域均為左右或者左中右結構，優化時使用Bootstrap框架的柵格化系統，讓各區域占比相加等于12即可，可根據實際效果更改各區域在不同設備上的占比。
輪播圖區域為單一結構，因此柵格化時無須考慮其在不同終端設備上的展現形式，使用統一的布局方式即可。
資源區域和底部區域為多欄目的布局結構，其中底部區域包括6個欄目，可以被12整除，可直接進行區域柵格化。而資源區域，共包含8個欄目，無法被12整除，可將4個欄目劃分為一組，將兩組欄目進行區域柵格化。
特殊區域由于位置和形式較為特殊，不適宜在平板電腦或者手機端以原有樣式展現，因此無法使用柵格化處理。需要依靠媒體查詢，使其在不同的設備上呈現不同的展現形式。
2.3 響應式優化應注意的問題
運用Bootstrap框架對國家圖書館官方網站進行響應式優化過程中，會出現一些問題，比如網頁代碼是使用TABLE標簽編寫的、網頁中大量文字都以圖片形式呈現、網頁中含有大量裝飾性的背景圖等。如何妥善解決這些問題，將直接影響國家圖書館官方網站響應式優化的效果。
1）更改網頁代碼形式
國家圖書館官方網站的網頁代碼采用HTML語言中TABLE標簽編寫，這種編寫方式已經不適合現在的網頁技術，從功能性和易用性都不如CSS+DIV編寫的網頁。尤其在適配媒體查詢（@media）規則方面。因此，在對國家圖書館官方網站進行響應式優化時，必須先將其網頁代碼編寫方式由TABLE標簽形式改為CSS+DIV形式，使其更好地適配Bootstrap框架，讓網頁的響應式優化效果更好。
2）優化圖片形式的文字標簽
國家圖書館官方網站中，存在大量圖片形式的文字標簽，在運用Bootstrap框架對網頁進行響應式優化時，這些圖片形式的文字標簽會影響整體優化效果，一張小尺寸的圖片標簽，在手機展示時會出現模糊、失真的情況。因此，在對網頁進行響應式優化的過程中，需要將這些圖片形式的文字標簽統一改為文本形式，文本可以根據媒體查詢規則，在不同類型設備上顯示不同的字號、顏色、行高等樣式，確保網頁在不同類型設備上有更好地展現樣式。
3）適量處理背景圖片
目前國家圖書館官方網站中，存在大量裝飾性的背景圖，這些背景圖在PC端可以起到美化和點綴的效果，然而在移動設備上，大量的背景圖不僅會影響顯示效果，還會占用數據流量資源，降低網頁的加載速度。因此，在使用Bootstrap框架對國家圖書館官方網站進行響應式優化時，應在移動端的展現形式上做出調整，利用背景色或者留白等方式替代過多的背景圖，突出網頁內容，提高加載速度。
2.4 優化后的國家圖書館官方網站
運用Bootstrap框架進行響應式優化后的國家圖書館官方網站，不僅可以保證其在PC端原有的樣式，還可以確保該網站在平板電腦、手機等移動設備上有良好的展現形式（見圖11～圖12）。此外，各區域經過Bootstrap框架響應式優化后還升級了網頁代碼形式，減少了圖片形式標簽的使用，讓網頁的加載速度更加流暢。為移動互聯網用戶提供更加完善的互聯網服務。
3 結束語
隨著移動互聯網時代的到來，公共圖書館的門戶網站需要進一步優化，滿足移動互聯網用戶的需求。Bootstrap框架可以在不改變網站整體結構的前提下實現網站的響應式優化，使網站在移動端展現出良好的顯示效果。國家圖書館官方網站已經近十年沒做結構調整，經過Bootstrap框架進行響應式優化后，可以完美適配各種終端設備（見圖13）。在優化過程中，需要解決網頁代碼形式、圖片形式的文字轉化、背景圖優化等方面的問題，保證其網站在移動互聯網時代為用戶提供更好的互聯網服務。
參考文獻：
[1] 龍德應，唐嫦燕.運用Bootstrap優化響應式高校圖書館數字資源系統的研究[J].農業圖書情報學刊，2018，30（4）：41-45.
[2] Bootstrap team.Introduction of Bootstrap[DB/OL]. [2021-05-18].https：//getbootstrap.com/docs/5.1/getting-started/introduction/.
[3] 孫萍.基于BootStrap的響應式設計在WEB圖書館中的應用[J].內蒙古科技與經濟，2017（20）：60-62.
[4] Bootstrap team.Grid system[DB/OL]. [2021-05-18].https：//getbootstrap.com/docs/5.1/layout/grid/.
[5] 夏偉.新技術時代下圖書館服務的轉型[J].智庫時代，2020（11）：275-276.
【通聯編輯：謝媛媛】
