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 5 來了,我該升級嗎?一起了解幾個核心改動

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 的後面。</head>
  • JavaScript 會用到 jQuery、Popper.js、和 Bootstrap 的 JavaScript 函式庫,因此共有 3 支檔案。請依序將這些檔案放在  之前,同理,如果你有另外寫自己的 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><p> 就會產生和 </p><h1> 元素一樣的樣式。</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 等工具實作「響應式 (RWD)」網頁

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

小結

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

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

更多技術學習資源
前端 JavaScript | HTML /CSS| Bootstrap | RWD | DOM | API | AJAX | Postman | jQuery
後端 HTTP / HTTPS | Node.js | MongoDB | Git | SQL / NoSQL | Docker | React
其他 VSCode | Web App | Leetcode