　　網頁開發工作包含了美工與程式兩大部份，但是在網頁上這兩者可是千絲萬縷難分難捨，美工人員經常視程式設計為畏途，程式開發者也認為美工為其禁臠不願輕易觸碰，於是，便有了相關的工具出來希望能協助區分兩者的工作，像是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乾脆將它公開提供給公眾使用，沒有幾年的時間，它便如野火燎原般成為最受歡迎的前端網頁設計工具。

https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTyMX4xcfx0fOGSOw16NiLL0Gp2d2zO7peqvY3nze4Hx6-JeZxL

　　基於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版，您可以看出它們之間的差異嗎？

screen Bootstrap v2 dropdown with box shadow

screenshot Bootstrap v3 dropdown with box shadow

3. 手持裝置優先（Mobile-first framework），Bootstrap自3.x開始支援不同螢幕尺寸的Responsive設計成為預設的選項而非可選的選項。

三）安裝與使用

　Bootstrap是不需要安裝的，我們有兩種方式來使用它：

1. 下載後放在網站目錄中引用。

2. 直接於網頁上透過CDN(Content delivery network)的方式引用位於其它server上的Bootstrap檔案。

最方便的當然是直接用CDN的方式來引用，您只要將下列二行（紅色部份）放入網頁中即可：

<!DOCTYPE html>

<html>

<head>

<title>Basic Bootstrap Template</title>

</head>

<body>

<h1>Hello, world!</h1>

</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

　同樣的，您只要將上方範例中的紅字部份改為本機的路徑如下，就可以開始使用了：

四）瞭解grid

　　Bootstrap 使用grid(網格)的方式來產生版面並為不同尺寸的螢幕自動佈局(Responsive)，因此，要能夠隨心所欲的使用Bootstrap，我們必須先瞭解Bootstrap的grid設定；Bootstrap的grid system預設是在940px寬的尺寸切分為12等分，若開啟了Responsive功能（3.x版後預設為啟用），則會自動依據螢幕尺寸將grid重新排列，例如，我們打算將某個DIV橫跨整個版面，其語法如下：

</div>

　　其中的class="span12"表示該DIV的寬度為12個grid，即佔滿整個橫頁，它的執行結果如下：

　　那麼，如果我們要產生比例為左1右3的版面，那麼以相同方式推理，就要分別用span3和span9的class了，語法如下：

</div>

</div>

總之我們可以使用DIV加上不同的class編號來切分我們需要的版面，只要加起來不超過12就可以了。

五）Bootstrap與自適應網頁功能(Responsive)

Bootstrap內建目前流行的Responsive功能，能夠自動依據不同的螢幕尺寸自動調整為合適的版面，我們來看看它怎麼作的：

１）要讓Bootstrap支援Responsive，第一步要作的是在HTML的meta區段，加上此行：

從內容可看出，網頁內容預設會伸展到與裝置相同的寬度，縮放的比例是1:1。

２）除了預設的Bootstrap 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，因此一次可以顯示四欄）。

六）常用元件使用範例

以下介紹一些常用元件的使用範例，其實Bootstrap支援更多的元件及特殊效果，請連到http://getbootstrap.com/components/網頁，右側便有更多的元件及範例使用說明，CSS部份可到http://getbootstrap.com/css/，一樣在右側有各式的CSS使用範例可參考，以下僅介紹較常使用的部份。

Ａ）文字段落常用的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會顯示成如下：

<thead>

<tr>

<th>First Name</th>

<th>Email</th>

</tr>

</thead>

<tbody>

<tr>

<td>Carter</td>

<td>johncarter@mail.com</td>

</tr>

<tr>

<td>Peter</td>

<td>Parker</td>

<td>peterparker@mail.com</td>

</tr>

<tr>

<td>Rambo</td>

<td>johnrambo@mail.com</td>

</tr>

</tbody>

</table>

執行結果：

在table class後面加上table-striped選項便會替不同的row加上不同的背景色。（class="table table-striped"）

執行結果：

Twitter Bootstrap Tables with Alternate Background

table-bordered可加上邊框。（class="table table-bordered"）

table-hover讓滑鼠停在上面時該列會自動變色。（class="table table-hover"）

執行結果：

Twitter Bootstrap Table with Hover States

在表格的<tr>中加入不同的class可顯示不同的背景色。

<thead>

<tr>

<th>Payment Date</th>

<th>Payment Status</th>

</tr>

</thead>

<tbody>

<td>Water</td>

</tr>

<td>Electricity</td>

<td>Pending</td>

</tr>

<td>Credit Card</td>

<td>Call in to confirm</td>

</tr>

<td>Telephone</td>

</tr>

</tbody>

</table>

執行結果：

Ｃ）表單的使用

Bootstrap的表單其排列方式有下列四種：

