摘 要：隨著移動智能設(shè)備的廣泛普及，各種屏幕尺寸的設(shè)備層出不窮，網(wǎng)頁設(shè)計面臨著適應(yīng)不同分辨率設(shè)備要求的挑戰(zhàn)。而響應(yīng)式網(wǎng)站設(shè)計能夠靈活適應(yīng)不同終端的屏幕尺寸，展示出合理的頁面布局，真正實現(xiàn)了“一次開發(fā)、多處適用”的目標(biāo)。以“甜點網(wǎng)站”為例，從開發(fā)環(huán)境及相關(guān)技術(shù)、網(wǎng)站規(guī)劃與設(shè)計、數(shù)據(jù)庫設(shè)計、網(wǎng)站測試與發(fā)布幾個方面進(jìn)行闡述，并對響應(yīng)式導(dǎo)航、Bootstrap柵格系統(tǒng)、輪播插件的使用等方面進(jìn)行詳細(xì)論述。采用Bootstrap框架、HTML5和PHP技術(shù)，實現(xiàn)了多終端屏幕適配的甜點網(wǎng)站，大大提升了用戶體驗，提高了網(wǎng)站的吸引力和競爭力。

關(guān)鍵詞：響應(yīng)式布局；Bootstrap；甜點網(wǎng)站

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2024）15-0088-06

Research on the Application of Bootstrap Responsive Design in the Dessert Website

ZHANG Yuehua

（Shandong Huayu University of Technology， Dezhou 253034， China）

Abstract： With the widespread popularity of mobile intelligent devices， various screen sizes of devices are emerging one after another. The challenge of displaying Web pages on devices with different resolutions is a major challenge faced by Web design. Responsive website design can adapt to the screen size of different terminals， display a reasonable page layout， and truly achieve the goal of single development and multiple applicability. Taking "Dessert Website" as an example， this paper elaborates on several aspects such as development environment and related technologies， website planning and design， database design， website testing and publishing， and elaborates on the use of responsive navigation， Bootstrap grid system， and carousel plugins. By using the Bootstrap framework， HTML5， and PHP technology， a dessert website with multi terminal screen adaptation has been implemented， greatly improving the user experience， enhancing the website's attractiveness and competitiveness.

Keywords： responsive layout; Bootstrap; dessert website

0 引 言

在當(dāng)今互聯(lián)網(wǎng)時代，隨著移動設(shè)備的普及和網(wǎng)絡(luò)技術(shù)的發(fā)展，人們對網(wǎng)站的瀏覽需求呈現(xiàn)出多樣化的特點。傳統(tǒng)的固定布局網(wǎng)站已無法滿足用戶在不同設(shè)備上獲得良好瀏覽體驗的要求。因此，響應(yīng)式網(wǎng)頁設(shè)計應(yīng)運而生，成為現(xiàn)代網(wǎng)站開發(fā)的重要方向。Bootstrap作為一種流行的前端開發(fā)框架，提供了豐富的組件、靈活的布局和強大的定制能力，為響應(yīng)式網(wǎng)站的開發(fā)提供了強大的支持。Bootstrap框架具有易于使用、快速開發(fā)和跨平臺兼容等優(yōu)點，使得開發(fā)者能夠更加高效地構(gòu)建出美觀、易用且具有良好用戶體驗的網(wǎng)站。

甜點作為一種美味的食品，深受廣大消費者的喜愛。隨著甜點市場的不斷擴(kuò)大，甜點網(wǎng)站的數(shù)量也日益增多。為了在競爭激烈的市場中脫穎而出，甜點網(wǎng)站需要具備良好的用戶體驗和美觀的界面設(shè)計。本文使用Bootstrap框架結(jié)合PHP技術(shù)構(gòu)建響應(yīng)式甜點網(wǎng)站，以自適應(yīng)不同的終端，呈現(xiàn)不同樣式的頁面布局，提高用戶的瀏覽體驗。

1 甜品網(wǎng)站規(guī)劃

