[練習課程] Bootstrap4 實作:一頁式網站

本篇將整合過去基本課程 HTML, CSS, Bootstrap, JS 相關知識進行經驗整合,動手設計簡單一頁式且具備 RWD 之網站設計。由於考量部分學員尚未接觸 JS 課程進度與基礎認知,將集中最後小節於完成後補充。

本篇將整合過去基本課程 HTML, CSS, Bootstrap, JS 相關知識進行經驗整合,動手設計簡單一頁式且具備 RWD 之網站設計。由於考量部分學員尚未接觸 JS 課程進度與基礎認知,將集中最後小節於完成後補充。

本章節分為兩節介紹分別是 Content 內容與 Utilities 通用。這些都比較偏向基礎或常用的 class 公式使用度偏高。完整學習這些後,靜態設計 Bootstrap 就算學的七八成了(可以出門騙吃騙吃)。

本系列根據教材課程需要進行 Bootstrap 套件的教學文章,在接觸 Bootstrap 之前需要擁有一定的 HTML5/CSS3 觀念,才能理解 Bootstrap 的原理應用以及調整技巧,如果你另具備了 JS/JQ 的開發能力,那更方便進一步的使用並控制這些 Bootstrap 套件工具。筆者這裡 Boostrap 的系列文章都來自官方本身提供的 Document 教學資料重新進行重新解析與翻譯重組解釋(也包含閹割一些覺得非必要的資訊),如果你擁有有足夠的能力可直接閱讀官方手冊並動手實作就不需要特地參閱已整理過的中文 BS 教學,動手跟著官方文件做操作練習才是最佳的經驗累積。
本篇一開始會介紹基本安裝環境,接著先介紹核心的版面規劃(將牽扯到 Grid 與 flexbox)。