面向Web前端開發(fā)的Bootstrap課程教學(xué)研究

陳明雪 周小麗 張受亭 趙 勇

（四川托普信息技術(shù)職業(yè)學(xué)院，四川 成都 611743）

1 引言

隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展，計(jì)算機(jī)軟件技術(shù)的不斷更新，前端框架技術(shù)層出不窮，現(xiàn)主流前端框架有Bootstrap、AngularJs、JqueryEasyUI、Vue 等，而Bootstrap 課程學(xué)習(xí)難度較小、成本較低、應(yīng)用較廣，所以對(duì)剛?cè)腴T學(xué)生來說學(xué)習(xí)Bootstrap課程是必要的，學(xué)習(xí)該課程可簡化開發(fā)、節(jié)約時(shí)間，并且Bootstrap 框架還具有移動(dòng)設(shè)備優(yōu)先、響應(yīng)式設(shè)計(jì)、強(qiáng)大組件等特點(diǎn)，支持Firefox、Chrome等多種瀏覽器。

2 開設(shè)課程必要性和現(xiàn)狀

2.1 開設(shè)課程的意義

當(dāng)前計(jì)算機(jī)軟件專業(yè)前端方向中主要課程有HTML、CSS、Javascript、Jquery和各類前端框架課程，而開設(shè)HTML、CSS、Javascript、Jquery等課程目的是為學(xué)習(xí)各類前端框架打下良好的基礎(chǔ)。當(dāng)前互聯(lián)網(wǎng)發(fā)展時(shí)代Web 前端技術(shù)層出不窮，當(dāng)前主流框架技術(shù)有Bootstrap、AngularJs、Vue、React[1]等，而前端框架課中Bootstrap 在頁面設(shè)計(jì)中發(fā)揮重要作用，可以實(shí)現(xiàn)不同設(shè)備的應(yīng)用，支持Firefox、Chrome、Safari 多個(gè)瀏覽器。同時(shí)各類互聯(lián)網(wǎng)公司對(duì)前端人才需求量較大，尤其是對(duì)Bootstrap技術(shù)的需求極大，所以對(duì)于學(xué)生來說學(xué)習(xí)該課程是必要的。前端框架技術(shù)知識(shí)是相通的，掌握該課程有助于學(xué)習(xí)AngularJs、Vue、React其他框架課程。

2.2 開設(shè)課程的現(xiàn)狀

Bootstrap 課程為48 學(xué)時(shí)，分為理論、實(shí)踐各24 學(xué)時(shí)。Bootstrap 課程主要內(nèi)容有全局CSS 樣式、組件、Javascript 插件三大部分內(nèi)容，內(nèi)容較多，由于課時(shí)較少課程中大部分時(shí)間只能采用講授法講授知識(shí)點(diǎn)，學(xué)生實(shí)踐較少，導(dǎo)致不能及時(shí)掌握該節(jié)課知識(shí)點(diǎn)，對(duì)章節(jié)知識(shí)點(diǎn)的連貫性、操作性掌握較差。同時(shí)學(xué)生基礎(chǔ)較薄弱，使用48個(gè)課時(shí)掌握該門課程教學(xué)相對(duì)比較困難，大多數(shù)學(xué)生只能停留在理論知識(shí)階段，編程能力較弱。在這種情況下，學(xué)生的積極性會(huì)逐漸減退。Bootstrap課程期末考試是以考察方式為主，設(shè)計(jì)作品進(jìn)行評(píng)分，由于前期學(xué)習(xí)過程中學(xué)生沒有較好培養(yǎng)編程能力導(dǎo)致無法獨(dú)立完成期末作品。

3 Bootstrap課程設(shè)計(jì)教學(xué)方法應(yīng)用

計(jì)算機(jī)軟件專業(yè)課程大致分為前端和后端兩個(gè)方向，前端指網(wǎng)站前臺(tái)部分，包括網(wǎng)站的表現(xiàn)層和結(jié)構(gòu)層：Web 頁面的結(jié)構(gòu)、外觀視覺表現(xiàn)、交互實(shí)現(xiàn)。后端是在后臺(tái)工作的，控制著前端的內(nèi)容，負(fù)責(zé)程序設(shè)計(jì)架構(gòu)思想、管理數(shù)據(jù)庫等。兩個(gè)方向的課程相比較，學(xué)生對(duì)于前端學(xué)習(xí)課程的積極性相對(duì)較高，只要采用適當(dāng)?shù)姆椒ㄊ强梢蕴岣邔W(xué)生學(xué)習(xí)興趣的。

以下將圍繞Bootstrap課程，結(jié)合多種教學(xué)方法進(jìn)行教學(xué)實(shí)踐，并比較了不同教學(xué)方法應(yīng)用成效的差異。

3.1 案例演示法和比較法

