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

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

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

楊義臣

摘要：隨著移動智能設(shè)備的普及和5G通信網(wǎng)絡(luò)技術(shù)的成熟，人們已經(jīng)進(jìn)入移動互聯(lián)網(wǎng)時代。越來越多的用戶使用手機(jī)、平板電腦等移動設(shè)備訪問公共圖書館網(wǎng)站。然而國內(nèi)大部分公共圖書館網(wǎng)站沒有針對移動設(shè)備進(jìn)行優(yōu)化，影響用戶體驗(yàn)。Bootstrap框架是目前較為流行的響應(yīng)式設(shè)計(jì)布局框架，使用Bootstrap框架優(yōu)化國家圖書館官方網(wǎng)站，可以在不改變網(wǎng)站整體結(jié)構(gòu)的前提下，完善其在移動設(shè)備上的展現(xiàn)形式，在移動互聯(lián)網(wǎng)時代為用戶提供更好的互聯(lián)網(wǎng)服務(wù)。

關(guān)鍵詞：Bootstrap框架;響應(yīng)式優(yōu)化;國家圖書館

中圖分類號：TP393? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）34-0102-04

隨著移動智能設(shè)備的普及和5G通信網(wǎng)絡(luò)技術(shù)的逐漸成熟，人們已經(jīng)進(jìn)入移動互聯(lián)網(wǎng)時代。越來越多的用戶開始使用手機(jī)、平板電腦等移動設(shè)備訪問公共圖書館網(wǎng)站，接受圖書館提供的互聯(lián)網(wǎng)服務(wù)[1]。然而，在筆者對國家圖書館和省、自治區(qū)、直轄市、特別行政區(qū)等34家圖書館門戶網(wǎng)站進(jìn)行調(diào)研發(fā)現(xiàn)，僅有40%的圖書館門戶網(wǎng)站進(jìn)行了網(wǎng)站響應(yīng)式優(yōu)化，實(shí)現(xiàn)了網(wǎng)站在移動設(shè)備上的適配，大部分圖書館網(wǎng)站無法適配移動設(shè)備，影響移動互聯(lián)網(wǎng)用戶的使用體驗(yàn)。

為了改善移動互聯(lián)網(wǎng)用戶的使用體驗(yàn)，公共圖書館應(yīng)通過便捷、實(shí)用的方式對其門戶網(wǎng)站進(jìn)行響應(yīng)式優(yōu)化，讓圖書館網(wǎng)站在移動互聯(lián)網(wǎng)時代提供更優(yōu)質(zhì)的服務(wù)。

1 Bootstrap框架

Bootstrap框架是一種用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。將Bootstrap框架運(yùn)用到公共圖書館網(wǎng)站建設(shè)中，可以在不影響網(wǎng)站整體結(jié)構(gòu)的前提下完成網(wǎng)站的響應(yīng)式優(yōu)化。

1.1 Bootstrap框架介紹

Bootstrap框架是一種廣為流行的響應(yīng)式設(shè)計(jì)布局框架，它于2011年8月由時任Twitter的架構(gòu)師馬克·奧托（Mark Otto）和雅各·桑頓（Jacob Thornton）開發(fā)和發(fā)布，是基于HTML5和CSS3架構(gòu)的實(shí)現(xiàn)多種響應(yīng)式設(shè)計(jì)布局的開源Web組件[2]。

1.2 Bootstrap框架功能

Bootstrap框架具有獨(dú)創(chuàng)的12列響應(yīng)式柵格結(jié)構(gòu)，由JavaScript插件、表單控件和CSS樣式組件構(gòu)成。Web前端開發(fā)人員只需要在制作網(wǎng)頁時加入其組件，即可輕松實(shí)現(xiàn)網(wǎng)頁的響應(yīng)式設(shè)計(jì)布局，在各種終端設(shè)備上為用戶呈現(xiàn)出最適宜的網(wǎng)頁樣式，無論用戶使用電腦還是其他移動智能設(shè)備，都可以在視覺、交互等方面獲得更好的體驗(yàn)[3]。

1.3 Bootstrap框架優(yōu)勢

Bootstrap框架發(fā)布后立即受到廣大Web前端開發(fā)人員的喜愛，成為最熱門的響應(yīng)式設(shè)計(jì)布局框架之一，主要在于它具備便捷、易用等優(yōu)勢。

1）環(huán)境安裝簡捷

Bootstrap框架環(huán)境安裝非常簡捷，在HTML網(wǎng)頁代碼的<head></head>區(qū)加載預(yù)編譯的bootstrap.js和bootstrap.css文件，或者加載預(yù)編譯壓縮的bootstrap.min.js和bootstrap.min.css文件，即可完成Bootstrap框架的環(huán)境安裝。

