Bootstrap響應式Web設計應用研究

收稿日期：2023-05-10

基金項目：低代碼平臺工程技術開發中心（2022GCZX009）

DOI：10.19850/j.cnki.2096-4706.2023.22.021

摘? 要：隨著5G網絡的發展和普及，各種智能設備層出不窮，人員紛紛開始使用移動設備來瀏覽網頁。如此這般，傳統網頁的設計模式已經不適用于當前多樣化的終端設備。而Bootstrap響應式設計技術的出現，順應了互聯網發展的需求，解決了用戶跨終端瀏覽網頁的問題，同時也為網頁設計人員簡化了設計流程，極大地提高了設計人員的工作效率。

關鍵詞：響應式Web設計；Bootstrap；網站設計

中圖分類號：TP311? 文獻標識碼：A? 文章編號：2096-4706（2023）22-0096-04

Research on the Application of Bootstrap Responsive Web Design

—Take Toy Mall Website Design as an Example

ZHUANG Lijun

（Guangdong Baiyun University， Guangzhou? 510450， China）

Abstract： With the development and popularization of 5G networks， various intelligent devices are emerging one after another， and people are starting to use mobile devices to browse web pages. In this way， the traditional design pattern of web pages is no longer applicable to the current diverse terminal devices. The emergence of Bootstrap responsive design technology conforms to the needs of internet development， solves the problem of users browsing web pages across terminals， and simplifies the design process for web designers， greatly improving their work efficiency.

Keywords： responsive Web design; Bootstrap; website design

0? 引? 言

隨著移動互聯網技術的快速發展與普及，以智能手機為代表的移動設備越來越普遍，移動設備信號覆蓋廣、操作簡單、攜帶方便，已經成為人們日常工作和生活的必需品，其應用市場不斷擴大，越來越受到人們的關注，因此開發移動應用變得愈發重要。

Bootstrap是由Twitter公司設計師Mark Otto和Jacob Thornton合作開發的，用于快速開發響應式布局、移動設備優先的Web項目。Bootstrap基于HTML、CSS和JavaScript，具有較好的靈活性和可擴展性，使得Web開發變得更加便捷。相較于傳統原生開發方式，這種開發方式的維護成本更低、開發周期更短，開發完成后可以應用于眾多平臺。

1? 響應式Web設計概述

響應式Web設計[1]是順應現代網頁設計潮流的一種新型網頁設計技術。運用這種技術設計的網站，無論用戶在哪種終端上瀏覽，都會呈現出最佳的頁面效果。真正實現了一次開發，各處可用。響應式Web設計之所以符合現代網頁設計的理念，是因為它不僅是一種跨終端的網頁開發技術，還顛覆了之前的網頁設計思想。

1.1? 響應式Web設計的設計理念

從設計理念上看，響應式Web設計是能夠針對任意網頁設備對網頁內容進行完美布局的一種顯示機制。與傳統的Web設計方式相比，具有以下創新點：

1）一次設計開發，適用于多種設備。隨著移動設備使用群體的不斷壯大，各式各樣的手機、iPad等移動設備不斷推陳出新。如果針對每一種尺寸的設備都要開發一個網站，不僅浪費人力、物力，更是網絡資源的巨大消耗。為此要尋找到一個成本、設計、性能的平衡點，響應式Web設計即是最好的選擇。它可以做到一處設計，響應多種屏幕設備。

2）移動優先。傳統網站大多是先設計PC端，再根據PC端的網頁及功能設計移動端。這種方法已經無法適應現代網站開發的需求。Bootstrap響應式Web設計[2]，其最初的設計目標就是移動設備優先。移動設備的屏幕小、計算資源少，所以我們先開發移動端，再開發PC端，可以使開發人員在計算資源更少的設備中設計網站功能。這樣，既可以使網站的功能更加核心和簡潔，又有助于設計出性能更優的Web項目。

1.2? 用戶體驗

用戶體驗在網站運營中占有舉足輕重的地位，用戶體驗運營的目標就是為用戶提供優良的網站使用體驗，從而提升用戶的滿意度，以加強用戶與網站的黏性，提高網站的訪問量。

用戶體驗主要包括用戶視聽上的舒適性、操作上的便捷性、網頁界面的吸引性、網站的安全性等。

響應式Web設計會根據用戶的行為及其需求、屏幕尺寸等做出響應。網站可以平滑地適應不同的屏幕尺寸，尤其是適配于移動端查看。因此，它增加了手機、平板電腦等小型設備用戶的覆蓋面。它可以將最優的效果呈現在不同尺寸的設備終端，讓用戶在感官和交互等方面獲得最佳體驗。

1.3? 技術層面

在技術層面，Bootstrap響應式Web設計基于HTML5、CSS、JavaScript，Bootstrap響應式Web設計涵蓋如下技術：

1）運用HTML5+CSS3技術進行網頁的基本設計。

2）媒體查詢。識別媒體類型、屏幕寬度、像素比等物理要素。通過識別瀏覽器的相關要素（比如顯示設備的寬度、像素、方向），為同一標記聲明不同的樣式。

3）流式布局（Fluid Layout）。實現在不同屏幕分辨率的終端上瀏覽網頁時有不同的布局展示。

4）響應式柵格系統（Responsive Fluid Grid）。依賴于媒體查詢，根據不同的屏幕大小進行適當調整。

