網頁開發工作包含了美工與程式兩大部份，但是在網頁上這兩者可是千絲萬縷難分難捨，美工人員經常視程式設計為畏途，程式開發者也認為美工為其禁臠不願輕易觸碰，於是，便有了相關的工具出來希望能協助區分兩者的工作，像是PHP環境下的Sarty樣版，而最近大為風行的MVC架構，不但將網頁外觀（View）區分出來，更將資料部份抽離（Model），於是，一個網站的工作便可分為網頁、資料、控制三大部份；但是，基於網頁工作的特性與人手的考量，一般中小企業的網頁工作上，美工與程設還是很難去找專人進行，於是網頁開發人員自然有其解決之道，他們運用了各種不同的工具與技巧來解決自己所不熟悉的領域，他們可能Copy/Paste不同來源的程式碼及美工設計代碼，或者採用自己獨特的開發模式與方法來完成工作，在這樣沒有混亂沒有一致的開發模式下，在一個群體內部或者進行交接傳承時很容易導致inconsistencies的發生。
我在本文介紹Bootstrap的使用，往後在PHP的MVC架構中，會再介紹如何將它整合到PHP CodeIgniter框架之中。
一）Bootstrap由來
Bootstrap便是為了解決這樣的inconsistencies 問題而產生的，它在2011年的時候由Twitter的兩位工程師Mark Otto與Jacob Thorton開發，一開始僅是專門for Twitter內部工程師使用，但是實在是太好用了，它讓群組內的開發工作的效率大增，於是Twitter乾脆將它公開提供給公眾使用，沒有幾年的時間，它便如野火燎原般成為最受歡迎的前端網頁設計工具。
基於Bootstrap的廣泛流行，因此Visual Studio 2013已經開始在Web Forms 專案範本中內建支援Bootstrap，如果您使用Visual Studio開發的話，可以毫不費力的開始使用Bootstrap，但其實Bootstrap是相當簡單易用的，只要使用簡單的文字編輯軟體加上少許的步驟，便可整合Bootstrap讓一個單純簡單的網站揺身一變成為另人讚嘆的專業網站，我在下面文章中，將介紹Bootstrap的基礎及用法。
二）版本差異
Bootstrap 目前的版本是3.2版，下載頁面在http://getbootstrap.com/getting-started/#download，但要注意的 是，VS2013 RC 所建立的 ASP.NET 網站範本所使用的Bootstrap還是2.3.1版，正式版本中的專案範本使用的Bootstrap則為3.0，兩者有很多的差異，下面是比較重要的項目，其它的差異點可參考 http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/：
1. Bootstrap 2.x版支援IE 7.x版本之後的版本，而Bootstrap 3.x則僅支援IE 8之後的版本。
2. Bootstrap 3.x版的介面支援目前流行的flat（扁平）風格，如下圖由左至右分別是2.x版和3.x版，您可以看出它們之間的差異嗎？
3. 手持裝置優先（Mobile-first framework），Bootstrap自3.x開始支援不同螢幕尺寸的Responsive設計成為預設的選項而非可選的選項。
三）安裝與使用
Bootstrap是不需要安裝的，我們有兩種方式來使用它：
1. 下載後放在網站目錄中引用。
2. 直接於網頁上透過CDN(Content delivery network)的方式引用位於其它server上的Bootstrap檔案。
最方便的當然是直接用CDN的方式來引用，您只要將下列二行（紅色部份）放入網頁中即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
如果您選擇下載並將Bootstrap放置於自有的網站，那麼，下載並解壓後，您會看到Bootstrap基本上是由css(樣式設定)以及 js(Javascript程式)兩種類型檔案組成，再加上四個字形檔，這四個字形檔包含來自於Glyphicon Halflings網站的200個免費icon圖示，您可透過Bootstrap來使用它們，下載的Bootstrap檔案架構如下：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
同樣的，您只要將上方範例中的紅字部份改為本機的路徑如下，就可以開始使用了：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
四）瞭解grid
Bootstrap 使用grid(網格)的方式來產生版面並為不同尺寸的螢幕自動佈局(Responsive)，因此，要能夠隨心所欲的使用Bootstrap，我們必須先瞭解Bootstrap的grid設定；Bootstrap的grid system預設是在940px寬的尺寸切分為12等分，若開啟了Responsive功能（3.x版後預設為啟用），則會自動依據螢幕尺寸將grid重新排列，例如，我們打算將某個DIV橫跨整個版面，其語法如下：
<div class="container">
<div class="row">
<div class="span12">
<!--Body content-->
</div>
</div>
</div>
其中的class="span12"表示該DIV的寬度為12個grid，即佔滿整個橫頁，它的執行結果如下：
那麼，如果我們要產生比例為左1右3的版面，那麼以相同方式推理，就要分別用span3和span9的class了，語法如下：
<div class="container">
<div class="row">
<div class="span3">
<!--Sidebar content-->
</div>
<div class="span9">
<!--Body content-->
</div>
</div>
</div>
總之我們可以使用DIV加上不同的class編號來切分我們需要的版面，只要加起來不超過12就可以了。
五）Bootstrap與自適應網頁功能(Responsive)
Bootstrap內建目前流行的Responsive功能，能夠自動依據不同的螢幕尺寸自動調整為合適的版面，我們來看看它怎麼作的：
１）要讓Bootstrap支援Responsive，第一步要作的是在HTML的meta區段，加上此行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
從內容可看出，網頁內容預設會伸展到與裝置相同的寬度，縮放的比例是1:1。
２）除了預設的Bootstrap css檔，我們另外再加入如下的紅色部份：
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
基本上，完成上述兩個步驟之後，您的網頁便支援Responsive可在不同尺寸的裝置上完美的展現了；Bootstrap在3.x版之後改為預設就支援Responsive並移除了container-fluid以及row-fluid等容器物件相關的屬定，然而有時候我們還是會需要不跨裝置的版面，因此若要關掉預設的responsive機制而用固定欄寬顯示，最快速的方式可用如下的方法：修改variables.less如下（紅色部份）：
您會看到我們把適用於Desktop PC的@screen-md值設為3px，@screen-lg設到最大，讓@screen-md滿足全部的螢幕大小就可以了。
Ｃ）顯示尺寸的控制
在Bootstrap中，下列的字元分別代表相對應的螢幕尺寸：所有和 responsive 相關的 class 都以 xs, sm, md, lg 為後綴，如 .col-md-6、col-lg-3 、.hidden-xs等等。
字元
|
代表意義
|
應用裝置
|
使用屬性
|
xs
|
Extra Small
|
Phones Less than 768px
|
.col-xs-$
.visible-xs
|
sm
|
Small Devices
|
Tablets 768px and Up
|
.col-sm-$
. visible-sm
|
md
|
Medium Devices
|
Desktops 992px and Up
|
.col-md-$
.visible-md
|
lg
|
Large Devices
|
Large Desktops 1200px and Up
|
.col-lg-$
.visible-lg
|
例如，下面這個例子，在extra small (phone) 以及small (tablet) 的裝置上只會顯示一欄，medium (medium desktop)的裝置上會顯示二欄，而large (desktop) 的裝置則會顯示四欄（知道為什麼嗎？因為medium的col-md-6有四個，但總和不能超過12，因此會變成上下各兩欄，而col-lg-3四個總和剛好為12，因此一次可以顯示四欄）。
六）常用元件使用範例
Ａ）文字段落常用的class
除了標準及常用的html標籤之外，Bootstrap新增下列數個文字的顯示風格：
<p class="muted">Muted: This text is grayed out.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-error">Error: An error has been occurred while submitting your data.</p>
<p class="text-info">Note: Please read the comments carefully.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
執行結果：
您會注意到Bootstrap使用文字的使用形態來取代顏色定義，它希望用更直覺化的方式讓開發者更容易使用，不止文字，所有Bootstrap相關顏色定義都是如此使用。
Ｂ）Table
Bootstrap對於Table也作了美化及方便的預先處理，讓我們可以省去很多客製的功夫；例如，加上預設的table class會顯示成如下：
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
執行結果：
在table class後面加上table-striped選項便會替不同的row加上不同的背景色。（class="table table-striped"）
執行結果：
table-bordered可加上邊框。（class="table table-bordered"）
table-hover讓滑鼠停在上面時該列會自動變色。（class="table table-hover"）
執行結果：
在表格的<tr>中加入不同的class可顯示不同的背景色。
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>Bill</th>
<th>Payment Date</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>Water</td>
<td>01/08/2013</td>
<td>Paid</td>
</tr>
<tr class="warning">
<td>2</td>
<td>Electricity</td>
<td>03/08/2013</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>3</td>
<td>Credit Card</td>
<td>04/08/2013</td>
<td>Call in to confirm</td>
</tr>
<tr class="error">
<td>4</td>
<td>Telephone</td>
<td>06/08/2013</td>
<td>Due</td>
</tr>
</tbody>
</table>
執行結果：
Ｃ）表單的使用
Bootstrap的表單其排列方式有下列四種：
Vertical Form (預設)
Horizontal Form
Inline Form
Search Form
１）Vertical Form
若我們在form的標籤中不指定class，預設就是使用Vertical 的排列。
<form>
<label>Email</label>
<input type="text" placeholder="Email">
<label>Password</label>
<input type="password" placeholder="Password">
<label class="checkbox"><input type="checkbox"> Remember me</label>
<button type="submit" class="btn btn-primary">Login</button>
</form>
執行結果：這是Vertical的排列
２）Horizontal Form
Horizontal的排列預設會將文字向右對齊，並往左延伸；此種方式非常適合用於form的排版，因為它讓表單上不同大小的元件看起來非常整齊。
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox"><input type="checkbox"> Remember me</label>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
執行結果：這是Horizontal的排列
３）Inline Form
有時候我們需要緊湊的佈局，將元件縮在一個小尺寸的空間中，那麼我們可以考慮用這個方式：
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox"><input type="checkbox"> Remember me</label>
<button type="submit" class="btn btn-primary">Login</button>
</form>
執行結果：
４）Search Form
這是一個快速產生搜尋表單的 class，只要在form的標籤中加入form-search的class 就可以了。
<form class="form-search">
<input type="text" placeholder="Type something…">
<button type="submit" class="btn">Search</button>
</form>
執行結果：
５）加上圖示及簡短提示：
這是很有用的美化及提示功能，只要加入相對應的標籤及class就可以了（紅字的部份），若需要其它不同的圖示名稱可參考Bootstrap網站。
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" placeholder="Username" class="input-medium">
</div>
<div class="input-append">
<input type="text" placeholder="Amount" class="input-small">
<span class="add-on">.00</span>
</div>
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input type="text" placeholder="US Dollar" class="input-small">
<span class="add-on">.00</span>
</div>
執行結果：
Ｄ）選單列
以前最讓美工人員煩惱（因為要寫Javascript程式）、程設人員痛苦（因為要調整顯示方式）的網頁選單，Bootstrap已內建支援，雙方都省事多了。
１）分頁+下拉選單：請注意紅色的部份，這是Bootstrap所增加的部份。
<div class="pagination">
<ul>
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
執行結果：
２）橫式下拉選單：紅色為Bootstrap新增的部份
<div class="navbar navbar-static">
<div class="navbar-inner">
<a href="#" class="brand">Company Name</a>
<ul role="navigation" class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
執行結果：
Ｅ）頁碼列表
頁次選擇欄也是常用的網頁功能，Bootstrap可快速產生美觀的頁碼選擇；只要在DIV中加入名稱為pagination的class就可以了：
１）基本的頁碼表：
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
執行結果：
頁碼表預設是朝左對齊的，如果要改為置中對齊，只要改為class="pagination pagination-centered"即可。
２）單純的上下頁：
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
執行結果：
Ｆ）各式風格的按鈕：
Bootstrap內建不同風格的各式按鈕如下
<button class="btn" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-inverse" type="button">Inverse</button>
<button class="btn btn-link" type="button">Link</button>
也可以產生一種叫作Buttons checkbox的按鈕群組，只有一個按鈕是沒有被按下的：
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
執行結果：
與Buttons checkbox相反的是Buttons Radio按鈕群組，只有一個按鈕是被按下的：
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
執行結果：
七）Bootstrap相關的輔助工具
Layoutit提供各式Bootstrap grid及各式元件，以拖拉方式讓您規劃整個網頁的佈局後，將整個網頁的html及css打包好提供下載直接使用；Layoutit目前已支援Bootstrap 3.x版。
其它類似的Bootstrap佈局編輯器相當多，例如http://www.bootply.com、http://www.pingendo.com/、https://jetstrap.com/、http://pinegrow.com/、http://brix.io/