2）代碼編寫簡單易用

Bootstrap框架中預(yù)定義了一套CSS樣式和與樣式相對應(yīng)JavaScript代碼，前端開發(fā)者在應(yīng)用時只需要提供固定的HTML結(jié)構(gòu)，隨后添加Bootstrap框架中提供的class名稱就可以完成指定樣式或者效果的實(shí)現(xiàn)。

3）強(qiáng)大的柵格系統(tǒng)

Bootstrap框架具備一個響應(yīng)式的、移動設(shè)備優(yōu)先的、不固定的柵格系統(tǒng)，可以隨著設(shè)備或者視口（viewport）大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到12列。前端開發(fā)者可以根據(jù)Bootstrap框架的代碼規(guī)范，以一系列的行（row）和列（column）搭配組合出網(wǎng)頁的布局。

配合CSS3中更加完善的媒體查詢（@media）規(guī)則，Bootstrap框架支持基于設(shè)備或者視口的大小移動、顯示并隱藏內(nèi)容。最新的Bootstrap框架中默認(rèn)的柵格系統(tǒng)分為5個級別，這5個級別適用于不同尺寸的屏幕設(shè)備（見表1）[4]。

4）占用資源少

Bootstrap框架不僅功能強(qiáng)大，同時占用資源非常小，預(yù)編譯壓縮的bootstrap.min.js文件僅有62KB，bootstrap.min.css文件也僅有157KB，用戶在訪問使用bootstrap框架制作的網(wǎng)站時不會出現(xiàn)資源占用過多導(dǎo)致加載延遲的問題。

5）瀏覽器兼容性強(qiáng)

Bootstrap框架在瀏覽器兼容方面非常廣泛，兼容IE、Chrome、Firefox以及各版本的iOS和Android瀏覽器，其中，Bootstrap4版本框架兼容IE9和iOS7以上版本的瀏覽器，Bootstrap3版本框架兼容IE8和IOS6版本的瀏覽器。

2 國家圖書館官方網(wǎng)站響應(yīng)式優(yōu)化

在移動互聯(lián)網(wǎng)時代，公共圖書館的互聯(lián)網(wǎng)服務(wù)應(yīng)該廣泛支持PC、平板電腦、手機(jī)等多終端設(shè)備訪問，在不同設(shè)備上呈現(xiàn)出最適宜的展現(xiàn)形式，以此提高用戶的使用體驗(yàn)。

國家圖書館作為國家總書庫，國家書目中心，國家古籍保護(hù)中心，國家典籍博物館，在移動互聯(lián)網(wǎng)服務(wù)方面應(yīng)走在圖書館的前列，而國家圖書館的官方網(wǎng)站目前并沒有進(jìn)行響應(yīng)式優(yōu)化。

將Bootstrap框架運(yùn)用到國家圖書館官方網(wǎng)站建設(shè)中，可以在不改變網(wǎng)站整體結(jié)構(gòu)的前提下，完成響應(yīng)式優(yōu)化，為移動互聯(lián)網(wǎng)用戶提供更好的互聯(lián)網(wǎng)服務(wù)。

2.1 國家圖書館官方網(wǎng)站現(xiàn)狀

國家圖書館官方網(wǎng)站目前是其第十版網(wǎng)站（見圖1），網(wǎng)站上線于2012年，面向廣大用戶提供基于PC終端的互聯(lián)網(wǎng)服務(wù)，近十年沒做結(jié)構(gòu)調(diào)整。在這十年時間里，智能手機(jī)在國內(nèi)逐漸興起并完全普及，移動通信網(wǎng)絡(luò)也從3G時代變?yōu)?G時代，用戶訪問互聯(lián)網(wǎng)的習(xí)慣更是發(fā)生了天翻地覆的變化[5]。在互聯(lián)網(wǎng)時代，用戶更習(xí)慣使用手機(jī)、平板電腦等移動設(shè)備訪問互聯(lián)網(wǎng)，接受互聯(lián)網(wǎng)服務(wù)。

使用平板電腦、手機(jī)等移動設(shè)備訪問國家圖書館官方網(wǎng)站，會出現(xiàn)字體和圖片偏小、網(wǎng)站整體結(jié)構(gòu)不符合移動互聯(lián)網(wǎng)用戶使用習(xí)慣等問題（見圖2-圖3），影響移動互聯(lián)網(wǎng)用戶的使用體驗(yàn)。

2.2 運(yùn)用Bootstrap框架優(yōu)化國家圖書館官方網(wǎng)站

