基于Bootstrap的H5響應(yīng)式網(wǎng)站優(yōu)化設(shè)計與實現(xiàn)

摘要：隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，傳統(tǒng)的網(wǎng)頁設(shè)計已經(jīng)無法滿足移動端的需求，而Bootstrap是一種以HTML，CSS，JavaScript為基礎(chǔ)、簡潔直觀、功能強大的前端開發(fā)框架，它很好地滿足了當(dāng)前網(wǎng)站設(shè)計的靈活性需求，在此基礎(chǔ)上．結(jié)合Bootstrap的HTML5和CSS3的核心技術(shù)．文章討論了響應(yīng)式網(wǎng)站的設(shè)計和實施．有效地解決了由于移動智能終端的多元化發(fā)展所帶來的各種問題。

關(guān)鍵詞：HTML5；CSS3；響應(yīng)式網(wǎng)站設(shè)計與優(yōu)化；Bootstrap

中圖法分類號：TP393 文獻標(biāo)識碼：A

網(wǎng)頁必須與各種移動智能終端相適應(yīng)，若僅以傳統(tǒng)方式進行設(shè)計，將會產(chǎn)生如下問題：第一，網(wǎng)頁界面無法在移動端上完全顯示，必須放大、縮小才能正常使用；二是界面混亂，文字和圖片堆砌在一起會給使用者帶來很大的不便；三是傳統(tǒng)網(wǎng)頁字體大小、版面布局難以滿足橫屏、豎屏的轉(zhuǎn)換需求。通過采用ＨＴＭＬ５ 和ＣＳＳ３ 技術(shù)，實現(xiàn)了網(wǎng)頁的跨平臺化和自適應(yīng)性，能夠根據(jù)顯示的不同參數(shù)，自動地調(diào)整頁面的布局，使頁面能夠適應(yīng)各種移動智能終端的使用，從而達到統(tǒng)一的頁面效果，這正是響應(yīng)式網(wǎng)站的優(yōu)勢所在［１］ 。

１ 關(guān)于Ｂｏｏｔｓｔｒａｐ 及響應(yīng)式核心技術(shù)

１．１ Ｂｏｏｔｓｔｒａｐ 前端開發(fā)框架

Ｂｏｏｔｓｔｒａｐ 是一種基于ＨＴＭＬ，ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 的前端開發(fā)框架，它使用了最尖端的技術(shù)，由于具有使用簡潔、靈活、易于開發(fā)、提供樣式化的參考文檔以及開源的代碼基礎(chǔ)等特點，因此它的代碼基礎(chǔ)更加牢固［２］ 。

Ｂｏｏｔｓｔｒａｐ 是當(dāng)前流行的前端開發(fā)框架，其響應(yīng)性強、移動設(shè)備優(yōu)先的思想，能夠根據(jù)設(shè)備大小和運行情況，對頁面布局、圖片大小以及對應(yīng)的腳本代碼進行修改，使前端工作更快捷、更簡單。例如，大部分瀏覽器和設(shè)備都支持Ｂｏｏｔｓｔｒａｐ， Ｂｏｏｔｓｔｒａｐ 框架為用戶提供了大量的Ｗｅｂ 部件，其中包含導(dǎo)航、模態(tài)框、圖片輪播和一個穩(wěn)定的移動智能終端平臺。

（１）移動設(shè)備優(yōu)先。

用戶在使用手機端瀏覽網(wǎng)頁時，需要將網(wǎng)頁進行放大或縮小，從而有一個整體的頁面效果，這會給用戶帶來不愉快的體驗。Ｂｏｏｔｓｔｒａｐ 具有移動設(shè)備優(yōu)先的理念，它在頁面的＜ｈｅａｄ＞區(qū)域添加了一個元窗口標(biāo)記視圖，從而判斷該頁面在裝載時會恢復(fù)到原來的尺寸，并設(shè)置“ｕｓｅｒ?ｓｃａｌａｂｌｅ ＝ ｎｏ”，因此它不能被擴展，用戶可以通過滾動條或屏幕進行操作。

（２）豐富且功能強大的組件和插件。

Ｂｏｏｔｓｔｒａｐ 可以為用戶提供很多部件和插件，如圖片、導(dǎo)航、輸入框等。其自帶ＪａｖａＳｃｒｉｐｔ 插件包含過渡效應(yīng)、模態(tài)框、下拉式菜單、滾動收聽等ｊＱｕｅｒｙ 標(biāo)準(zhǔn)和習(xí)慣，而且將其導(dǎo)入Ｗｅｂ 頁面中即可。

