Loading...

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

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

其中包含著以下的特點:

  • 包含許多事先做好的組件,像是常見的按紐、導覽列以及互動視窗等,都可以藉由指定的簡短語法完成許多複雜的功能與樣式。
  • 提供完整的 css grid system 使你可以輕鬆打造響應式的 layout。
  • 提供高度的客製化彈性並有著良好的瀏覽器支援度。

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。若你學習到這裡時,已經釋出了更新版本,也請不用擔心,只要上手其中一個版本就能夠很快地轉移,因此我會建議你先使用與本文相同的版本,等到熟門熟路以後再自行升級。

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

導入 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)快速有效率

馬上試讀:使用 Bootstrap 等工具實作「響應式 (RWD)」網頁

Bootstrap 5 的重要更新

Bootstrap 5 可說是做了相當大量且有趣的改動,當然會需要一些時間來熟悉這些新功能,但這些改動都相當的正向,讓 Bootstrap 變得更有潛力許多。

1. 移除 jquery 的使用

2. 停止對於 IE10、IE11 瀏覽器的支援

3. 新增 CSS Custom Properties

4. 新增 Bootstrap Icon Library

5. 新增 Responsive Font Sizes

6. 新增/移除的 Class

7. 新增 Utilities API

這次改版還有一個值得注意的點便是:在語法上幾乎沒有與舊有的語法衝突,僅有少數 class 被刪除,這表示在舊有專案升級 Bootstrap 5 的成本相當低,同時可以給使用者帶來更好的體驗,更詳細的可以看這篇:

Bootstrap 5 來了,我該升級嗎?一起了解幾個核心改動

小結

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

進階學習 Bootstrap 與 JavaScript 觀念與實作,領取課程優惠碼開始學習

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