基于Bootstrap的H5響應式網站優化設計與實現

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

關鍵詞：HTML5；CSS3；響應式網站設計與優化；Bootstrap

中圖法分類號：TP393 文獻標識碼：A

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

１ 關于Ｂｏｏｔｓｔｒａｐ 及響應式核心技術

１．１ Ｂｏｏｔｓｔｒａｐ 前端開發框架

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

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

（１）移動設備優先。

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

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

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

（３）靈活的響應式柵格系統。

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

１．２ 響應式網站概述

１．２．１ 響應式網站

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

１．２．２ 響應式的核心技術

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

（２）彈性布局。這種方法使得每個區塊的位置都有一個浮動的特征，設計者可以用百分數來代替固定的數值，如網頁寬度、圖片、文字等。由此，當頁面尺寸發生變化時，可以根據不同的版式進行調整。

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

１．３ 用于響應式網站的計算機語言

１．３．１ ＨＴＭＬ５ 超文本標語言

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

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

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

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

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

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

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

２ 響應式網站的布局優化和常見問題的解決

在響應式網站開發過程中可以進行部分優化。

２．１ 響應式布局的優化

２．１．１ 部分樣式

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

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

嵌入或導入的ＪａｖａＳｃｒｉｐｔ 應該盡可能地放置在網頁的最底層，因為瀏覽器是從上而下地呈現ＨＴＭＬ 文件，當網頁裝入ＪａｖａＳｃｒｉｐｔ 或ＪａｖａＳｃｒｉｐｔ 文件時，它就會停止，直到ＪａｖａＳｃｒｉｐｔ 完成，然后再進行下一步的操作。現在網絡上有大量的壓縮和解壓的工具，如果能把ＣＳＳ 和ＪａｖａＳｃｒｉｐｔ 壓縮到最小，就能最大限度地縮短裝入速度，當要調試時，用解壓工具來打開。如果使用Ｂｏｏｔｓｔｒａｐ 來打開網頁，要花費較長時間，那么很有可能是由于Ｂｏｏｔｓｔｒａｐ 在網上調用谷歌的資源，所以只要將所有的在線調用代碼設置為空即可解決這個問題。

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

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

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

２．１．４ 頁面實現逐次加載

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

同時，在需要的時候點擊鼠標，就可以下載相應的內容，這也是一種提升用戶體驗的方法。

２．２ 解決響應式布局中的常見問題

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

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

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

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

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

２．２．３ 彈出的模態框被遮罩遮住

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

２．２．４ 折疊的內容展開顯示滾動條

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

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

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

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

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

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

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

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

３ 結束語

基于Ｂｏｏｔｓｔｒａｐ 的響應式網站雖然存在一些問題，

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

參考文獻：

［１］ 原方亮，劉占方．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 響應式網站優化設計與實現［Ｊ］．數碼世界，２０１８（８）：１７７．

［２］ 原方亮．基于Ｂｏｏｔｓｔｒａｐ 的Ｈ５ 響應式網站開發技術研究［Ｄ］．鄭州：鄭州大學，２０１８．

［３］ 孫麗英．響應式設計技術在視頻網站開發中的應用策略［Ｊ］．電腦編程技巧與維護，２０２２（４）：１４１?１４３＋１５２．

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

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

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