（３）靈活的響應(yīng)式柵格系統(tǒng)。

Ｂｏｏｔｓｔｒａｐ 包含一個柵格系統(tǒng)，它是一個響應(yīng)式的、可移動的裝置，它使用了一系列行和列的組合，先確定容器的大小，將其分成１２ 個小塊，再調(diào)整內(nèi)外間隔，將設(shè)置好的內(nèi)容放在一個已經(jīng)確定的頁面上。同時，其還包含一個預(yù)定義的分類，可以選擇一個簡單的版型和一個強大的組合分類，能夠根據(jù)版面的需求，靈活地劃分版面。

１．２ 響應(yīng)式網(wǎng)站概述

１．２．１ 響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站可以與各種終端兼容，并能自動識別出手機屏幕大小并做出相應(yīng)調(diào)整的設(shè)計。如果是使用傳統(tǒng)的ＰＣ 頁面，用戶在手機終端上瀏覽時，常常是不合適的，用戶需要滑動、縮放頁面來觀看，而且因為頁面縮放，很多頁面的按鍵都無法正常操作，用戶的體驗會非常糟糕。因此，響應(yīng)式網(wǎng)站能夠根據(jù)用戶的需要，自動地調(diào)整頁面來獲得更好的用戶體驗。隨著信息技術(shù)的發(fā)展，移動智能終端的使用量會不斷增加，很多網(wǎng)站為了吸引更多的用戶而使用響應(yīng)式網(wǎng)頁，因此如何優(yōu)化響應(yīng)式網(wǎng)頁設(shè)計技術(shù)成為一個重要課題。當(dāng)前，技術(shù)人員在使用ＨＴＭＬ５ 和ＣＳＳ３ 技術(shù)的基礎(chǔ)上，開發(fā)了彈性布局、彈性圖像等技術(shù)。

１．２．２ 響應(yīng)式的核心技術(shù)

（１）媒體查詢。針對不同尺寸的設(shè)備終端，可以根據(jù)用戶需求，自動檢測系統(tǒng)大小、屏幕尺寸、屏幕方向等，選用不同的ＣＳＳ３ 格式，利用媒體查詢，可以自定義某些輸出裝置的顯示效果，而無需更改網(wǎng)頁的內(nèi)容。

（２）彈性布局。這種方法使得每個區(qū)塊的位置都有一個浮動的特征，設(shè)計者可以用百分?jǐn)?shù)來代替固定的數(shù)值，如網(wǎng)頁寬度、圖片、文字等。由此，當(dāng)頁面尺寸發(fā)生變化時，可以根據(jù)不同的版式進行調(diào)整。

（３）彈性圖像。預(yù)設(shè)中，圖片的顯示大小由寬度和高度屬性所決定。一旦屬性值被確定，不管頁面的界面如何改變，圖片都將以原來的大小顯示。如果是一張有彈性的照片，只要把它的最大寬度屬性設(shè)定成百分比，它就會自動地和彈性網(wǎng)格一起縮小。如果畫面的寬度超出了屏幕的寬度，它將會在沒有破裂的情況下自動縮??；相反，則顯示為最初的大小。

１．３ 用于響應(yīng)式網(wǎng)站的計算機語言

１．３．１ ＨＴＭＬ５ 超文本標(biāo)語言

ＨＴＭＬ５ 是創(chuàng)建Ｗｅｂ 文檔的一種語言描述方式，瀏覽器按照順序讀取頁面文件，并按照標(biāo)簽來說明并顯示它們所標(biāo)注的內(nèi)容，它定義了頁面的內(nèi)涵和結(jié)構(gòu)，簡單地說，就是將頁面分成幾塊長方形，再將長方形鑲嵌在一起，從而可以讓同一頁面按照不同的尺寸來自動地調(diào)整頁面的布局。

（１）可塑性。ＨＴＭＬ５ 的新的語義標(biāo)記使得閱讀器能夠更好地識別出信息的類型，從而幫助用戶更好地進行閱讀。另外，ＨＴＭＬ５ 還提供ＡＲＩＡ 數(shù)據(jù)角色，允許開發(fā)人員為某些內(nèi)容繼續(xù)指派角色，如當(dāng)網(wǎng)頁內(nèi)容被添加到ＪａｖａＳｃｒｉｐｔ 中時，可以通過定義ＡＲＩＡ 角色來完成。