將Bootstrap框架運(yùn)動到國家圖書館官方網(wǎng)站建設(shè)中，可在不改變網(wǎng)站整體結(jié)構(gòu)的前提下實(shí)現(xiàn)網(wǎng)站響應(yīng)式優(yōu)化，讓用戶在移動互聯(lián)網(wǎng)環(huán)境下訪問國家圖書館官方網(wǎng)站時獲得良好的體驗(yàn)。

1）安裝Bootstrap框架環(huán)境

運(yùn)用Bootstrap框架對國家圖書館官方網(wǎng)站進(jìn)行響應(yīng)式優(yōu)化，需要先安裝環(huán)境，將bootstrap.min.js和bootstrap.min.css文件加載到網(wǎng)頁代碼中，常用的加載方式為在網(wǎng)頁的<head>區(qū)加入<link href="css/bootstrap.min.css" rel="stylesheet">，在網(wǎng)頁的<body>區(qū)最下方加入<script src="js/bootstrap.min.js"></script>，只需簡單的兩步，即可完成Bootstrap框架環(huán)境的安裝。

2）根據(jù)網(wǎng)頁結(jié)構(gòu)劃分區(qū)域

完成Bootstrap框架環(huán)境安裝后，需要對國家圖書館官方網(wǎng)站的網(wǎng)頁結(jié)構(gòu)進(jìn)行區(qū)域劃分，以此作為響應(yīng)式優(yōu)化的基礎(chǔ)。國家圖書館官方網(wǎng)站上線時間較早，網(wǎng)頁中各區(qū)域劃分并不明顯，因此在響應(yīng)式優(yōu)化前必須將其網(wǎng)頁進(jìn)行詳細(xì)的區(qū)域劃分。

根據(jù)國家圖書館官方網(wǎng)站的結(jié)構(gòu)，可將網(wǎng)站劃分為頂部區(qū)域、輪播圖區(qū)域、檢索區(qū)域、資源區(qū)域、讀者服務(wù)區(qū)、底部區(qū)域、特殊區(qū)域（見圖4～圖10）。

3）各區(qū)域的響應(yīng)式優(yōu)化

運(yùn)用Bootstrap框架對國家圖書館官方網(wǎng)站的各區(qū)域進(jìn)行響應(yīng)式優(yōu)化。優(yōu)化主要通過Bootstrap框架的柵格化系統(tǒng)實(shí)現(xiàn)，通過<div class=“col- col-sm- col-md- col-xl-”></div>對各區(qū)域在不同設(shè)備上的占比進(jìn)行調(diào)整，保證其在不同設(shè)備上展現(xiàn)不同的形式。

國家圖書館官方網(wǎng)站的頂部區(qū)域、檢索區(qū)域、讀者服務(wù)區(qū)域均為左右或者左中右結(jié)構(gòu)，優(yōu)化時使用Bootstrap框架的柵格化系統(tǒng)，讓各區(qū)域占比相加等于12即可，可根據(jù)實(shí)際效果更改各區(qū)域在不同設(shè)備上的占比。

輪播圖區(qū)域?yàn)閱我唤Y(jié)構(gòu)，因此柵格化時無須考慮其在不同終端設(shè)備上的展現(xiàn)形式，使用統(tǒng)一的布局方式即可。

資源區(qū)域和底部區(qū)域?yàn)槎鄼谀康牟季纸Y(jié)構(gòu)，其中底部區(qū)域包括6個欄目，可以被12整除，可直接進(jìn)行區(qū)域柵格化。而資源區(qū)域，共包含8個欄目，無法被12整除，可將4個欄目劃分為一組，將兩組欄目進(jìn)行區(qū)域柵格化。

特殊區(qū)域由于位置和形式較為特殊，不適宜在平板電腦或者手機(jī)端以原有樣式展現(xiàn)，因此無法使用柵格化處理。需要依靠媒體查詢，使其在不同的設(shè)備上呈現(xiàn)不同的展現(xiàn)形式。

2.3 響應(yīng)式優(yōu)化應(yīng)注意的問題

運(yùn)用Bootstrap框架對國家圖書館官方網(wǎng)站進(jìn)行響應(yīng)式優(yōu)化過程中，會出現(xiàn)一些問題，比如網(wǎng)頁代碼是使用TABLE標(biāo)簽編寫的、網(wǎng)頁中大量文字都以圖片形式呈現(xiàn)、網(wǎng)頁中含有大量裝飾性的背景圖等。如何妥善解決這些問題，將直接影響國家圖書館官方網(wǎng)站響應(yīng)式優(yōu)化的效果。

1）更改網(wǎng)頁代碼形式

