陳明雪 周小麗 張受亭 趙 勇

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

1 引言

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

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

2.1 開設課程的意義

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

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

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

3 Bootstrap課程設計教學方法應用

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

以下將圍繞Bootstrap課程，結合多種教學方法進行教學實踐，并比較了不同教學方法應用成效的差異。

3.1 案例演示法和比較法

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

以下是案例演示法和比較法在教學過程具體的實施情況，案例演示法即在教學過程中以代碼演示的方法指導學生進行練習，如表1所示。

表1 案例演示法和比較法實施表

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

3.2 啟發(fā)式教學法

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

下面以Bootstrap框架中的按鈕為例進行原理分析。

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

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

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

3.3 分組實驗教學法

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

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

表2 分組實驗教學法實施表

下面以個人技能部分為例進行分析：

圖2為個人簡歷中個人技能部分效果圖，個人技能部分主要采用進度條組件完成。

圖2 個人技能效果圖

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

4 學習效果

在Bootstrap 教學工作中，對8 個班近450 名學生收集學習反饋信息，這8個班人數(shù)相當，水平相當。對調(diào)查報告進行分析有如下結論：

（1）分組實驗教學法成效最大，80%以上同學都能完成課堂案例，學生學習主動性較強，完成案例后成就感較強。

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

5 結語

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