（２）支持視頻和音頻。ＨＴＭＬ５ 既支持音頻，也支持視頻。ＨＴＭＬ５ 的主要優(yōu)點在于，它可以在沒有附加ＡｄｏｂｅＦｌａｓｈ 等附加插件的情況下，為網(wǎng)頁提供移動設(shè)備的支持。

（３）智能儲存。ＨＴＭＬ５ 介紹了一個文件對象模型（ＤＯＭ），它包含一個局部（永久）和一個會話（只能在一個會話中使用），它的優(yōu)點是數(shù)據(jù)僅僅被存儲在客戶端中，并且非常容易使用。

１．３．２ ＣＳＳ３ 疊層樣式表

ＣＳＳ３ 是定義字體、顏色、位置的一種程序，用于描述網(wǎng)頁的格式和顯示。本系統(tǒng)可以有效地區(qū)分網(wǎng)頁的主題和設(shè)計格式，把ＣＳＳ３ 格式的信息作為獨立的文件存儲，使設(shè)計者能夠更好地集中處理Ｗｅｂ 數(shù)據(jù)［３～５］ 。在網(wǎng)頁設(shè)計方面，ＣＳＳ３ 樣式的文件被制作成獨立的文檔，可以與其他ＨＴＭＬ５ 文件共享，從而可以避免設(shè)計者對頁面進行反復(fù)設(shè)計，同時可以把精力放在頁面的主要內(nèi)容和功能上，進而可以節(jié)約很多的時間。

ＨＴＭＬ５ 與ＣＳＳ３ 技術(shù)支持響應(yīng)式網(wǎng)站的建立，使其能夠與各種終端兼容，能夠自動識別設(shè)備的屏幕大小并進行相應(yīng)的調(diào)整。但是，在實踐中，除了良好的兼容性和流暢的自動調(diào)節(jié)功能外，頁面的視覺效果、輔助功能也是吸引用戶的一個重要因素。

２ 響應(yīng)式網(wǎng)站的布局優(yōu)化和常見問題的解決

在響應(yīng)式網(wǎng)站開發(fā)過程中可以進行部分優(yōu)化。

２．１ 響應(yīng)式布局的優(yōu)化

２．１．１ 部分樣式

在ＣＳＳ 預(yù)處理技術(shù)Ｓａｓｓ 中，傳統(tǒng)的ＣＳＳ 語法是每一種元素都具有自己獨特的風(fēng)格，而Ｓａｓｓ 的存在使ＣＳＳ 能夠利用可變、邏輯、函數(shù)等編程能力，并且易于維護。開發(fā)者可以通過Ｓａｓｓ 嵌套的方法把不同的元素組合在一起，這種嵌套的方法讓“凌亂”的ＣＳＳ 更有層次、條理，而且不會出現(xiàn)重復(fù)的樣式。Ｓａｓｓ 可以自定義主題的色彩以及字體大小等，在將來修改的過程中，改變主題的色彩即可［６］ 。

２．１．２ 對ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 的處理

嵌入或?qū)氲模剩幔觯幔樱悖颍椋穑?應(yīng)該盡可能地放置在網(wǎng)頁的最底層，因為瀏覽器是從上而下地呈現(xiàn)ＨＴＭＬ 文件，當(dāng)網(wǎng)頁裝入ＪａｖａＳｃｒｉｐｔ 或ＪａｖａＳｃｒｉｐｔ 文件時，它就會停止，直到ＪａｖａＳｃｒｉｐｔ 完成，然后再進行下一步的操作?，F(xiàn)在網(wǎng)絡(luò)上有大量的壓縮和解壓的工具，如果能把ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 壓縮到最小，就能最大限度地縮短裝入速度，當(dāng)要調(diào)試時，用解壓工具來打開。如果使用Ｂｏｏｔｓｔｒａｐ 來打開網(wǎng)頁，要花費較長時間，那么很有可能是由于Ｂｏｏｔｓｔｒａｐ 在網(wǎng)上調(diào)用谷歌的資源，所以只要將所有的在線調(diào)用代碼設(shè)置為空即可解決這個問題。

２．１．３ 使用Ｂｒｏｗｓｅｒ Ｃａｃｈｅ 來降低ＨＴＴＰ 請求的數(shù)量

