面向Web前端開發的Bootstrap課程教學研究

陳明雪 周小麗 張受亭 趙 勇

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

1 引言

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

2 開設課程必要性和現狀

2.1 開設課程的意義

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

2.2 開設課程的現狀

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

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

計算機軟件專業課程大致分為前端和后端兩個方向，前端指網站前臺部分，包括網站的表現層和結構層：Web 頁面的結構、外觀視覺表現、交互實現。后端是在后臺工作的，控制著前端的內容，負責程序設計架構思想、管理數據庫等。兩個方向的課程相比較，學生對于前端學習課程的積極性相對較高，只要采用適當的方法是可以提高學生學習興趣的。

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

3.1 案例演示法和比較法

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

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

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

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

3.2 啟發式教學法

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

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

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

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

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

3.3 分組實驗教學法

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

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

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

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

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

圖2 個人技能效果圖

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

4 學習效果

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

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

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

5 結語

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