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

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

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

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

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

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

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

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

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

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

（２）豐富且功能強(qiáng)大的組件和插件。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

２．１．１ 部分樣式

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

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

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

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

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

因?yàn)樵谑謾C(jī)端上有一個(gè)流量問題，所以減少ｈｔｔｐ 的請(qǐng)求也可以為用戶節(jié)約流量。

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

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

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

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

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

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

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

２．２．２ ＰＣ 端的ｈｏｖｅｒ 在移動(dòng)端的處理

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

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

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

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

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

２．２．５ Ｃｏｍｐａｓｓ 擴(kuò)展庫(kù)的使用問題

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

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

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

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

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

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

３ 結(jié)束語(yǔ)

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

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

參考文獻(xiàn)：

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

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

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

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

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

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