首先，可以引用圖片，通常的引用方式＜ ｉｍｇ ｓｒｃ＝＂ ｉｍｇ／ ｂａｎｎｅｒ．ｐｎ ｇ＂ ＞，如果在ｓｒｃ 之后出現(xiàn)一個網(wǎng)頁，將會觸發(fā)ｈｔｔｐ 請求，加上“ｄａｔａ：”，將會成為該頁面的內(nèi)容，當(dāng)用戶再次點開時，將不再需要重新下載。

因為在手機端上有一個流量問題，所以減少ｈｔｔｐ 的請求也可以為用戶節(jié)約流量。

２．１．４ 頁面實現(xiàn)逐次加載

手機端的屏幕大小、信息量都是有限的，因此在設(shè)計手機端的時候，可以采用瀑布式的方法，讓用戶在下載的時候可以節(jié)省更多的時間，在不需要查看的情況下，也不需要下載，這就可以節(jié)省用戶的時間。

同時，在需要的時候點擊鼠標(biāo)，就可以下載相應(yīng)的內(nèi)容，這也是一種提升用戶體驗的方法。

２．２ 解決響應(yīng)式布局中的常見問題

２．２．１ Ｂｏｏｔｓｔｒａｐ 的ｂａｎｎｅｒ 輪播問題

問題一：Ｂｏｏｔｓｔｒａｐ 中的圖片輪播如果要求自動輪播，則必須在＂ｃａｒｏｕｓｅｌ?ａｄ＂類＝＂ ｃａｒｏｕｓｅｌ ｓｌｉｄｅ＂ ＞標(biāo)簽中加上一輪播放的初始數(shù)據(jù)類型＝＂ ｃａｒｏｕｓｅｌ＂，并在輪播中設(shè)置輪播周期為＂３０００＂，所以當(dāng)用戶再次打開時，輪播將會自動播放，但當(dāng)使用者按下ｂａｎｎｅｒ 圖或鼠標(biāo)在ｂａｎｎｅｒ 圖上一劃，輪播畫面就會結(jié)束，這會對使用者造成一定的影響。

問題二：Ｂｏｏｔｓｔｒａｐ 的ｂａｎｎｅｒ 圖的高度是隨著屏幕寬度的減小而變小的，若ｂａｎｎｅｒ 圖等比例減小到了手機屏幕的寬度，則文本鏈接模塊的高度就會超過ｂａｎｎｅｒ 的高度，從而顯示不正常。為解決以上兩個問題，可以用ＪＱｕｅｒｙ 插件取代Ｂｏｏｔｓｔｒａｐ 的輪播，再用＠ｍｅｄｉａ 進行媒體查詢，根據(jù)Ｂｏｏｔｓｔｒａｐ 的插槽，為ｂａｎｎｅｒ圖設(shè)定不同的高度。具體如圖１ 所示。

２．２．２ ＰＣ 端的ｈｏｖｅｒ 在移動端的處理

ＰＣ 上有ｈｏｖｅｒ，但在手機端上卻沒有，有時ＰＣ 上的鏈接如果加了ｈｏｖｅｒ，在手機端點擊一次變成ｈｏｖｅｒ樣式，然后點擊下一次，就會出現(xiàn)相應(yīng)的鏈接。因此，可以在ｂｏｄｙ 上綁定ｔｏｕｃｈｓｔａｒｔ 事件來解決這個問題。

２．２．３ 彈出的模態(tài)框被遮罩遮住

這種情況很有可能是模態(tài)框的代碼放置不當(dāng)，正確的位置應(yīng)該是在ＨＴＭＬ 文件的后面，即ｂｏｄｙ 的后面，這可以降低其他代碼或者模塊對模態(tài)框的影響。

２．２．４ 折疊的內(nèi)容展開顯示滾動條

開發(fā)人員希望用ｃｏｌｌａｐｓｅ 組件實現(xiàn)一個可折疊的功能，容器的尺寸取決于內(nèi)容的大小，有時會出現(xiàn)滾動條，但在添加了ｏｖｅｒｆｌｏｗ?Ｙ 屬性后，它還是無法刪除，如果遇到這種情況，可以將其放置在容器的頂部并設(shè)定適當(dāng)?shù)母叨?，這樣就不會再出現(xiàn)滾動條。

２．２．５ Ｃｏｍｐａｓｓ 擴展庫的使用問題