1.1 甜品網(wǎng)站需求分析

隨著科技的發(fā)展，互聯(lián)網(wǎng)已經(jīng)成為人們生活中不可或缺的一部分，電子商務(wù)也變得日益成熟。越來越多的商家建立了在線商店，為人們的生活帶來了極大便利。電子商務(wù)的前端平臺在商業(yè)活動中扮演著舉足輕重的角色。甜點網(wǎng)站的功能圖如圖1所示。

1.2 開發(fā)環(huán)境及相關(guān)技術(shù)

HBuilder是DCloud推出的一款集成開發(fā)環(huán)境（IDE），主要用于開發(fā)基于HTML5的移動應(yīng)用程序。它支持多種前端開發(fā)語言和框架，包括HTML、CSS、JavaScript等。HBuilder提供了豐富的插件和工具，可以幫助開發(fā)者快速構(gòu)建跨平臺的移動應(yīng)用程序，包括iOS和Android平臺[1]。它還提供了模擬器和調(diào)試工具，方便開發(fā)者進(jìn)行應(yīng)用程序的測試和調(diào)試?？偟膩碚f，HBuilder是一款功能強大的前端開發(fā)工具，適用于移動應(yīng)用程序的開發(fā)和調(diào)試。

Bootstrap是由Twitter推出的前端開源工具包，基于HTML、CSS、JavaScript等前端技術(shù)。Bootstrap中預(yù)定義了一套CSS樣式，和與樣式對應(yīng)的jQuery（jQuery是一個快速、小巧、功能豐富的JavaScript庫）代碼，應(yīng)用時只需提供固定的HTML結(jié)構(gòu)，添加Bootstrap中提供的class名稱，就可以完成指定效果的實現(xiàn)[2]。Bootstrap可以快速構(gòu)建出非常美觀的前端界面，而且占用資源非常小。

PHP（Hypertext Preprocessor）語言是一種完全開源的動態(tài)網(wǎng)站開發(fā)語言，是一種在服務(wù)器端執(zhí)行，并嵌入到HTML文檔中的腳本語言[3]，也可以與多種數(shù)據(jù)庫配合使用，適用于多種服務(wù)器端編程。PHP經(jīng)過多次改進(jìn)，已成為當(dāng)今流行的服務(wù)器端Web程序開發(fā)語言。

MySQL是一個小型的關(guān)系數(shù)據(jù)庫管理系統(tǒng)，相比較于其他的一些大型數(shù)據(jù)庫管理系統(tǒng)，MySQL的規(guī)模較小且功能有限，但是它也有許多優(yōu)點，如體積占比小、運行速度快、成本低[4]，適用于各種規(guī)模的應(yīng)用程序和網(wǎng)站。由于其開源性和穩(wěn)定性，MySQL已經(jīng)成為許多開發(fā)者和組織的首選數(shù)據(jù)庫系統(tǒng)。

Apache服務(wù)器是一款功能強大、穩(wěn)定可靠、靈活且易于擴(kuò)展的Web服務(wù)器軟件，適用于各種規(guī)模的網(wǎng)站和應(yīng)用程序。由于其開源性和穩(wěn)定性，Apache服務(wù)器已經(jīng)成為許多開發(fā)者和組織的首選Web服務(wù)器軟件。

1.3 框架設(shè)計

通過簡潔的排版和精美的甜點圖片，突出甜點的精髓，營造出甜點網(wǎng)站的氛圍。網(wǎng)站主要分為header（頭部）、商品搜索、熱銷產(chǎn)品、特色推薦（生日蛋糕、飲品、各種糕點）、合作商家、footer（腳部），響應(yīng)式導(dǎo)航條位于頭部區(qū)域，框架圖如圖2所示。

1.4 數(shù)據(jù)庫連接與設(shè)計

1.4.1 數(shù)據(jù)庫設(shè)計

