Loading...

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架,核心的設計目標是達成RWD響應式與行動優先,也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設,讓你能在框架的基礎上進行開發,不需要再去煩惱瑣碎的設定。

Bootstrap 的特色是讓你不寫 CSS,只需要配置恰當的 HTML 架構並加上幾個 Bootstrap class,這種高效讓大家對他愛不釋手。

Bootstrap 做好了一整套可重覆使用的元件樣式

Bootstrap 聲譽良好,在開源 (open-source) 業界佔有優勢,並且已經完善地測試、維護和紀錄過,可放心使用。

Bootstrap 本身有非常完善的教學文件,因此「學習如何使用 Bootstrap」幾乎就是弄清楚要怎麼查找 Bootstrap 的官方網站。另外,由於 Bootstrap 提供了很多現成的元件樣式,你甚至可以把 Bootstrap 的官方文件當成 CSS 範例書,參考它是怎麼架構 HTML 和 CSS,以及如何命名 CSS class 等等。

這篇文章我們會介紹怎麼把 Bootstrap 框架整合到你的網站裡,接下來會著重介紹使用 Bootstrap 的官方文件。

Bootstrap 官方網站

Bootstrap 的官方網站位於 https://getbootstrap.com/,官網提供了非常完整的資料。本文撰寫時,最新釋出的版本為 4.1.3 版,因此文中會使用第 4 版的 Bootstrap。若你學習到這裡時,已經釋出了更新版本,也請不用擔心,只要上手其中一個版本就能夠很快地轉移,因此我會建議你先使用與本文相同的版本,等到熟門熟路以後再自行升級。

導入 Bootstrap

Bootstrap 由 HTML、CSS 和 JavaScript 寫成,因此導入 Bootstrap 的方式和平常引入 CSS 和 JavaScript 檔案的方式一樣,下載檔案之後,將其引入到 HTML 檔案裡。

在官網的 Getting Started 頁面有介紹各種導入方式,以下我們介紹在JavaScript前端完整技能課程中,你可能會用到的作法:

  • 專案直接連向 BootstrapCDN 的遠端內容
  • 下載 Bootstrap 編譯檔後引入專案
  • 在 CodePen 專案設定 Bootstrap

BootstrapCDN

CDN 是 Content Delivery Networks 的縮寫,譯為「內容傳遞網路」,簡單來說,就是利用 CDN 技術把內容放在伺服器上,開放給任何人快速存取。當然,你需要連上網路,才能使用 CDN 的內容。

BootstrapCDN 是把 Bootstrap 框架導入專案中最簡單又最快速的方式,請你到 Getting Started 頁面複製寫好的 HTML 標籤內容:

以下是引入專案的方式:

  • 請將 CSS 的 <link> 標籤放在 <head> 裡,請記得瀏覽器是由上而下載入檔案,後面載入的會覆蓋掉前請載入的,如果 Bootstrap 和你自己的 CSS 發生衝突,應該要以你的為主,所以你的檔案要放在 Bootstrap 的後面。
  • JavaScript 會用到 jQuery、Popper.js、和 Bootstrap 的 JavaScript 函式庫,因此共有 3 支檔案。請依序將這些檔案放在 </body> 之前,同理,如果你有另外寫自己的 JavaScript 檔案,應該放在它們之後。

下載編譯檔

你也在這裡下載編輯過的 Bootstrap 檔案。之後再把檔案放進專案目錄裡,這樣一來不需要使用網路。

引入的方式和 CDN 一樣,要引入 CSS 、jQuery、Popper.js、JavaScript,只是把 CSS 和 JavaScript 換成位在本地專案裡的 Bootstrap 檔案。

Bootstrap 文件使用方式

安裝好 Bootstrap 之後,接下來就是在需要的時候,到官方文件上去尋找現成的元素,通常做法是把文件上的 HTML 複製到專案再修改。

Bootstrap 可能是世界上最直覺使用的 framework 了

也因為 Bootstrap 的使用方法是「翻找文件、複製貼上」,所以需要稍微熟悉文件裡有哪些項目。這裡有中譯版本,可以先快速了解一下內容,之後再習慣看原文。

這份文件包羅萬象,我們建議你可以先快速瀏覽以下幾個頁面:

內容 (Content)

入口:https://getbootstrap.com/docs/4.1/content/

Content 介紹了 HTML 的預設樣式,例如字體大小、圖片、表格的處理。

例如在 Typography,你可以找到標題樣式:

Bootstrap 已經預先寫好了 CSS class,只要把 class 加到 <p> 元素,<p> 就會產生和 <h1> 元素一樣的樣式。

組件 (Components)

入口: https://getbootstrap.com/docs/4.1/components/

Component 是 Bootstrap 的核心所在,他把現代網頁常用的元件如導覽列、下拉選單、警告訊息、按鈕都事先做好,讓你可以複製貼上。

套用 Bootstrap 的現成 class,你也會更熟悉 class 命名的 best practice。

佈局 (Layout)

入口:https://getbootstrap.com/docs/4.1/layout/

Bootstrap Grid 系統

如果你對RWD已經有所認識,運用Bootstrap Grid系統可以讓設計網站原型(prototyping)快速有效率,參考以下影片將示範Bootstap 的RWD系統使用方式。

覺得自己了解 Bootstrap Grid 系統了嗎?可以來做看看小測驗

powered by Typeform

更多Bootstrap教學,近一步了解JavaScript前端完整技能

小結

Bootstrap 知名的原因是它的RWD響應式佈局框架。即使你想要鍛練自己手刻 CSS 的技術,我們仍然會建議你先使用一陣子 Bootstrap 直到你熟悉他,因為 Bootstrap 撰寫 CSS 的方式也很值得你學習,在導入 Bootstrap 之後,你可以隨時打開 DevTools 來查看 Bootstrap 的原始碼,這會幫助你觀摩很多專業的 CSS 設定細節。

3分鐘小測驗,找到你學習全端網頁開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者