在創(chuàng)建Ｃｏｍｐａｓｓ 項目時，在ｃｍｄ 中輸入“ｃｏｍｐａｓｓｃｒｅａｔｅ 項目名”后，生成了３ 個類似于圖２ 的文件。

開發(fā)人員無法找到所建立的項目檔案時，在ｃｍｄ中繼續(xù)鍵入“ｃｄ ｍｙｐｒｏｊｅｃｔ”，即可找到該文件的位置。

然后，開發(fā)人員要把這３ 個文件拷貝到相應(yīng)的文件夾，即配置文件， Ｓａｓｓ 編譯后ＣＳＳ 文件夾， Ｓａｓｓ 源文件夾。開發(fā)人員在完成這個步驟之后，常常會碰到帶有Ｃｏｍｐａｓｓ 擴展庫代碼的Ｓａｓｓ 文件，在編譯時會出現(xiàn)一些錯誤的編輯提示，如果出現(xiàn)這樣的問題，開發(fā)者會先查看條目對應(yīng)的路徑是否有漢字，然后再將ｃｏｎｆｉｇ． ｒｂ 文件進行調(diào)配，有２ 條路徑可以選擇。

（１）ｃｓｓ＿ｄｉｒ ＝ ＂ｓｔｙｌｅｓｈｅｅｔｓ＂ ／ ／ 引號內(nèi)寫Ｓａｓｓ 編譯生成的ＣＳＳ 文件所在的文件名。

（２）ｓａｓｓ＿ｄｉｒ ＝ ＂ｓａｓｓ＂ ／ ／ 引號內(nèi)寫Ｓａｓｓ 文件所在的文件名。

第一行的引號是要寫出ＣＳＳ 文件的目錄名，然后是Ｓａｓｓ 源文件的目錄名。完成了這些后編譯工具，用戶就可以正常地編譯包含Ｃｏｍｐａｓｓ 擴展的代碼的Ｓａｓｓ文件。

３ 結(jié)束語

基于Ｂｏｏｔｓｔｒａｐ 的響應(yīng)式網(wǎng)站雖然存在一些問題，

但這不能否定以Ｂｏｏｔｓｔｒａｐ 為基礎(chǔ)的響應(yīng)式網(wǎng)站是當(dāng)前優(yōu)化設(shè)計的主流方向。在使用Ｂｏｏｔｓｔｒａｐ 框架進行響應(yīng)式設(shè)計時，還需要考慮更多的互動因素，因為這是最直觀的用戶體驗。設(shè)計者在設(shè)計的時候，要充分考慮到各個模塊之間的反應(yīng)，如此一來才能讓網(wǎng)站的用戶體驗更好。

參考文獻：

［１］ 原方亮，劉占方．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 響應(yīng)式網(wǎng)站優(yōu)化設(shè)計與實現(xiàn)［Ｊ］．?dāng)?shù)碼世界，２０１８（８）：１７７．

［２］ 原方亮．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 響應(yīng)式網(wǎng)站開發(fā)技術(shù)研究［Ｄ］．鄭州：鄭州大學(xué)，２０１８．

［３］ 孫麗英．響應(yīng)式設(shè)計技術(shù)在視頻網(wǎng)站開發(fā)中的應(yīng)用策略［Ｊ］．電腦編程技巧與維護，２０２２（４）：１４１?１４３＋１５２．

［４］ 陶瑜，龔花蘭，郭自飛．基于Ｂｏｏｔｓｔｒａｐ 的響應(yīng)式高校招生網(wǎng)站的開發(fā)［Ｊ］．沙洲職業(yè)工學(xué)院學(xué)報，２０２０，２３（３）：５?７．

［５］ 郭欣桐，于洪． 基于雨課堂的在線教學(xué)模式實踐與探索———以響應(yīng)式布局網(wǎng)站開發(fā)為例［Ｊ］．科技視界，２０２２（３）：７５?７７．［６］ 張濤，么偉偉． 響應(yīng)式設(shè)計技術(shù)在視頻網(wǎng)站中的應(yīng)用［Ｊ］．現(xiàn)代工業(yè)經(jīng)濟和信息化，２０２２，１２（４）：１３３?１３４＋１３６．

作者簡介：陳彩燕（１９９２—），本科，研究方向：Ｗｅｂ 前端開發(fā)、Ｊａｖａ 程序設(shè)計、Ｊ２ＥＥ 企業(yè)級開發(fā)。