在電商網(wǎng)站中用戶需要從大量產(chǎn)品信息中找到需要的產(chǎn)品，進(jìn)行產(chǎn)品搜索是一種非?？旖莘椒?，可以根據(jù)某些條件（如甜點名稱）進(jìn)行快速查找，僅把符合查詢條件的數(shù)據(jù)從數(shù)據(jù)表中查詢出來并輸出到頁面中。在MySQL數(shù)據(jù)庫中創(chuàng)建一張產(chǎn)品信息表，用于保存產(chǎn)品信息，通常有ID、產(chǎn)品名稱、產(chǎn)品分類、價格等，表結(jié)構(gòu)如表1所示。

1.4.2 連接數(shù)據(jù)庫

數(shù)據(jù)庫鏈接：

Mysql_connect（‘localhost’，’root’，’root’）;

Mysql_connect（）函數(shù)用于建立數(shù)據(jù)庫連接，其中包含3個主要參數(shù)。第一個參數(shù)表示要連接的數(shù)據(jù)庫地址，第二個參數(shù)表示操作數(shù)據(jù)庫的用戶名，第三個參數(shù)表示操作數(shù)據(jù)庫的用戶密碼[5]。

選擇數(shù)據(jù)庫：

Mysql_query（‘ use `foot`’）;

2 甜點網(wǎng)站設(shè)計與實現(xiàn)

2.1 頁面描述

本網(wǎng)站是一個集美觀、功能與實用性于一體的甜點銷售網(wǎng)站，它利用Bootstrap框架實現(xiàn)了響應(yīng)式設(shè)計，確保網(wǎng)站在各種設(shè)備上的良好用戶體驗。整個網(wǎng)站的設(shè)計風(fēng)格以簡明為主，色彩搭配上以簡潔的白色和西瓜紅色為主調(diào)，營造出柔和、整潔的視覺效果。頁面布局上采用扁平化的設(shè)計理念，減少不必要的裝飾元素，突出內(nèi)容的重要性。這種設(shè)計風(fēng)格既符合現(xiàn)代審美趨勢，又能為用戶提供一個直觀、易用的瀏覽體驗。

采用Bootstrap響應(yīng)式框架布局頁面，設(shè)置有導(dǎo)航欄、產(chǎn)品搜索、熱銷產(chǎn)品、特色產(chǎn)品推薦、合作商家等欄目，幫助用戶快速瀏覽、查找商品。網(wǎng)站設(shè)計能夠自適應(yīng)各種不同尺寸終端（如各種型號的手機、平板、電腦等）的顯示，并且與主流瀏覽器（如IE瀏覽器、火狐瀏覽器、谷歌瀏覽器等）相兼容[6]。

2.2 創(chuàng)建目錄結(jié)構(gòu)

根據(jù)前面對甜點網(wǎng)站的分析與設(shè)計，創(chuàng)建如圖3所示的網(wǎng)站目錄結(jié)構(gòu)：

1）food為項目名稱，里邊包含lib、css、images文件目錄，以及index.html項目入口文件。

2）lib文件目錄里存放從Bootstrap官網(wǎng)下載到本地的預(yù)編譯的Bootstrap相關(guān)文件，如bootstrap.min.css和bootstrap.min.js文件等，以及字體圖標(biāo)文件夾foots。

3）css文件目錄里存放spiceFood.css，用于設(shè)置自定義樣式。

4）images文件目錄里存放項目中用到的圖片[7]。

2.3 網(wǎng)站主界面的實現(xiàn)

2.3.1 網(wǎng)頁頭部模塊

導(dǎo)航部分使用Bootstrap導(dǎo)航欄完成，Bootstrap導(dǎo)航欄是在網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件，它在移動設(shè)備上可以折疊（并且可開可關(guān)），且在視口寬度增加時逐漸變?yōu)樗秸归_模式，縮小瀏覽器窗口后，菜單被隱藏，代替出現(xiàn)的是一個漢堡按鈕，單擊漢堡按鈕顯示被隱藏的菜單的下拉列表。需要覆蓋Bootstrap導(dǎo)航欄的默認(rèn)樣式，使用類設(shè)置導(dǎo)航菜單的樣式，例如鼠標(biāo)懸停換背景顏色和文字變色的效果等。

