基于Bootstrap框架實(shí)現(xiàn)公共圖書(shū)館網(wǎng)站響應(yīng)式優(yōu)化研究

2021-03-04 11:50:52楊義臣

電腦知識(shí)與技術(shù) 2021年34期

楊義臣

摘要：隨著移動(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)編輯：謝媛媛】