國家圖書館官方網(wǎng)站的網(wǎng)頁代碼采用HTML語言中TABLE標(biāo)簽編寫，這種編寫方式已經(jīng)不適合現(xiàn)在的網(wǎng)頁技術(shù)，從功能性和易用性都不如CSS+DIV編寫的網(wǎng)頁。尤其在適配媒體查詢（@media）規(guī)則方面。因此，在對國家圖書館官方網(wǎng)站進(jìn)行響應(yīng)式優(yōu)化時，必須先將其網(wǎng)頁代碼編寫方式由TABLE標(biāo)簽形式改為CSS+DIV形式，使其更好地適配Bootstrap框架，讓網(wǎng)頁的響應(yīng)式優(yōu)化效果更好。

2）優(yōu)化圖片形式的文字標(biāo)簽

國家圖書館官方網(wǎng)站中，存在大量圖片形式的文字標(biāo)簽，在運(yùn)用Bootstrap框架對網(wǎng)頁進(jìn)行響應(yīng)式優(yōu)化時，這些圖片形式的文字標(biāo)簽會影響整體優(yōu)化效果，一張小尺寸的圖片標(biāo)簽，在手機(jī)展示時會出現(xiàn)模糊、失真的情況。因此，在對網(wǎng)頁進(jìn)行響應(yīng)式優(yōu)化的過程中，需要將這些圖片形式的文字標(biāo)簽統(tǒng)一改為文本形式，文本可以根據(jù)媒體查詢規(guī)則，在不同類型設(shè)備上顯示不同的字號、顏色、行高等樣式，確保網(wǎng)頁在不同類型設(shè)備上有更好地展現(xiàn)樣式。

3）適量處理背景圖片

目前國家圖書館官方網(wǎng)站中，存在大量裝飾性的背景圖，這些背景圖在PC端可以起到美化和點(diǎn)綴的效果，然而在移動設(shè)備上，大量的背景圖不僅會影響顯示效果，還會占用數(shù)據(jù)流量資源，降低網(wǎng)頁的加載速度。因此，在使用Bootstrap框架對國家圖書館官方網(wǎng)站進(jìn)行響應(yīng)式優(yōu)化時，應(yīng)在移動端的展現(xiàn)形式上做出調(diào)整，利用背景色或者留白等方式替代過多的背景圖，突出網(wǎng)頁內(nèi)容，提高加載速度。

2.4 優(yōu)化后的國家圖書館官方網(wǎng)站

運(yùn)用Bootstrap框架進(jìn)行響應(yīng)式優(yōu)化后的國家圖書館官方網(wǎng)站，不僅可以保證其在PC端原有的樣式，還可以確保該網(wǎng)站在平板電腦、手機(jī)等移動設(shè)備上有良好的展現(xiàn)形式（見圖11～圖12）。此外，各區(qū)域經(jīng)過Bootstrap框架響應(yīng)式優(yōu)化后還升級了網(wǎng)頁代碼形式，減少了圖片形式標(biāo)簽的使用，讓網(wǎng)頁的加載速度更加流暢。為移動互聯(lián)網(wǎng)用戶提供更加完善的互聯(lián)網(wǎng)服務(wù)。

3 結(jié)束語

隨著移動互聯(lián)網(wǎng)時代的到來，公共圖書館的門戶網(wǎng)站需要進(jìn)一步優(yōu)化，滿足移動互聯(lián)網(wǎng)用戶的需求。Bootstrap框架可以在不改變網(wǎng)站整體結(jié)構(gòu)的前提下實(shí)現(xiàn)網(wǎng)站的響應(yīng)式優(yōu)化，使網(wǎng)站在移動端展現(xiàn)出良好的顯示效果。國家圖書館官方網(wǎng)站已經(jīng)近十年沒做結(jié)構(gòu)調(diào)整，經(jīng)過Bootstrap框架進(jìn)行響應(yīng)式優(yōu)化后，可以完美適配各種終端設(shè)備（見圖13）。在優(yōu)化過程中，需要解決網(wǎng)頁代碼形式、圖片形式的文字轉(zhuǎn)化、背景圖優(yōu)化等方面的問題，保證其網(wǎng)站在移動互聯(lián)網(wǎng)時代為用戶提供更好的互聯(lián)網(wǎng)服務(wù)。

參考文獻(xiàn)：

[1] 龍德應(yīng)，唐嫦燕.運(yùn)用Bootstrap優(yōu)化響應(yīng)式高校圖書館數(shù)字資源系統(tǒng)的研究[J].農(nóng)業(yè)圖書情報學(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圖書館中的應(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ù)時代下圖書館服務(wù)的轉(zhuǎn)型[J].智庫時代，2020（11）：275-276.

【通聯(lián)編輯：謝媛媛】

国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

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