頭部導(dǎo)航PC端頁面效果如圖4所示。

瀏覽器窗口縮小至小屏幕（< 992px）時，LOGO換行效果如圖5所示。

瀏覽器窗口縮小至小屏幕（< 768px）時，出現(xiàn)漢堡按鈕，如果6所示。

功能關(guān)鍵代碼：

1）文檔兼容（compatible）模式聲明，表示使用IE瀏覽器的最新渲染模式。代碼為：

<meta http-equiv="x-ua-compatible" content="IE=edge">

2）設(shè)置確定視口寬度，device-width表示采用設(shè)備寬度，初始縮放1.0。代碼為：

<meta name="viewport" content="width=device-width， initial-scale=1.0">

3）引入Bootstrap。代碼為：

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

4）媒體查詢：當(dāng)視口小于970px時，導(dǎo)航菜單字體變小，避免了換行的問題。代碼為：

@media （max-width： 970px） {

.navbar-default .navbar-nav>li a {

font-size： 1.1em;}}

5）當(dāng)進(jìn)入最小設(shè)備時，導(dǎo)航條將隱藏，顯示“漢堡按鈕”，點擊時可以切面顯示導(dǎo)航條隱藏的信息。代碼為：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">

<span class="sr-only">漢堡按鈕</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

2.3.2 商品搜索模塊

商品搜索模塊主要由通欄背景圖片和中間表單區(qū)域構(gòu)成，表單域設(shè)置白色透明背景，通過.btn類來修改Bootstrap按鈕的默認(rèn)樣式，通過媒體查詢，在屏幕小于768px時，讓表單外層的<div>在小屏幕時擁有足夠的寬度來顯示完整的表單，結(jié)合PHP技術(shù)實現(xiàn)商品的搜索功能。功能關(guān)鍵代碼為：

if（isset（$_GET['keyword']））{

$keyword=$_GET['keyword'];

$where = "where name like '%$keyword%'";

}

2.3.3 熱銷產(chǎn)品模塊

本模塊主要采用響應(yīng)式柵格系統(tǒng)，柵格系統(tǒng)是Bootstrap中用于響應(yīng)式布局的重要工具，可以讓用戶在不同尺寸的設(shè)備上看到不同的布局效果，旨在實現(xiàn)頁面元素的自適應(yīng)排版。實現(xiàn)原理非常簡單，僅僅是通過定義容器大小，平分12份（也有平分成24份或32份，但12份是最常見的），再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢，就制作出了強大的響應(yīng)式網(wǎng)格系統(tǒng)[8]。通過在HTML元素上添加相應(yīng)的類名，可以讓元素占據(jù)指定數(shù)量的列數(shù)，從而實現(xiàn)靈活的布局效果。柵格系統(tǒng)的基本原理是將頁面布局劃分為一系列的行和列，然后通過調(diào)整元素在不同屏幕尺寸下的寬度和列數(shù)，實現(xiàn)響應(yīng)式布局。

熱銷部分PC端頁面效果如圖7所示。

瀏覽器窗口縮小至小屏幕（< 992px）或超小屏幕（< 768px）時，效果如圖8所示。

2.3.4 特色推薦模塊

本模塊主要使用Bootstrap的標(biāo)簽頁，標(biāo)簽頁是一種用于創(chuàng)建標(biāo)簽式導(dǎo)航的插件，它基于Bootstrap框架開發(fā)，提供了豐富的樣式和功能。通過使用Bootstrap標(biāo)簽頁，可以輕松地創(chuàng)建具有美觀外觀和良好用戶體驗的標(biāo)簽式導(dǎo)航界面。標(biāo)簽頁采用響應(yīng)式設(shè)計，能夠自適應(yīng)不同屏幕尺寸和設(shè)備類型，為用戶提供一致的瀏覽體驗。使用非常簡單，只需要引入相應(yīng)的CSS和JavaScript文件，然后在HTML中添加相應(yīng)的標(biāo)簽和類名即可。

