什麼是Bootstrap?
Bootstrap是目前響應式及行動裝置網頁設計，最知名的框架，提供了包含HTML、CSS及JS等內容的框架。
看到關鍵字響應式網頁，就可以知道Bootstrap是前端應用工具
完整的Bootstrap包含了
- bootstrap.css — CSS框架
- bootstrap.js — JavaScript/jQuery 框架
- glyphicons — 圖示集(icon font set)
那最入門的當然就是CSS框架，也就是本篇介紹的主要內容
CSS代表了網頁的門面、設計感，是構成網頁的基本元素
應用Bootstrap則可以幫助開發者設計網頁時
有一些可以立即套用的功能，加速建構響應式內容
也提前幫你處理一些跨瀏覽器可能產生的問題
每個人都應該要用Bootstrap嗎?
當然不
CSS發展自今，設計上也越來越方便
Bootstrap只是提前幫你做好一些工作
然而有時候幫你做了太多工作
或者你開發過程中不想要太多的束縛
以下幾點，則可能是你應用Bootstrap的優點
- 避免重工，可以應用一些現成的功能
- 較複雜的響應式設計則很快就可以應用
- 在不同專案中、或是同專案不同開發者
可以在開發過程中取得應用及解讀程式碼的一致性 - Bootstrap也提供了一些速成樣板
- 確保跨瀏覽器的閱讀相容性
再者，也由於Bootstrap全面性
已經累積了一定的愛用者，所以社群資源也滿豐富的
幾乎大大小小的問題都可以找到相關討論
Hello, World!
目前最穩定的版本是 3.X
https://getbootstrap.com/docs/3.3/getting-started/
下載之後解壓縮檔案，並更名為你的專案
接著，根據其Basic template開始
建立index.html，就可以開始Bootstrap之旅囉
這個Basic template，建立了一個基本的html架構
並包含了ㄧ些基本設定，如viewport、stylesheet link等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
其中，幾個比較重要的設定
<meta name="viewport" content="width=device-width, initial-scale=1">這一個設定是響應式的設計的啟端，
為的是將"內容的寬度參數" 等於 "設備的顯示寬度"
這樣之後在CSS裡面設定width:100%才會符合設備的顯示寬度
補充: 這邊常常也會設定是否允許使用者手動放大網頁
user-scalable=0 代表不允許，若沒特殊需求就維持這個設定吧
或是 user-scalable=1, maximum-scale=2.0
則代表允許手動放大，最多放大到2倍
<link href="css/bootstrap.min.css" rel="stylesheet">這邊的範例只先引入min.css的內容，
其他還有完整版css、theme.css、theme.min.css
如果只是為了設定響應式的格線
及一些簡單排版(例如navbar、jumbotron)
則使用min.css就夠了
(min.css其實只是完整版CSS的一行版本/壓縮版)
一般網頁則會依據需求同時引入好幾份文件
但是最基本的，就是min.css以及自己自訂的style.css這兩份
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>最下面則是引用jquery的來源
之所以會看到來源包含"ajax.googleapis…"的原因
就是因為jquery運作必須仰賴JavaScript引擎，這邊則是藉助了googleapis
比較有規模的則會在自己伺服器建引擎。
而開發時則下載 JavaScript，讓他在本地端運作，這樣測試起來比較快
Navigation Bar
在Bootstrap的範例中，已經建好了基本的Navbar
大概長這樣
Brand 給你放網站logo，要不要放連結自己決定
從左至右Link、Dropdown、Search bar 則是具個別功能的Navbar元件
從這些文字，對應html的架構，再從中挑選自己想要的
以下則是參考Tania Rascia文章的範例Navbar
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Balance Web Development</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
整個navbar的class設定就是”navbar navbar-inverse navbar-static-top”
這邊可以進去看一下這幾個class的設定
舉例而言，navbar是設定一些基本的border、margin及高度這樣
而navbar-inverse的意思 就只是顏色反白而已，沒有特殊功能
這邊挑了幾個部分
第一段 是"navbar-header"
包含了 "網站標題或LOGO"(navbar-brand)及"響應按鈕"(navbar-toggle collapsed)
其中，navbar-brand較容易理解，button比較難一些
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>首先看class
navbar-toggle的CSS設定
基本上，Navbar-toggle就只有設定基本的margin、border跟padding
再來就是大於768px時候，display:none(大於768px會消失)
所以也沒有甚麼重要的
重要的是這邊
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"data-toggle跟data-target是bootstrap自訂的屬性
這邊的意思是:
當點擊menu按鈕時，觸發了”collapse”這個事件，這個事件的目標是下面的”bs-example-navbar-collapse-1”這個navbar的div，按了就展開。
相關說明 參考下列連結
第二段則是
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">這邊的設定就是呼應上面的toggle
id的部分跟上面的data-target吻合
也就是上面按鈕作動時，會與這個class牽連
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consulting</a></li>此外，裡面也放了一個dropdown-toggle
data-toggle則是dropdown
(那個"caret"就是一個三角形的符號而已)
意思就是按了下面會跑出來這樣
這些小工具都是使用bootstrap的優點之一
雖然CSS都可以自己重建，但是用bootstrap則可以省不少時間
但在還不熟悉bootstrap的時候
其實就多挖官網裡面的範例
然後自己套用想要的功能進去
多試幾次，就會抓到裡面參數的作用
接下來
主視覺的部分，就是Jumbotron了(電視牆)
現在滿多網頁都喜歡設計成這樣(上圖是bootstrap範例)
就是把畫面用一個完整的背景圖填滿
jumbotron這邊的設定比較簡單
基本上就是jumbotron->container
<div class="jumbotron">
<div class="container">
<h1>Ready. Set. Code.</h1>
<p>Are you ready to boilerstrap your cross-compatible buzzword? We're Sassy, flat and semantic, so what are you waiting for?</p>
<br>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Download Free Trial »</a>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>這邊，再看一下jumbotron的css
主要就推上下padding而已
Grid
格線，是bootstrap很重要的工具
也就是建立響應式網頁的不二法寶
基本上只要懂兩個概念
就能建完一個基本的響應式網頁格線
第一個概念是12欄位的設定
bootstrap把一個網頁分為十二欄
如果你想佔版面分兩欄，就是兩格六欄(2*6/12)
如果你想把版面分三欄，就是建三格四欄(3*4/12)
再來，第二個概念就是斷點(breakpoint)
bootstrap已經幫你先把裝置尺寸分為四類
分別是XS、SM、MD、LG
對應的前綴詞如下表所示
假設你需要在MD尺寸下建一行三格
就是三個 .col-md-4
回到Tania Rascia的範例，格線設定如下
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
<h3>Cloud Computable</h3>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
<h3>Backwards Compatible</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor.</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<h3>GUI Free</h3>
<p>Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
</div>
</div>
</div>這邊的設定也很簡單
就是container->row->三格col-md-4
這邊有個小問題
col-md-4在md尺寸的裝置下會呈現佔4/12
那在其他尺寸呢？
可以參考這篇
以此為例如果只有md設定，尺寸往上會維持三欄(LG)
尺寸往下(XS、SM)就會從原本三欄，變成三行
其他grid功能參考說明
icon
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>bootstrap已經有內建icon可以用了
只要給他一個class，就會變出icon
這邊有說明icon使用方法
以及基本的icon圖示介紹
大致上就這樣
最後
附上Tania Rascia完整範例
參考
