Bootstrap 是什麼?給新手的 Bootstrap 入門教學

Bootstrap 是什麼?

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

Bootstrap 的特性

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

其中包含著以下的特點:

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

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

  • Bootstrap 聲譽良好,在開源 (open-source) 業界佔有優勢,並且已經完善地測試、維護和紀錄過,可放心使用。
  • Bootstrap 本身有非常完善的教學文件,因此「學習如何使用 Bootstrap」幾乎就是弄清楚要怎麼查找 Bootstrap 的官方網站。

另外,由於 Bootstrap 提供了很多現成的元件樣式,你甚至可以把 Bootstrap 的官方文件當成 CSS 範例書,參考它是怎麼架構 HTML 和 CSS,以及如何命名 CSS class 等等。

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

Bootstrap 入門:從官方網站安裝

bootstrap official website

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 標籤內容:

bootstrapCDN

以下是引入專案的方式:

  • 請將 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 文件使用方式

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

也因為 Bootstrap 的使用方法是「翻找文件、複製貼上」,所以需要稍微熟悉文件裡有哪些項目。這份文件包羅萬象,我們建議你可以先快速瀏覽以下幾個頁面:

內容 (Content)

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 的網格系統允許你通過預先定義的列(columns)和行(rows)來創建響應式網頁布局。

JavaScript 插件

Bootstrap 還包含了多個自定義的 jQuery 插件。例如,模態窗口(Modal)插件可用於顯示彈出窗口。

自定義和擴展

雖然Bootstrap提供了許多現成的樣式和功能,但你也可以通過添加自定義CSS或修改Bootstrap的Sass源文件來進行擴展和個性化。

如何使用Bootstrap來創建一個簡單的網頁

步驟1:設置環境

首先,你需要在你的網頁中引入Bootstrap。最簡單的方法是使用CDN:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 教學案例</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- 你的內容將在這裡 -->

<!-- 引入Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

步驟2:使用網格系統創建佈局

Bootstrap使用一個12列的網格系統來創建響應式佈局。讓我們創建一個簡單的三欄佈局:

<div class="container">
<div class="row">
<div class="col-md-4">左側內容</div>
<div class="col-md-4">中間內容</div>
<div class="col-md-4">右側內容</div>
</div>
</div>

步驟3:添加導航欄

接下來,我們添加一個簡單的導航欄在頁面頂部:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">我的網站</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">價格</a>
</li>
</ul>
</div>
</nav>

步驟4:添加按鈕和表單元素

在中間內容區域添加一個按鈕和一個簡單的表單:

<div class="col-md-4">
<button type="button" class="btn btn-primary">一個按鈕</button>
<form>
<div class="form-group">
<label for="email">電子郵件地址:</label>
<input type="email" class="form-control" id="email" placeholder="輸入郵件">
</div>
<div class="form-group">
<label for="pwd">密碼:</label>
<input type="password" class="form-control" id="pwd" placeholder="輸入密碼">
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>

步驟5:添加響應式特性

使用Bootstrap的響應式工具類來優化你的佈局。例如,你可以讓左側和右側的欄在小屏幕上堆疊起來:

<div class="col-md-4 col-sm-12">左側內容</div>
<div class="col-md-4 col-sm-12">中間內容</div>
<div class="col-md-4 col-sm-12">右側內容</div>

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 設定細節。

程式設計入門,4 週零基礎建立數位職涯基礎能力