陶瑜 龔花蘭 郭自飛

基于Bootstrap的響應(yīng)式高校招生網(wǎng)站的開發(fā)

陶瑜 龔花蘭 郭自飛

（沙洲職業(yè)工學(xué)院，江蘇 張家港 215600）

根據(jù)高校招生網(wǎng)站響應(yīng)式設(shè)計(jì)的需求，提出了基于Bootstrap的響應(yīng)式招生網(wǎng)站的開發(fā)，分析了Bootstrap框架技術(shù)的優(yōu)勢(shì)及其關(guān)鍵的布局工具柵格系統(tǒng)，給出了高校招生網(wǎng)站開發(fā)的一些建議。

響應(yīng)式設(shè)計(jì)；Bootstrap；柵格系統(tǒng)

引言

高校招生網(wǎng)站承擔(dān)著高校招生信息的發(fā)布宣傳、考生的通知錄用、實(shí)現(xiàn)與考生及家長信息交互的任務(wù)，美觀、實(shí)用、操作簡便是其基本要求。目前，大部分高校的招生網(wǎng)站是針對(duì)PC端設(shè)計(jì)的，隨著智能手機(jī)與 PAD用戶的增長，基于原有PC 端的招生網(wǎng)站在小屏設(shè)備上展示時(shí)，既操作不便，也不夠美觀，這就對(duì)高校招生網(wǎng)站能夠面向各種設(shè)備進(jìn)行響應(yīng)式設(shè)計(jì)提出了新要求。

1 響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive WebsiteDesign）是Ethan Marcotte在2010年提出的。簡單來說，就是一個(gè)網(wǎng)站可以兼容不同的終端，無論用戶使用的是PC機(jī)、PAD還是手機(jī)，頁面都可以自動(dòng)切換分辨率、圖片的尺寸、文字的大小以及相關(guān)的腳本功能，能夠適應(yīng)不同的設(shè)備。[1]

2 響應(yīng)式設(shè)計(jì)構(gòu)建高校招生網(wǎng)站的設(shè)計(jì)技術(shù)

高校招生網(wǎng)站，主要是用來向考生及家長展示招生信息及與家長實(shí)現(xiàn)信息交互，怎樣使得招生網(wǎng)站第一眼就給人留下深刻印象？從直觀上來說，信息的合理分布、圖片的響應(yīng)式縮放是非常必要的。目前響應(yīng)式設(shè)計(jì)主要基于四種技術(shù)：媒體查詢、流式布局、彈性圖片、彈性盒子布局。[2]

2.1 媒體查詢

媒體查詢主要是對(duì)屏幕分辨率進(jìn)行查詢識(shí)別，它使用不同的 CSS 樣式來書寫，以適應(yīng)不同的媒體。

CSS中用@media screen語句來區(qū)分不同的設(shè)務(wù)，在設(shè)計(jì)頁面時(shí)添加斷點(diǎn)，不同的斷點(diǎn)有不同的效果。如：@media(max-width:480)，@media(max-width:767)，@media(max-width:979)，@media(max-width:1200)，這些不同的查詢斷點(diǎn)就是臨界點(diǎn)?？邕^這些臨界點(diǎn)，網(wǎng)頁的布局就會(huì)發(fā)生變化，不同的媒體就會(huì)有不同的頁面展示。

2.2 流式布局

流式布局即百分比布局，主要是靠百分比進(jìn)行排版。百分比的排版方式不同于固定的px像素排版，它不固定具體尺寸，可隨著不同的設(shè)備自動(dòng)調(diào)整大小，在不同分辨率下顯示相同的版式，如設(shè)置網(wǎng)頁主體的寬度為80%，而不是固定地使用px像素。

2.3 彈性圖片

不同的設(shè)備有不同的分辨率，在PC端，因?yàn)槠聊惠^大，可以展示比較大的圖片，而切換到PAD或者手機(jī)端時(shí)，在PC端能夠正常展示的圖片會(huì)因屏幕尺寸變小而無法正常展示，這就需要頁面中的圖片能夠彈性顯示。

彈性圖片指的是不給圖片設(shè)置固定尺寸而是根據(jù)設(shè)備不同的分辨率進(jìn)行縮放，用來適應(yīng)各種設(shè)備的尺寸，這對(duì)于網(wǎng)站頁面的展示是極為重要的。要實(shí)現(xiàn)彈性圖片展示，CSS實(shí)現(xiàn)方法非常簡單，就是圖片采用百分比而不是固定像素：img{max-width:100%;}。

2.4 彈性盒子布局

彈性盒子布局即Flex布局，任何一個(gè)容器都可以指定為Flex布局。

彈性盒子布局能夠根據(jù)瀏覽器窗口大小的改變自行擴(kuò)展或收縮內(nèi)部元素，智能調(diào)整元素之間的間隔，如給標(biāo)簽加上屬性display:flex，該標(biāo)簽就成為了flex容器。

3 Bootstrap框架技術(shù)對(duì)響應(yīng)式高校招生網(wǎng)站的開發(fā)

3.1 Bootstrap概述

Bootstrap是基于HTML、CSS、JavaScript開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，它將超文本標(biāo)記語言、級(jí)聯(lián)樣式表和JavaScript有機(jī)地集成在一起，使得基于Bootstrap框架開發(fā)的頁面能夠適應(yīng)不同大小設(shè)備的顯示，降低了開發(fā)成本，提高了網(wǎng)站開發(fā)效率。[3]

3.2 柵格系統(tǒng)

