你有參加過黑客松嗎？沒有的話，那你有看過黑客松最後的 demo 嗎？儘管很多黑客松其實都是假的，簡報松才是真的，但應該會有個幾組你很有印象，就是簡報做的很醜，通常都是預設版面或甚至白底黑字的那種。
有印象嗎？我跟你打賭一百批幣，那一組一定全部都是工程師。
好啦，雖然這樣講好像對工程師有種刻板印象，但我認為的確大多數的工程師都沒有什麼美感，至少沒有設計師那麼有美感（這不是廢話嗎）。有時候設計出來的頁面也不能說醜，但就是少了點什麼，需要設計師的巧手，在這邊加幾個點、那邊加幾條線，突然之間整個畫面變得超級有質感，感覺前面可以加上一個 i 然後潮到出水似的。
我本人也是一個不知道怎麼從零到一寫出一個好看網頁的人，你看我前幾章給的那個部落格範例就知道了，好像是十幾年前的那種網頁。阿，我應該再加上跑馬燈還有會繞著滑鼠一直轉的彩虹文字才對。
相信一定有很多人都跟我一樣非常苦惱，我會寫程式，要做一些基本功能也不是什麼問題，可是介面就是醜到沒有人會想來用。
不過放心，你有救了。讓我為你們隆重介紹，工程師的救星：Bootstrap！直接先來看一下官網上的死羅根：
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap是用於在網絡上開發響應式移動第一個項目的最流行的HTML，CSS和JS框架。（Google 翻譯）
讓我們直接先來看一個最簡單的範例，先寫一個長得非常基本的 html 出來
<body>
<div>
<h1>文章列表</h1>
<table>
<tr>
<th>#</th>
<th>標題</th>
</tr>
<tr>
<td>1</td>
<td>第一篇文章</td>
</tr>
<tr>
<td>2</td>
<td>第二篇文章</td>
</tr>
</table>
</div>
</body>
然後我們引入工程師救星 bootstrap 的 css，並且再幫元素加上一些 class
<html>
<head>
<link rel="stylesheet" href="ahttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>文章列表</h1>
<table class="table">
<tr>
<th>#</th>
<th>標題</th>
</tr>
<tr>
<td>1</td>
<td>第一篇文章</td>
</tr>
<tr>
<td>2</td>
<td>第二篇文章</td>
</tr>
</table>
</div>
</body>
</html>
改造前：
改造後：
有沒有很神奇！只是加了兩個 class 上去而已喔。這個就是 bootstrap 的威力。
所以說穿了，其實它就是先幫你寫好container跟table這兩個 class 的 css，還有覆寫掉 h1 的 css。你如果想要的話，也可以自己來做一套 CSS framework。那 bootstrap 之所有那麼有名就是因為它提供了一堆的 class 給你用，你想要什麼幾乎都找得到，而且還有一個更重要的是：mobile friendly。
現在已經是個幾乎人人都有智慧型手機的年代，所以用手機上網已經是一件非常非常平凡無奇的事情，就跟吃飯喝水睡覺打東東差不多。這個時候問題就來了：你要怎麼讓一個網頁可以在電腦上長得很好看，在手機上也長得很好看？
一個最直覺的方法當然是做兩套，手機一套、電腦一套不就行了嗎？沒錯，這的確是一個解法，但這個解法就是成本比較高一點，因為你必須同時開發、維護兩套不同的東西，只要任何一個地方有變你就要改兩次。
因此有一個你應該聽過的名詞：RWD，Responsive Web Design，響應式網頁。意思就是頁面會跟著螢幕的寬度大小來變動，原理的話基本上是網格系統。我直接給你看一個範例：
<div class="container">
<div class="row">
<div class="col-sm-3">
1
</div>
<div class="col-sm-3">
2
</div>
<div class="col-sm-3">
3
</div>
<div class="col-sm-3">
4
</div>
</div>
<div class="row">
<div class="col-sm-6">
Left
</div>
<div class="col-sm-6">
Right
</div>
</div>
</div>
原本是四格跟兩格的網頁，在螢幕大小縮到一定尺寸之後變成了一行一行的，每一格都佔滿了整個視窗。你可以把左右兩個想像成是兩個介紹商品的版面，在電腦看的時候，會是左右兩欄式的排版，可是在手機看，因為螢幕大小比較小的關係，所以就自己適應成上下的排版，比較適合使用者觀看。
還有一個例子是上方的導覽列，在螢幕變小的時候會改由選單式的方式呈現：
都是同樣的內容，只是排版方式變了而已。
接著再讓我們把重點拉回 bootstrap 身上。在實際工作的時候，也有滿多場合會用到 bootstrap。事實上有很多網站都是以 bootstrap 為基底打造的，然後做一些客製化處理。簡單來說 bootstrap 就只是一個基本的框架，套上去之後你可以再根據自己的需求來改，這樣子也會比從頭到尾都自己重新開發來得快速。
我們現在就來看一下官方文件然後寫一個超級簡單的部落格管理後台介面出來好了
首先，先來照抄官方範例改一改，來加個 navbar 導覽列：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blog 管理系統</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">文章管理</a></li>
<li><a href="#">頁面管理</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">進階設定 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">管理設置</a></li>
<li><a href="#">廣告設置</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">刪除帳號</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登出</a></li>
</div>
</div>
</nav>
navbar-header 裡面的 icon-bar 主要是給 mobile 用的，就是俗稱「hamburger」的選單小 icon，你可以試著拿掉一個 span 看看會發生什麼事情。另外，我有把一些aria開頭的屬性刪掉，想知道那是什麼的可以參考：ARIA role 相關筆記。基本上那些你不加其實也不會怎樣，因為你自己也看不出來。但是針對一些特別的場景，例如說盲人看你的網頁，會有語音軟體把網頁「念出來」，這時候這些屬性就很重要，可以給軟體一個提示說應該怎麼念。
上面這些 bootstrap 的 class 你就算下次忘記了也沒差，因為我從來沒記得過...我每次都是要用的時候再去查，或是抄自己以前寫的 code。
完成了選單之後，再來個表格，然後有按鈕可以選
<div class="container">
<table class="table table-striped table-bordered">
<tr>
<th>標題</th>
<th>發表日期</th>
<th>操作</th>
</tr>
<tr>
<td>第一篇文章</td>
<td>2016.12.01</td>
<td>
<span class="btn btn-primary">編輯</span>
<span class="btn btn-danger">刪除</span>
</td>
</tr>
<tr>
<td>第二篇文章</td>
<td>2016.12.02</td>
<td>
<span class="btn btn-primary">編輯</span>
<span class="btn btn-danger">刪除</span>
</td>
</tr>
</table>
</div>
最後再來個新增文章的按鈕，順便示範一下 inline css，直接在 html 裡面用 style 這個屬性控制 css
<div class="btn btn-primary" style="margin-bottom:10px">新增文章</div>
完整程式碼：http://codepen.io/aszx87410/pen/qqyVMJ
是不是覺得超級輕鬆簡單！幾乎一行 css 都不用寫，你只要查查官方文件然後套一下 class 就行了，你就有一個簡單又不醜的網頁了！
有沒有覺得自己很厲害，我們先幫自己掌聲鼓勵鼓勵！來，數到三一起愛的鼓勵，一二三開始！
好的，鼓勵完之後我要打破你的粉紅泡泡，其實你超級弱而且一點都不厲害，厲害的是 bootstrap 這個東西。但是認清自己的不足絕對是一件好事，才能讓自己往更好的方向邁進。
加油！等你有朝一日可以自己用手刻出像 bootstrap 這樣的一套框架的時候，你就成功了！到那個時候可千萬不要忘記我啊，霸托。
因為 bootstrap 的確拯救了為數眾多的工程師，所以現在每個工程師的必備技能就是用 bootstrap 套版，導致很多網站看起來都一模一樣，你一看就知道是用 bootstrap 弄出來的。
在這邊跟大家推薦一個網站：bootswatch。用法非常簡單，你就把原本預設的 bootstrap css 換成這個網站上提供的就好，你就會發現你的版面變了一個樣式，這網站大概提供了將近二十種，應該可以找到自己喜歡的。
這樣就可以跟別人有點區隔（但如果大家都知道這個網站，感覺衝到的機率還是滿高的）
最後，當你知道 bootstrap 裡面的這幾個東西之後，你就可以前往下一章了：
iThome鐵人賽
看影片追技術