響應(yīng)式布局網(wǎng)站的設(shè)計與實現(xiàn)
2024-12-05 00:00:00王蓓蓓
現(xiàn)代信息科技 2024年20期
摘 要：在傳統(tǒng)網(wǎng)頁設(shè)計與開發(fā)中，存在不同的設(shè)備終端需設(shè)計制作不同版本的局限以及PC端設(shè)計的網(wǎng)頁在移動設(shè)備屏幕上無法完整顯示的問題，為此文章對目前流行的前端Bootstrap框架技術(shù)進(jìn)行分析研究，基于學(xué)校已有網(wǎng)站群管理系統(tǒng)，設(shè)計承德醫(yī)學(xué)院教育技術(shù)中心網(wǎng)站，實現(xiàn)了一個能夠兼容各個終端需求的響應(yīng)式網(wǎng)站。文章詳細(xì)介紹了Bootstrap框架的柵格系統(tǒng)及導(dǎo)航條、縮略圖、面板組件和響應(yīng)式圖片插件在網(wǎng)站制作中的應(yīng)用，并引入制作網(wǎng)站的部分代碼以分析響應(yīng)式布局網(wǎng)站實現(xiàn)的過程。
關(guān)鍵詞：Bootstrap框架；CMS網(wǎng)站內(nèi)容管理系統(tǒng)；網(wǎng)站；層疊樣式表；響應(yīng)式設(shè)計
中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2024）20-0043-05
Design and Implementation of Responsive Layout Website
WANG Beibei
（Educational Technology Center， Chengde Medical University， Chengde 067000， China）
Abstract： In the traditional webpage design and development， there are problems that different versions need to be designed and produced for different device terminals and the webpages designed for PC terminal cannot be fully displayed on the screen of mobile devices. Therefore， this paper analyzes and studies the currently popular front-end Bootstrap framework technology. Based on the existing website group Content Management System of the college， the website of the education technology center of Chengde Medical University is designed， and a responsive website that can be compatible with each terminal demand is realized. This paper introduces in detail the grid system of Bootstrap framework as well as the application of navigation bars， thumbnails， panel components， and responsive image plug-ins in the application of website production. And it introduces part of the code of website production to analyze the process of implementing responsive layout website.
Keywords： Bootstrap framework; CMS; website; CSS; responsive design
0 引 言
2024年3月22日，中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）在京發(fā)布第53次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》（以下簡稱《報告》）?！秷蟾妗凤@示，截至2023年12月，我國網(wǎng)民規(guī)模達(dá)10.92億人[1]。上網(wǎng)終端設(shè)備使用更加多元（手機、臺式電腦、筆記本電腦、電視和平板電腦），使用手機上網(wǎng)的比例達(dá)99.7%，手機是上網(wǎng)的最主要設(shè)備。移動端網(wǎng)頁使用量逐年提升。響應(yīng)式網(wǎng)頁設(shè)計是指在網(wǎng)頁設(shè)計與開發(fā)時，根據(jù)用戶設(shè)備環(huán)境和行為習(xí)慣進(jìn)行相應(yīng)的調(diào)整，同一個網(wǎng)頁能夠自適應(yīng)多個終端設(shè)備，而不是為每個終端分別設(shè)計特定的版本[2]。為適應(yīng)用戶上網(wǎng)終端多元化瀏覽網(wǎng)站的需求，結(jié)合學(xué)?，F(xiàn)有網(wǎng)站群管理系統(tǒng)[3]，應(yīng)用響應(yīng)式布局技術(shù)尤其是Bootstrap框架技術(shù)設(shè)計二級部門網(wǎng)站并調(diào)試上線運行對完善學(xué)校網(wǎng)站群管理系統(tǒng)內(nèi)各二級部門網(wǎng)站具有重要意義。
1 前端框架Boostrap選型
Bootstrap是目前流行的高效前端Web開發(fā)工具。它是以超文本標(biāo)記語言（HyperText Markup Language， HTML）、層疊樣式表（Cascading Style Sheets， CSS）、JavaScript為基礎(chǔ)發(fā)展而來的用于開發(fā)響應(yīng)式布局、移動設(shè)備優(yōu)先的Web項目。在Bootstrap框架文件中，預(yù)置了bootstrap.min.css和bootstrap.min.js文件。在網(wǎng)頁代碼編寫時，需要在HTML文檔結(jié)構(gòu)的<head>標(biāo)簽間通過<link>標(biāo)簽引入文件bootstrap.min.css，然后在<scipt>標(biāo)簽間定義引入文件bootstrap.min.js，最后在網(wǎng)頁元素的class類名稱中套用Bootstrap全局類，以達(dá)到預(yù)期的網(wǎng)頁開發(fā)效果[4]。
根據(jù)Bootstrap中文網(wǎng)的信息，Bootstrap v3支持IE8+瀏覽器；Bootstrap v4支持IE10+瀏覽器而Bootstrap v5則不再支持IE瀏覽器[5]?？紤]更廣泛的用戶瀏覽需求，選擇了支持更低版本IE瀏覽器的Bootstrap v3框架。
這三個版本的另一個區(qū)別在于是否依賴jQuery，Bootstrap v3依賴jQuery；而v4、v5版本均不依賴jQuery。jQuery是一個輕量級的JavaScript框架。jQuery的文檔豐富，并不復(fù)雜，新版本出現(xiàn)就能很快流行。同時，jQuery有幾千種豐富多彩的插件，大量有趣的擴(kuò)展和出色的社區(qū)支持[6]。
v4v5版本支持Flexbox布局，而v3版本不支持。Flexbox布局被稱為彈性布局，它是css3中新增的規(guī)范，支持主流瀏覽器，但不支持IE9及以下版本。本項目考慮IE8+瀏覽器用戶的瀏覽需求，仍然選擇使用Bootstrap v3框架。
2 Bootstrap框架的核心——柵格系統(tǒng)
Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，網(wǎng)站的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
柵格系統(tǒng)工作原理：行（row）必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補（padding）。通過行（row）在水平方向創(chuàng)建一組列（column）。網(wǎng)站內(nèi)容放置于列（column）內(nèi)，并且，只有列（column）是行（row）的直接子元素[7]。
以教育技術(shù)中心網(wǎng)站首頁的布局（圖1）為例，來看柵格系統(tǒng)的具體應(yīng)用。Bootstrap中文網(wǎng)中提供柵格參數(shù)表格，可以詳細(xì)查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。其中類前綴是比較常用的柵格參數(shù)，例如.col-xs-是超小屏幕（手機）的類前綴，.col-sm-是小屏幕（平板）的類前綴，.col-md-是中等屏幕（桌面顯示器）的類前綴，.col-lg-是大屏幕（大桌面顯示器）的類前綴。根據(jù)網(wǎng)頁設(shè)計布局圖，設(shè)置某個類前綴后面的數(shù)字，就能創(chuàng)建動態(tài)強大的網(wǎng)頁布局。
例如：教育技術(shù)中心網(wǎng)站首頁廣告位小圖標(biāo)的布局。設(shè)置.col-md-2意味著一個小圖標(biāo)在中等屏幕或桌面顯示器屏幕下占據(jù)一行的1/6，每行都是12列，6個小圖標(biāo)在中等屏幕下就會排列在一行。而在超小屏幕下不想讓6個小圖標(biāo)都堆疊在一起，就設(shè)置了.col-xs-4，意味著手機終端瀏覽網(wǎng)頁的時候，一個小圖標(biāo)占據(jù)一行的1/3，3個小圖標(biāo)在手機屏幕下就會排列在一行，如圖3、圖5所示。
其中，廣告位6個圖標(biāo)位置的網(wǎng)頁代碼如下：
<div class="row">
<！--beginunit name=廣告位 -->
廣告位
<！--endunit -->
</div>
根據(jù)Bootstrap框架的代碼規(guī)范，以一系列的行（row）和列（column）搭配組合出網(wǎng)頁的布局[8]。
3 Bootstrap框架組件、插件的應(yīng)用
Bootstrap組件包括字體圖標(biāo)、下拉菜單、按鈕、輸入框、導(dǎo)航、導(dǎo)航條、分頁、標(biāo)簽、徽章、巨幕、頁頭、縮略圖、警告框、進(jìn)度條、媒體對象、列表組、面板、響應(yīng)式特性的嵌入內(nèi)容等。在教育技術(shù)中心網(wǎng)站實例中，我們應(yīng)用了導(dǎo)航條、縮略圖和面板這3個組件以及響應(yīng)式圖片插件。下面按照網(wǎng)站首頁布局從上到下的順序詳細(xì)介紹。
3.1 導(dǎo)航條
導(dǎo)航條是在網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時逐漸變?yōu)樗秸归_模式。實例中直接使用<nav>元素，使Web項目開發(fā)者明確知道這是一個導(dǎo)航區(qū)域。值得注意的是導(dǎo)航條組件依賴JavaScript插件，如果JavaScript被禁用，并且視口（viewport）足夠窄，致使導(dǎo)航條折疊起來，導(dǎo)航條將不能被打開，.navbar-collapse內(nèi)所包含的內(nèi)容也將不可見[9]。實例的導(dǎo)航區(qū)域代碼如下：
<nav class="navbarnavbar-info"><div class="container-fluid"><div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon">menu</span></button>
<a class="navbar-brand" href="http：//etc.cdmc.edu.cn">承德醫(yī)學(xué)院教育技術(shù)中心</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="navnavbar-nav">
<li class="active">
<a href="http：//etc.cdmc.edu.cn">首頁</a></li>
<li><a href="地址1">黨建工作</a></li>
……
<li><a href="地址n">通知公告</a></li>
</ul></div><！--/.nav-collapse --></div><！--/.container-fluid --></nav>
其中<span class="navbar-toggler-icon">menu</span></button>是指當(dāng)水平導(dǎo)航條折疊后，顯示的按鈕樣式，默認(rèn)樣式是一個方形按鈕內(nèi)含三條橫線，這里做了個性化修改，將menu英文字符顯示在折疊后的導(dǎo)航按鈕上。
值得一提的是網(wǎng)站除了引入Bootstrap框架自帶的bootstrap.min.css文件外還引入個性化的index.css文件，里面通過增加.nav>li>a{position：relative;display： block;color：#31708f;}.nav>li>a：hover {color：#0066FF;}代碼對Bootstrap框架默認(rèn)的導(dǎo)航條樣式做了簡單修改，即修改了導(dǎo)航條字體顏色及鼠標(biāo)經(jīng)過時的字體顏色（比默認(rèn)顏色更亮），以提高導(dǎo)航欄的醒目程度。
3.2 響應(yīng)式圖片插件
實例中輪播圖的位置使用的是Carousel插件。具體代碼為：
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<！-- Indicators --><ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li></ol>
<div class="carousel-inner" role="listbox">
<！--beginunit name=banner切換 -->
banner切換
<！--endunit -->
其中下面這段代碼：
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphiconglyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span></a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphiconglyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span></a></div></div>代表的是首頁輪播圖中左向、右向箭頭，這里用到是Glyphicon Halflings的字體圖標(biāo)。Glyphicon Halflings允許被Bootstrap免費使用。在我們的這個網(wǎng)站實例中，需要將../fonts/目錄內(nèi)的所有圖標(biāo)字體文件轉(zhuǎn)移到images文件夾下，同時修改bootstrap.min.css文件中的路徑，最后將images文件夾壓縮上傳到學(xué)校網(wǎng)站群管理系統(tǒng)，否則容易出現(xiàn)字體圖標(biāo)不能在瀏覽器中顯示的錯誤。
另外，自定義單元代碼中的嵌套代碼很關(guān)鍵，這里將<img>中的圖片寬度設(shè)置為100%，從而實現(xiàn)響應(yīng)式圖片效果（如圖2、圖3）。在Bootstrap版本3中，通過為圖片添加.img-responsive類可以讓圖片支持響應(yīng)式布局。在index.css文檔中，為文章正文內(nèi)的圖片添加article img{display：block;max-width：100%;height：auto;margin-left：auto;margin-right：auto;}代碼，為每一條信息內(nèi)的圖片設(shè)置響應(yīng)式的顯示效果。
3.3 縮略圖
如圖4、圖5所示，通過縮略圖組件擴(kuò)展Bootstrap的柵格系統(tǒng)，可以很容易地以網(wǎng)格的方式展示圖像、視頻、文本等內(nèi)容。
6個小圖片，在中等屏幕及大屏幕上在一行顯示，在平板及手機上每行顯示3個圖片。具體代碼為上文提到的廣告位6個圖標(biāo)嵌套代碼（寫在網(wǎng)站群管理系統(tǒng)內(nèi)即后臺）：
<div class="col-xs-4 col-md-2"><div class="thumbnail">
<imgsrc="圖片1在服務(wù)器上的地址">
<p class="text-center"><a href="https：//鏈接地址" target="_blank">校園一卡通</a></p>
</div></div>
<div class="col-xs-4 col-md-2"><div class="thumbnail">
<imgsrc="圖片2在服務(wù)器上的地址">
<p class="text-center"><a href="https：//鏈接地址" target="_blank">郵件系統(tǒng)</a></p>
</div></div>
……
<div class="col-xs-4 col-md-2">
<div class="thumbnail">
<imgsrc="圖片6在服務(wù)器上的地址">
<p class="text-center"><a href="/art/2018/7/6/art_901_37162.html" target="_blank">VPN服務(wù)</a></p></div></div>
.thumbnail是縮略圖的類名稱，<p></p>標(biāo)簽內(nèi)的內(nèi)容就是展示在縮略圖下面的一段帶鏈接的文字。縮略圖顧名思義，是將原圖以特定的尺寸、邊框展示在這里，而展示的圖片的大小、有無邊框、邊框的樣式都可以通過修改bootstrap.min.css文件來實現(xiàn)。
3.4 面板組件
實例中使用了帶標(biāo)題的面板組件，如圖6所示。
具體代碼如下：
<div class="row"><div class="col-md-7"><！--面板：通知公告--><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title"><！--beginunit name=通知公告n -->通知公告n<！--endunit --></h3></div><div class="panel-body"><！--beginunit name=通知公告list -->通知公告list<！--endunit --></div></div></div>
<div class="col-md-5"><！-- 面板：服務(wù)指南--><div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title"><！--beginunit name=服務(wù)指南t -->服務(wù)指南t<！--endunit --></h3></div><div class="panel-body"><！--beginunit name=服務(wù)指南list -->服務(wù)指南list<！--endunit --></div></div></div></div>
.panel就是面板組件的類名稱。.panle-title是面板的標(biāo)題，即本實例中顯示“通知公告”和“服務(wù)指南”的位置，通過使用html中的標(biāo)題標(biāo)簽來設(shè)置的字體大小，本例中的<h3></h3>標(biāo)簽。.panel-body類是面板的主體內(nèi)容部分，也就是本例中顯示若干條信息標(biāo)題及時間的部分。 Bootstap默認(rèn)的面板樣式是灰色調(diào)的，為了給網(wǎng)站增添可視性，選擇了帶情境的面板，即.panel-info類，也就是面板的標(biāo)題位置顯示淡藍(lán)色的背景色，而標(biāo)題字體顏色是相應(yīng)的深藍(lán)色。
4 顯示與隱藏的設(shè)計
學(xué)校站群系統(tǒng)中，一個網(wǎng)站的模板結(jié)構(gòu)是由網(wǎng)站首頁模板、欄目頁模板及文章頁模板組成一套模板，一套模板就如同一個人的一套服裝。以上的內(nèi)容都是介紹的教育技術(shù)中心首頁模板代碼。而在教育技術(shù)中心網(wǎng)站文章頁模板中設(shè)計了圖片的顯示與隱藏。如圖7、圖8兩圖所示，同一條信息，在平板、中等及大屏幕和超小屏幕（手機）中顯示的對比。
文章頁在中等以上屏幕（圖7）中顯示右上的圖片，不顯示帶欄目名稱的圖片，目的是使網(wǎng)頁整潔，又不顯乏味；而在超小屏幕上（圖8）只顯示帶欄目名稱的圖片，是使瀏覽者明確當(dāng)前的瀏覽位置。在響應(yīng)式設(shè)計中通常會準(zhǔn)備多個分辨率下的設(shè)計稿，以體現(xiàn)各種頁面元素的動態(tài)定位[10]。將最優(yōu)的效果呈現(xiàn)在不同尺寸的設(shè)備終端，讓用戶在感官和交互等方面獲得最佳體驗[11]。
5 結(jié) 論
經(jīng)過5個月的設(shè)計開發(fā)，承德醫(yī)學(xué)院教育技術(shù)中心于2022年12月14日推出新版網(wǎng)站，如圖2所示。使用響應(yīng)式布局技術(shù)，使師生在多元（手機、平板電腦、筆記本電腦、臺式電腦和電視等）上網(wǎng)終端設(shè)備上瀏覽網(wǎng)站信息時有了更好的體驗。相比傳統(tǒng)的網(wǎng)頁設(shè)計方式（不同的終端設(shè)計不同的網(wǎng)頁版本），基于Bootstrap框架的響應(yīng)式網(wǎng)站開發(fā)速度快、成本低。網(wǎng)站建成后利用學(xué)校的站群管理系統(tǒng)維護(hù)、管理網(wǎng)站信息，方便快捷、不增加工作負(fù)擔(dān)。而對用戶訪問網(wǎng)站更友好、體驗更佳。綜上，利用Bootstrap框架技術(shù)進(jìn)行響應(yīng)式的網(wǎng)頁設(shè)計布局，對網(wǎng)站開發(fā)者和網(wǎng)站信息維護(hù)者及用戶都帶來的更好的體驗，值得推廣。
參考文獻(xiàn)：
[1] 中國互聯(lián)網(wǎng)絡(luò)信息中心.第53次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》 [EB/OL].（2024-03-21）.https：//www.cnnic.net.cn/n4/2024/0321/c208-10962.html.
[2] 何莉.Bootstrap前端框架技術(shù)的應(yīng)用研究 [J].信息記錄材料，2021，22（11）：171-172.
[3] 史麗雯.醫(yī)學(xué)類?？茖W(xué)校網(wǎng)站群管理系統(tǒng)的應(yīng)用 [J].中國新通信，2019，21（5）：154-155.
[4] 魯鑫超.響應(yīng)式技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用 ——以天津美術(shù)館為例 [D].天津：天津職業(yè)技術(shù)師范大學(xué)，2022.
[5] Bootstrap中文網(wǎng).Bootstrap中文網(wǎng)首頁 [EB/OL].[2022-03-01].https：//www.bootcss.com.
[6] 吳瑞紅，張環(huán)沖.淺談JavaScript庫——jQuery，ExtJs的對比研究 [J].科技信息，2010（9）：474-475.
[7] Bootstrap中文網(wǎng).Bootstrap中文網(wǎng)v3中文文檔全局css樣式 [EB/OL].[2022-03-01].https：//v3.bootcss.com/css/#grid.
[8] 宋蒲斌，王奔，王昶，劉翔.網(wǎng)絡(luò)安全等級保護(hù)下的門戶網(wǎng)站設(shè)計與實現(xiàn) [J].長江科學(xué)院院報，2022，39（1）：155-159.
[9] Bootstrap中文網(wǎng).Bootstrap中文網(wǎng)v3中文文檔組件 [EB/OL].[2022-03-01]https：//v3.bootcss.com/components/#navbar.
[10] 劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計構(gòu)建高校新型門戶網(wǎng)站 [J].中國教育信息化，2013（9）：71-74.
[11] 莊麗君.Bootstrap響應(yīng)式Web設(shè)計應(yīng)用研究——以玩具商城網(wǎng)站設(shè)計為例 [J].現(xiàn)代信息科技，2023，7（22）：96-99.
作者簡介：王蓓蓓（1981—），女，漢族，遼寧鞍山人，講師，碩士，研究方向：教育信息化、網(wǎng)絡(luò)信息運維。