Bootstrap制作膠囊標(biāo)簽頁主要步驟如下：

1）一個完整的標(biāo)簽頁分為頁頭選項卡和內(nèi)容兩部分。

2）頁頭<ul>標(biāo)簽，在<ul>中添加.nav和.nav-tabs類，應(yīng)用Bootstrap標(biāo)簽頁樣式；添加.nav和.nav-pills類應(yīng)用膠囊標(biāo)簽樣式。需要幾個標(biāo)簽項就添加幾個<li>標(biāo)簽。

3）<li>標(biāo)簽中添加<a>標(biāo)簽，<a>標(biāo)簽的href的值直接跟標(biāo)簽頁下面的內(nèi)容<div>的id關(guān)聯(lián)，十分重要。

4）<a>標(biāo)簽中添加data-toggle=“tab”或data-toggle=“pill”。

特色推薦模塊PC端頁面效果如圖9所示。

瀏覽器窗口縮小至小屏幕（< 992px）或超小屏幕（< 768px）時，效果如圖10所示。

2.3.5 合作商家模塊

輪播圖一般包含三部分：圖片、計數(shù)器、控制器[9]。常用于網(wǎng)站首屏，以大幅圖像輪播展示，便于產(chǎn)品的推廣。Bootstrap的內(nèi)置輪播組件（Carousel）功能非常強大，是一種靈活的響應(yīng)式的向站點添加滑塊的方式。輪播的內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他想要放置的任何類型的內(nèi)容，使用該插件時必須引入bootstrap.js或壓縮版的bootstrap.min.js。通過以下設(shè)置可以實現(xiàn)輪播效果：

1）設(shè)計輪播容器。Carousel類設(shè)計輪播圖片的容器，并為該容器添加ID：

<div id="slidershow" class="carousel">

</div>

2）設(shè)計輪播計數(shù)器。輪播容器div.carousel的內(nèi)部添加輪播計算器.carousel-indicators類，其主要功能是顯示當(dāng)前圖片的播放順序（有幾張圖片就放置幾個li），一般采用有序列表來制作，該內(nèi)容放于輪播容器內(nèi)。

3）Carousel中通過.carousel-control類配合left和right來實現(xiàn)輪播控制器。其中l(wèi)eft表示向前播放，right表示向后播放。

2.3.6 網(wǎng)頁頁腳模塊

網(wǎng)站頁腳是每個網(wǎng)頁最底部的區(qū)塊，通常位于整個網(wǎng)站層級的最底端。設(shè)計中，頁腳保持簡潔清晰，避免過于擁擠或復(fù)雜。排版有序，元素間空間通透，易于閱讀。同時，注意與頁眉和主體內(nèi)容的協(xié)調(diào)統(tǒng)一，確保整個網(wǎng)站的視覺風(fēng)格一致。頁腳中包括版權(quán)信息、隱私政策、使用條款等，有助于保護(hù)網(wǎng)站的法律權(quán)益，提供聯(lián)系電話、公司地址、社交媒體鏈接等，方便用戶聯(lián)系。

頁腳網(wǎng)頁布局中，使用了Bootstrap的字體圖標(biāo)。首先進(jìn)入Font Awesome官網(wǎng)下載可縮放矢量字體圖標(biāo)，下載完畢后解壓。然后將字體文件fonts和css文件中的“font-awesome.min.css”拷貝到項目中。接下來在頁面引入font-awesome.min.css文件。最后頁面元素添加相應(yīng)的class，例如“<i class=”glyphicon glyphicon-phone-alt”>，會在頁面顯示相應(yīng)圖標(biāo)。

3 網(wǎng)站測試與發(fā)布