Vertical Form (預設)
Horizontal Form
Inline Form
Search Form

１）Vertical Form

若我們在form的標籤中不指定class，預設就是使用Vertical 的排列。

<form>

<label>Email</label>

<label>Password</label>

<label class="checkbox"><input type="checkbox"> Remember me</label>

<button type="submit" class="btn btn-primary">Login</button>

</form>

執行結果：這是Vertical的排列

２）Horizontal Form

Horizontal的排列預設會將文字向右對齊，並往左延伸；此種方式非常適合用於form的排版，因為它讓表單上不同大小的元件看起來非常整齊。

<label class="control-label" for="inputEmail">Email</label>

</div>

<label class="control-label" for="inputPassword">Password</label>

</div>

<label class="checkbox"><input type="checkbox"> Remember me</label>

<button type="submit" class="btn btn-primary">Login</button>

</div>

</form>

執行結果：這是Horizontal的排列

３）Inline Form

有時候我們需要緊湊的佈局，將元件縮在一個小尺寸的空間中，那麼我們可以考慮用這個方式：

<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 就可以了。

<button type="submit" class="btn">Search</button>

</form>

執行結果：

５）加上圖示及簡短提示：

這是很有用的美化及提示功能，只要加入相對應的標籤及class就可以了（紅字的部份），若需要其它不同的圖示名稱可參考Bootstrap網站。

</div>

</div>

</div>

執行結果：

Twitter Bootstrap Prepended and Appended Inputs

Ｄ）選單列

　　以前最讓美工人員煩惱（因為要寫Javascript程式）、程設人員痛苦（因為要調整顯示方式）的網頁選單，Bootstrap已內建支援，雙方都省事多了。

　　１）分頁+下拉選單：請注意紅色的部份，這是Bootstrap所增加的部份。

<ul>

</ul>

</div>

執行結果：

Twitter Bootstrap Tabs with Dropdown Menus

２）橫式下拉選單：紅色為Bootstrap新增的部份

<a href="#" class="brand">Company Name</a>

<li><a href="#">Profile</a></li>

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>

<li><a href="#">Inbox</a></li>

<li><a href="#">Drafts</a></li>

<li><a href="#">Sent Items</a></li>

<li><a href="#">Trash</a></li>

</ul>

</li>

</ul>

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Settings</a></li>

</ul>

</li>

</ul>

</div>

執行結果：

Twitter Bootstrap Dropdowns within Navbar

Ｅ）頁碼列表

頁次選擇欄也是常用的網頁功能，Bootstrap可快速產生美觀的頁碼選擇；只要在DIV中加入名稱為pagination的class就可以了：

１）基本的頁碼表：

<ul>

</ul>

</div>

執行結果：

頁碼表預設是朝左對齊的，如果要改為置中對齊，只要改為class="pagination pagination-centered"即可。

２）單純的上下頁：

<li><a href="#">Previous</a></li>

</ul>

執行結果：

Ｆ）各式風格的按鈕：

　　Bootstrap內建不同風格的各式按鈕如下

<button class="btn" type="button">Default</button>
Primary

<button class="btn btn-primary" type="button">Primary</button>
Info

<button class="btn btn-info" type="button">Info</button>
Success

<button class="btn btn-success" type="button">Success</button>
Warning

<button class="btn btn-warning" type="button">Warning</button>
Danger

<button class="btn btn-danger" type="button">Danger</button>
Inverse

<button class="btn btn-inverse" type="button">Inverse</button>
Link

也可以產生一種叫作Buttons checkbox的按鈕群組，只有一個按鈕是沒有被按下的：

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

執行結果：

與Buttons checkbox相反的是Buttons Radio按鈕群組，只有一個按鈕是被按下的：

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

執行結果：

七）Bootstrap相關的輔助工具

Ａ）Layoutit：http://www.layoutit.com/

　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/

Ｂ）Bootswatch：http://bootswatch.com/

　　Bootswatch提供各式免費的Bootstrap佈景樣版，一般開發者會使用Layoutit完成版面規劃後，再到Bootswatch選用適合的佈景來套用。另一個提供樣版主題的網站是http://startbootstrap.com/，也有相當多不錯的免費佈景樣版，此外https://wrapbootstrap.com/以及http://bootstrapstyler.com 提供的則是付費購買的佈景樣版；這些佈景主題都是完整的網站，包含了完整的頁面及bootstrap相關檔案，只要下載後直接修改其內容便可使用。

IT Manager

2014年8月22日星期五

Twitter Bootstrap

一）Bootstrap由來

二）版本差異

三）安裝與使用

四）瞭解grid

五）Bootstrap與自適應網頁功能(Responsive)

Ｃ）顯示尺寸的控制

六）常用元件使用範例

Ａ）文字段落常用的class

Ｂ）Table