5）彈性圖片。是指不給圖片設計固定的尺寸，而是通過設置其相關屬性，讓圖片大小自動適應屏幕大小。

2? Bootstrap

Bootstrap[3]是基于移動端的發展而誕生的，它利用響應式Web開發技術，實現了頁面同時兼容PC端和移動端。通過響應式設計可使用戶在手機、平板電腦等多種設備上都能獲得良好的網站瀏覽、閱讀體驗。

2.1? Bootstrap的特點

采用Bootstrap框架[4]并結合HTML、CSS和JavaScript技術，可以設計出十分優雅的網頁，且其所占資源非常小。Bootstrap是一款功能強大的前端開發工具，有如下特色：

1）響應式Web設計。Bootstrap具備完整的響應式特點，它提供的各種組件都能自適應同尺寸的終端設備；Bootstrap還擁有完備的框架結構，使得項目開發工作變得更加便捷，大大提高了網站開發的效率。

2）移動設備優先。從Bootstrap 3版本開始，Bootstrap開發網站的目標就是移動設備優先。

3）瀏覽器支持。目前大部分的主流媒體都支持Bootstrap技術，包括IE、Firefox、Chrome、Safari等。

4）容易上手。只需具備HTML、CSS和JavaScript的基礎知識即可開啟Bootstrap的學習。

5）技術成熟。Bootstrap框架技術已發展得比較成熟。它不斷適應Web技術的發展，在原有的基礎上進行更新、迭代，在很多項目中得到了廣泛的使用。

6）豐富的組件及插件[4]。Bootstrap提供大量的Web組件和插件，如導航、下拉菜單、警告框、輪播等。使用這些組件可以快速搭建一個功能完備的網站，開發人員還可以根據實際需要進行組件和插件的定制。

2.2? Bootstrap的組成

Bootstrap預定了一套CSS樣式庫和一套對應的JavaScript代碼[5]，在使用時只需提供基本的HTML結構，并添加Bootstrap預先提供的class名稱，就可以實現指定的效果。主要包括以下內容：

1）頁面布局。Bootstrap提供有網格系統、響應式布局，適應各種設備。

2）Web組件。Bootstrap包含十幾個可重用的組件。

3）jQuery插件。這些插件為Bootstrap中的組件賦予了活力，可以幫助開發者實現與用戶交互的功能。

4）動態樣式語言——LESS。基于LESS，可以定制Bootstrap的組件、LESS變量和jQuery插件來得到您自己的版本。

3? Bootstrap響應式設計的運用

3.1? 網站建設流程

網站建設[6]由網站定位、需求分析開始，對網站進行整體規劃，收集相關的資料和素材，其流程如圖1所示。

3.2? 玩具商城網站的需求分析

商城的主要受眾群體就是那些想要購買玩具的人群，包括給孩子購買玩具的父母、自己購買玩具的青少年等。挑選玩具、向客服人員咨詢、通過商場進行購買，這些服務也是整個商城最為主要的服務項目。其次就是售后服務等的完善，以為后續的購買服務打下良好的基礎。

3.3? 玩具商城網站的整體規劃

本玩具商城網站包括玩具商城首頁、商品分類、最新商品、商品查詢、訂單管理、用戶登錄以及系統管理等各項內容。網站功能結構如圖2所示。

3.4? 玩具商城網站的設計與實現

3.4.1? 內容設計

網站由一系列Web頁面和相關資源組成，要對這些頁面和資源進行一定的分層設計和組織，使得這些內容被劃分為清晰合理的層次，這樣才能構建出一個結構優良的網站。

3.4.2? 整體版面風格設計

玩具網站的整體風格以簡明、活潑、童趣為主，主界面的內容豐富但不繁雜，既能突出網站特色達到吸引用戶的目的，又能滿足用戶的需求，讓用戶獲得完美的使用體驗感。

3.4.3? 頁面布局設計

采用Bootstrap響應式框架布局頁面，在首頁設置導航欄、下拉菜單、輪播圖等項目，幫助用戶快速導航或瀏覽、查找商品。網站設計能實現自適應各種不同尺寸終端（比如手機、平板電腦、PC機、寬屏臺式電腦等）的顯示，并且與主流瀏覽器（如IE瀏覽器、火狐瀏覽器、谷歌瀏覽器等）相兼容。

3.4.4? 創建玩具商城網站的目錄結構

根據前面對玩具商城網站的分析與設計，創建如圖3所示的網站目錄結構：

1）Toystore為本玩具商城網站的名稱。

2）bootstrap文件目錄中存放從Bootstrap官網下載到本地的預編譯Bootstrap的相關文件。

3）css文件目錄中存放style.css，用于設置自定義樣式即玩具商城網站中頁面所使用的CSS樣式文件。

4）images文件目錄中存放玩具商城網站中用到的相關圖片素材。

5）index.html為玩具商城網站的主頁。

3.4.5? 玩具商城網站主界面的實現

在主界面中，創建Logo與站內搜索框、導航欄、輪播圖。其中，Logo與站內搜索框這一行分為兩個部分，在小屏及以下設備中各占一半。在中屏及以上設備中，Logo占網格系統的5份，站內搜索框占網格系統的7份。創建Logo與站內搜索框布局代碼如下：