網(wǎng)站測試是指對網(wǎng)站進(jìn)行全面檢測，以確保網(wǎng)站在上線前的質(zhì)量、性能和安全性等方面達(dá)到要求。主要包括功能測試（檢查網(wǎng)站各項功能是否正常、是否符合需求，包括表單提交、按鈕點擊、頁面跳轉(zhuǎn)等）、兼容性測試（確保網(wǎng)站在不同瀏覽器、不同操作系統(tǒng)、不同設(shè)備如手機、平板電腦上都能正常顯示和運行）、代碼測試（檢查代碼是否符合規(guī)范、是否存在錯誤或潛在問題）、安全測試及性能測試等。

本設(shè)計在360瀏覽器下進(jìn)行測試，在不同視口下響應(yīng)式布局均能正常響應(yīng)，網(wǎng)頁顯示效果良好，如圖11所示。移動端在Chrome模擬器和平板電腦以及不同尺寸的手機上進(jìn)行測試能正常顯示[10]。

4 結(jié) 論

本文通過創(chuàng)建一個響應(yīng)式的甜點網(wǎng)站首頁，深入探討了Bootstrap中常用的樣式、組件和插件。重點運用了柵格系統(tǒng)、輪播圖、導(dǎo)航欄和布局容器等技術(shù)，展示了如何將理論知識應(yīng)用于實踐，構(gòu)建出一個既美觀又易用的響應(yīng)式網(wǎng)站。這個網(wǎng)站不僅滿足了基本的展示和銷售需求，還為用戶提供了出色的體驗，并具有良好的搜索引擎優(yōu)化效果。使用Bootstrap框架設(shè)計和實現(xiàn)響應(yīng)式甜點網(wǎng)站是一個既高效又可靠的選擇。通過本文的介紹，讀者可以深入了解響應(yīng)式設(shè)計的核心理念和技術(shù)實現(xiàn)，為其今后的網(wǎng)站開發(fā)工作提供有益的參考和幫助。

參考文獻(xiàn)：

[1] 徐誠.基于ACE后端管理和HBuilder移動應(yīng)用的光網(wǎng)絡(luò)智能驗收平臺設(shè)計及實現(xiàn) [D].南昌：南昌大學(xué)，2022.

[2] 黑馬程序員.響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+Bootstrap） [M].北京：人民郵電出版社，2020.

[3] 胡涵毅.基于PHP的校園資源共享平臺設(shè)計與實現(xiàn) [J].現(xiàn)代信息科技，2023，7（23）：1-5.

[4] 林龍健.基于PHP+MySQL的作業(yè)管理系統(tǒng)設(shè)計與實現(xiàn) [D].廣州：廣東工業(yè)大學(xué)，2019.

[5] 張曰花，陳紅娟，劉婷婷.基于HTML5+PHP技術(shù)的化妝品網(wǎng)站設(shè)計與實現(xiàn) [J].現(xiàn)代信息科技，2023，7（24）：33-36+40.

[6] 莊麗君.Bootstrap響應(yīng)式Web設(shè)計應(yīng)用研究——以玩具商城網(wǎng)站設(shè)計為例 [J].現(xiàn)代信息科技，2023，7（22）：96-99.

[7] 黑馬程序員.Bootstrap響應(yīng)式Web開發(fā) [M].北京：人民郵電出版社，2021.

[8] 張福帥.基于Bootstrap框架的報名系統(tǒng)設(shè)計與應(yīng)用 [J].電子技術(shù)與軟件工程，2022（22）：205-209.

[9] 江家龍.基于Bootstrap的響應(yīng)式餐飲網(wǎng)站設(shè)計與實現(xiàn) [J].現(xiàn)代信息科技，2021，5（7）：74-78.

[10] 鄔紫琴，盧詩怡，張妮.Bootstrap響應(yīng)式設(shè)計應(yīng)用研究——以大學(xué)生創(chuàng)業(yè)服務(wù)網(wǎng)為例 [J].南方農(nóng)機，2021，52（20）：134-136.

作者簡介：張曰花（1980—），女，漢族，山東德州人，副教授，本科，研究方向：計算機應(yīng)用。