Bootstrap 框架主要有三大優(yōu)勢(shì)：（1）設(shè)置了全局的CSS樣式，HTML的基本元素可以通過class設(shè)置演示并得到增強(qiáng)效果；（2）自帶可以復(fù)用的組件；（3）可以一次性引入所有插件，或者逐個(gè)引入到頁面中。在網(wǎng)頁設(shè)計(jì)中，對(duì)比直接使用HTML、CSS、Javascript 編寫代碼，運(yùn)用Bootstrap 框架可以節(jié)約空間、時(shí)間，以較少的代碼就可以完成相同的功能[2]。

以下是案例演示法和比較法在教學(xué)過程具體的實(shí)施情況，案例演示法即在教學(xué)過程中以代碼演示的方法指導(dǎo)學(xué)生進(jìn)行練習(xí)，如表1所示。

表1 案例演示法和比較法實(shí)施表

根據(jù)表1所示，以表單、按鈕為例，分別采用HTML、CSS和Bootstrap框架分別進(jìn)行案例設(shè)計(jì)，對(duì)比結(jié)果，采用HTML、CSS 進(jìn)行設(shè)計(jì)代碼量大、費(fèi)時(shí)；而Bootstrap 框架將前者所用代碼進(jìn)行封裝，通過class方式引入使用，可以節(jié)約空間、易于理解，為學(xué)生開發(fā)的過程中提供極大的便利，以這種案例演示和比較法的方式可以提高學(xué)生的學(xué)習(xí)興趣。

3.2 啟發(fā)式教學(xué)法

在學(xué)習(xí)過程中，不管是CSS 樣式，組件，還是Javascript插件，學(xué)生往往不理解其背后的本質(zhì)或原理，導(dǎo)致學(xué)生無法靈活運(yùn)用組件或者插件，最終無法掌握知識(shí)點(diǎn)來完成項(xiàng)目案例，所以在教學(xué)過程中，對(duì)于組件和插件的講解需要讓學(xué)生了解其背后的本質(zhì)，學(xué)生在了解其本質(zhì)后才能更好地掌握知識(shí)。在教學(xué)過程中可采用啟發(fā)式教學(xué)的方法為學(xué)生講述組件使用原理，引導(dǎo)學(xué)生學(xué)習(xí)Bootstrap庫文件中封裝的組件插件樣式，學(xué)生在了解組件原理后學(xué)習(xí)Bootstrap 框架更加容易，在學(xué)習(xí)中取得一定的成果后學(xué)生的積極性會(huì)增強(qiáng)，在后續(xù)的學(xué)習(xí)過程中學(xué)生學(xué)習(xí)主動(dòng)性也會(huì)增強(qiáng)，會(huì)自發(fā)提前預(yù)習(xí)課堂內(nèi)容，了解該框架組件的原理進(jìn)行學(xué)習(xí)[3]。

下面以Bootstrap框架中的按鈕為例進(jìn)行原理分析。

在Bootstrap中按鈕的制作只需要引入Bootstap庫文件，再以一行代碼就可以完成，代碼如下：

雖然代碼只有一行，但學(xué)生可能不理解為何使用class="btn btn-success"就可以完成樣式，其本質(zhì)在于class="btn btnsuccess"中封裝了按鈕的所有樣式，包含按鈕中字體顏色、大小、字體在按鈕中水平和縱向排列方式、按鈕的高度寬度、按鈕的背景顏色、點(diǎn)擊按鈕的效果、按鈕的邊框樣式、按鈕邊框的圓角半徑等。class="btn btn-success"中封裝了按鈕的樣式如下代碼所示：

這些樣式封裝在Bootstrap 的庫文件bootstrap.min.css中，使用過程中只要引入庫文件，再通過class引用庫文件的樣式名稱就可以完成按鈕的樣式設(shè)計(jì)[4]。根據(jù)這種啟發(fā)式教學(xué)法方式了解了class="btn btn-success"使用原理，學(xué)生才能更好地完成項(xiàng)目案例的開發(fā)。

3.3 分組實(shí)驗(yàn)教學(xué)法

在前面分析課程現(xiàn)狀和學(xué)習(xí)現(xiàn)狀中提到，由于課時(shí)原因大多數(shù)時(shí)候以講授法為主，學(xué)生不能得到充分實(shí)踐，知識(shí)點(diǎn)不能全面掌握，導(dǎo)致學(xué)習(xí)興趣降低，此現(xiàn)狀下可采用分組實(shí)驗(yàn)法進(jìn)行教學(xué)，每個(gè)班按3～4 人進(jìn)行分組，以小組的形式完成案例，分組過程中，學(xué)生可進(jìn)行相互討論鞏固知識(shí)點(diǎn)，可以提高學(xué)生學(xué)習(xí)的積極性。以下是采用案例化和分小組形式教學(xué)的情況，如表2所示。