柵格系統(tǒng)（grid systems）也叫“網(wǎng)格系統(tǒng)”，它運(yùn)用固定的網(wǎng)格，遵循一定的規(guī)則，進(jìn)行頁面的布局設(shè)計(jì)，使布局規(guī)范簡潔有規(guī)則。開發(fā)響應(yīng)式頁面時(shí)，利用柵格可以模塊化地管理元素，讓頁面更有層次感。柵格系統(tǒng)生成之后，每一格都對(duì)應(yīng)屏幕的百分比，如，.col-xs-1:5%, col-xs-2:10%, col-xs-3:15%，依此類推，col-xs-20:100%，每個(gè)模塊對(duì)應(yīng)不同的柵格，對(duì)網(wǎng)站頁面進(jìn)行模塊化管理，實(shí)現(xiàn)對(duì)網(wǎng)站頁面的響應(yīng)式開發(fā)。

3.3 Bootstrap對(duì)響應(yīng)式高校招生網(wǎng)站的開發(fā)

（1）生成柵格系統(tǒng)

根據(jù)網(wǎng)頁布局，生成柵格系統(tǒng)，下載柵格系統(tǒng)css文件到網(wǎng)站目錄。一般柵格系統(tǒng)css文件名為bootstrap.css，把此css文件加載在頁面head頭部，語句為：”；另外在body的后面加載jQuery.min.js文件，即可以在模擬設(shè)備上進(jìn)行測(cè)試，檢查是否響應(yīng)。

（2）前端靜態(tài)頁面開發(fā)

靜態(tài)頁面的開發(fā)原則是按照網(wǎng)頁P(yáng)S設(shè)計(jì)原圖來開發(fā)。在設(shè)計(jì)響應(yīng)式高校招生網(wǎng)站時(shí)，最先的步驟是PS制圖，設(shè)計(jì)出網(wǎng)站首頁面、二級(jí)頁面、三級(jí)頁面，這樣前端開發(fā)就能根據(jù)PS圖來開發(fā)靜態(tài)頁面。

在進(jìn)行前端靜態(tài)頁面開發(fā)時(shí)，可以將招生網(wǎng)站頁面劃分為多個(gè)模塊，如頭部、底部、列表、側(cè)邊欄等，在HTML5中寫CSS樣式、.js文件，搭建出各個(gè)模塊。每個(gè)模塊都有自己獨(dú)立的功能與文件，在開發(fā)的每一個(gè)子頁面中分別調(diào)用所需模塊，這樣在需要修改網(wǎng)站頁面時(shí)，只要修改對(duì)應(yīng)的模塊，而不需要再修改頁面。

招生網(wǎng)站的設(shè)計(jì)遵循操作簡單且美觀的原則，在網(wǎng)站的開發(fā)時(shí)可以使用 Bootstrap提供的插件，如bootstrap-table表格插件可以對(duì)招生網(wǎng)站考生信息記錄進(jìn)行查詢、分布、排序等操作；使用bootstrap-table表格插件和jstree樹形列表插件構(gòu)架二級(jí)頁面左側(cè)樹，對(duì)樹列表?xiàng)l件和查詢條件進(jìn)行處理；使用bootstrap datetimepicker日期插件來展示當(dāng)前日期。

（3）網(wǎng)站實(shí)現(xiàn)

前端靜態(tài)頁面開發(fā)完成，之后給網(wǎng)站分配域名、進(jìn)行后臺(tái)數(shù)據(jù)庫設(shè)計(jì)、前臺(tái)服務(wù)器配置，接著進(jìn)行站點(diǎn)、欄目等一系列配置，響應(yīng)式的高校招生網(wǎng)站就實(shí)現(xiàn)了。

4 結(jié)語

Bootstrap的響應(yīng)式高校招生網(wǎng)站，可以使用不同設(shè)備（包括手機(jī)、平板電腦、臺(tái)式機(jī)）進(jìn)行訪問，提高了網(wǎng)頁展示的質(zhì)量，滿足考生及家長對(duì)招生信息的瀏覽與關(guān)注，給用戶帶來了更好的視覺體驗(yàn)。

[1] 嚴(yán)珩. 小微公司官網(wǎng)的響應(yīng)式網(wǎng)站開發(fā)與實(shí)現(xiàn)[J]. 電子技術(shù)與軟件工程, 2018 (20): 58.

[2] 張倩. 基于檢驗(yàn)檢測(cè)行業(yè)電子商務(wù)平臺(tái)的視覺設(shè)計(jì)研究[J]. 科技與創(chuàng)新, 2019 (4): 69-70+72.

[3] 傅翠玉, 王少茹, 洪秀金. Bootstrap框架在響應(yīng)式WEB開發(fā)中的應(yīng)用[J]. 電腦知識(shí)與技術(shù), 2018 (21): 85-86.

Development of Responsive College Enrollment Website Based on Bootstrap

TaoYu, Gong Hualan, Guo Zifei

In this paper, the development of the responsive enrollment website based on Bootstrap is proposed according to the demand of responsive design of college enrollment website. The advantages of Bootstrap framework technology and its key grid system of layout tool are analyzed, and some knowledge about the development of college enrollment website is offered.

responsive design; Bootstrap; grid system

TP311.52

A

1009－8429(2020)03－0005－03

2020-06-11

2020年江蘇省高等學(xué)校大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目（202011288006Y）

陶 瑜（1980－），女，沙洲職業(yè)工學(xué)院信息技術(shù)中心工程師；

龔花蘭（1965－），女，沙洲職業(yè)工學(xué)院信息技術(shù)中心高級(jí)工程師；

郭自飛（2000－），男，沙洲職業(yè)工學(xué)院電子信息工程系2019級(jí)計(jì)算機(jī)專業(yè)學(xué)生。