Bootstrap 的使用說明內容不少，份量足以出一本書，不過工具書用從頭看到尾的方式來學習，效果不見得比較好。如同「一圖勝過千言萬語」，從範例中來學習、吸收 Bootstrap，效率會來得更快，印象也比較深刻。
本篇提供一個簡單的小範例，可以熟悉以下這些功能的用法：
- 網格
- 面板
- 表單輸入
- 按鈕
- Well
(圖片出處: negativespace.co)
一、原始架構及方針
1. Layout 草圖
這是最近的一個案例，案主需要將「樹莓派」(Raspberry Pi)裝置儲存的數據，在網頁上顯示，並需要搜尋功能。
上圖為原始需求的草圖：
- 左右兩個欄位
- 左邊按下對應裝置的按鈕後，要能顯示該裝置的數據
- 右邊需要搜尋功能，抓出所有相同 ID 的裝置及數據
以上的版面架構算是滿簡單，從 Bootstrap 都能找到對應的組件來套用。
2. Bootstrap 組件
- 首先分割左右欄位，可利用「網格」(格線)系統，還能做到自適應 RWD 效果
- 左右欄位的標頭(header)區塊，可利用「Well」組件
- 每個裝置的數據資訊區塊，可利用「面板」+「按鈕」組合拳
- 搜尋功能可利用「表單」中的 input 組件來組合出草圖的效果
從以上說明瞭解進行的方向後，以下來看範例程式碼。
開始之前，可先參考「Bootstrap 3 & 4 速查表﹍中英文版整理」，瞭解相關語法的說明要去哪裡搜尋。
本文以下的說明請直接對照相關的中英文網站，主要將觀念帶到，細節就不深入了。
二、程式碼說明
1. 引用 Bootstrap
首先記得在
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>2. 網格(Grid)系統
- 可先參考「Bootstrap Grid System 排版」，瞭解網格系統的概念
- 切成左右 2 個欄位，我預計使用 4:8 的比例
- 外圍使用
container-fluid 會比container 有更好的 RWD 效果 - 下一層使用
row 組合左右 2 個欄位 - 左邊欄位使用
col-sm-4 ，右邊欄位使用col-sm-8 ，代表平板以上的寬度(768px)會維持 4:8 的比例 - 768px 以下的裝置，左右兩欄會自動成為 100% 寬
簡單的切版範例如下：
<div class="container-fluid">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>3. Well
「Well」組件可以很方便的做出網站標頭(header)區塊，左右兩欄的範例如下：
<!--左邊欄位-->
<div class="well">目前裝置連線狀況</div>
<!--右邊欄位-->
<div class="well">搜尋頁面</div>4. 面板(panel)
「面板」(panel)這個套裝組件，拿來顯示裝置資訊真是再好用不過了：
- 最外層使用
panel ，且可使用預設的 5 種顏色，請參考 Bootstrap 相關說明，例如panel-primary 是深藍色 - 面板標題使用
panel-heading - 面板內容使用
panel-body - 面板底部使用
panel-footer
範例程式碼如下：
<div class="panel panel-primary">
<div class="panel-heading">裝置一</div>
<div class="panel-body">所有數據資料</div>
<div class="panel-footer">獲取第1台數據</div>
</div>5. 按鈕(button)
上面的 "獲取第1台數據" 字串必須用按鈕的形式來呈現：
- 再按鈕標籤
button 使用 classbtn 可呈現預設按鈕樣式 - 有 5 種預設顏色可使用，例如
btn-primary 是深藍色 - 若按鈕要佔用全部寬度，可使用
btn-block - 可改變按鈕尺寸，例如
btn-lg 代表使用大尺寸按鈕
依據本案例的草圖，按鈕程式碼如下：
<button class="btn btn-default btn-block">獲取第1台數據</button>6. 輸入框 + 送出按鈕(input)
右邊欄位的 "搜尋框 + 查詢按鈕"，可使用 Bootstrap 的「輸入框組」功能：
- 外圍宣告使用
input-group - 輸入框 input 必須使用
form-control - 輸入框可改變大小，例如大尺寸請使用
input-lg - 為輸入框加入額外元素可使用
input-group-addon ，加入額外按鈕可使用input-group-btn - 在額外按鈕之內，加入前面的 bootstrap 按鈕元件語法，就完成組合效果了
以下是範例程式碼：
<div class="input-group">
<input placeholder="輸入 ID" class="form-control input-lg" type="text">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg">查詢</button>
</span>
</div>三、完整程式碼
把以上每個部分都組合起來，以下是完整的程式碼。
輸入 HTML/CSS 覺得麻煩的話，一定要使用「前端開發神器 Emmet 快速上手教學」。
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.well, .panel {text-align: center;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--左邊欄位-->
<div class="col-sm-4">
<div class="well">目前裝置連線狀況</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置一</div>
<div class="panel-body">這裡是數據內容</div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第1台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置二</div>
<div class="panel-body">這裡是數據內容</div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第2台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置三</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第3台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置四</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第4台數據</button>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">裝置五</div>
<div class="panel-body"></div>
<div class="panel-footer">
<button class="btn btn-default btn-block">獲取第5台數據</button>
</div>
</div>
</div>
<!--右邊欄位-->
<div class="col-sm-8">
<div class="well">搜尋頁面</div>
<div class="input-group">
<input placeholder="輸入 ID" class="form-control input-lg" type="text">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg">查詢</button>
</span>
</div>
<br/>
<div class="panel panel-primary">
<div class="panel-heading">Raspberry Pi 加入成功 裝置 1</div>
<div class="panel-body">這裡是數據內容</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Raspberry Pi 加入成功 裝置 2</div>
<div class="panel-body">這裡是數據內容</div>
</div>
</div>
</div>
</div>
</body>
</html>
四、範例效果
下面是程式碼的網頁執行畫面，從頭到尾只需設定 class 名稱，除了一個置中的 CSS 語法，完全不用調整其他 CSS 參數，就能得到一定水準的版面效果，Bootstrap 是不是非常方便呢！
更多 Bootstrap 相關文章：
您好版主!!請教您Bootstrap切成左右 2 個欄位,可不可以變成左中右 3 個欄位嗎?我想要3欄式不知語法怎麼寫請賜教謝謝!!感謝您!!
回覆刪除信箱 sfpen01@gmail.com
可以 google "bootstrap 切版" 或 "bootstrap grid" 這些關鍵字，你會得到比較詳細的說明及 css 切版的概念。
刪除