下面對(duì)表2中的“個(gè)人簡歷”案例的實(shí)施過程進(jìn)行分析：采用Bootstrap框架進(jìn)行設(shè)計(jì)，首先對(duì)個(gè)人簡歷使用柵格系統(tǒng)進(jìn)行排版，分為左右兩個(gè)版面比例為3:9；左邊版面包含個(gè)人信息、個(gè)人技能、聯(lián)系我們?nèi)齻€(gè)部分；右邊版面分為自我評(píng)價(jià)、獲獎(jiǎng)情況、工作經(jīng)驗(yàn)、學(xué)習(xí)經(jīng)歷四個(gè)部分；左右兩個(gè)部分均采用卡片組件進(jìn)行制作。個(gè)人信息部分采用卡片、圖標(biāo)、圖片排版、文字排版等Bootstrap 框架組件和CSS 樣式；個(gè)人技能部分采用進(jìn)度條組件；聯(lián)系我們部分采用表單和柵格系統(tǒng)排版完成；自我評(píng)價(jià)、獲獎(jiǎng)情況采用排版完成；工作經(jīng)驗(yàn)和學(xué)習(xí)經(jīng)歷均可采用列表組、Flex 布局或者柵格系統(tǒng)、Flex 布局完成[5]。

表2 分組實(shí)驗(yàn)教學(xué)法實(shí)施表

下面以個(gè)人技能部分為例進(jìn)行分析：

圖2為個(gè)人簡歷中個(gè)人技能部分效果圖，個(gè)人技能部分主要采用進(jìn)度條組件完成。

圖2 個(gè)人技能效果圖

圖2 代碼為第一個(gè)“HTML5”技能進(jìn)度條設(shè)計(jì)，其中class="row pb-4"、class="col-3"、class="col-9"表示采用柵格系統(tǒng)進(jìn)行排版，HTML5 技能文字和進(jìn)度條的比例為3:9，即文字“HTML5”占據(jù)三個(gè)柵格欄位，進(jìn)度條占據(jù)9 個(gè)柵格欄位。通過class="progress"、class="progress-bar w-75 progressbar-striped progress-bar-animated"引入Bootstrap 樣式設(shè)置進(jìn)度條的樣式，設(shè)置進(jìn)度條總長度、進(jìn)度長度、進(jìn)度條顏色、進(jìn)度條動(dòng)態(tài)效果等。同理個(gè)人技能中的“CSS”“JQuery”“JS”技能也可按照此方法進(jìn)行設(shè)計(jì)。

4 學(xué)習(xí)效果

在Bootstrap 教學(xué)工作中，對(duì)8 個(gè)班近450 名學(xué)生收集學(xué)習(xí)反饋信息，這8個(gè)班人數(shù)相當(dāng)，水平相當(dāng)。對(duì)調(diào)查報(bào)告進(jìn)行分析有如下結(jié)論：

（1）分組實(shí)驗(yàn)教學(xué)法成效最大，80%以上同學(xué)都能完成課堂案例，學(xué)生學(xué)習(xí)主動(dòng)性較強(qiáng)，完成案例后成就感較強(qiáng)。

（2）案例演示和對(duì)比法、啟發(fā)式教育法較前面一種方法收獲較少。采用演示和對(duì)比法有約70%的學(xué)生能完成課堂案例，采用啟發(fā)式教育法有約65%的學(xué)生能完成課堂案例。根據(jù)學(xué)生反映情況，問題在于學(xué)生對(duì)基礎(chǔ)知識(shí)掌握情況較薄弱，對(duì)于HTML、CSS 等知識(shí)掌握不牢固，而分組實(shí)驗(yàn)教學(xué)法，可以讓學(xué)生主動(dòng)對(duì)薄弱知識(shí)點(diǎn)進(jìn)行自我學(xué)習(xí)和提高，也可提高學(xué)生自己解決問題的能力，學(xué)習(xí)主動(dòng)性得到較大提升。

5 結(jié)語

Bootstrap課程在頁面設(shè)計(jì)中發(fā)揮重要作用，可實(shí)現(xiàn)在不同設(shè)備的應(yīng)用、支持多種瀏覽器。當(dāng)前互聯(lián)網(wǎng)公司對(duì)Bootstrap 技術(shù)需求極大，所以對(duì)于學(xué)生來說學(xué)習(xí)該課程非常必要。本文采用案例演示、對(duì)比法、啟發(fā)式教學(xué)法、分組實(shí)驗(yàn)法來提高學(xué)生學(xué)習(xí)興趣，指導(dǎo)學(xué)生如何學(xué)好Bootstrap 課程，為學(xué)生就業(yè)打下良好基礎(chǔ)。