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