Bootstrap
Bootstrap
基本概念
Bootstrap基本上是很多CSS、JavaScript (jQuery)的集合，採用Bootstrap的好處是:
可以不必自己去寫這些CSS及JavaScript。
Bootstrap支援響應式網頁設計(Responsive Web Design, RWD)，可以讓我們的網頁在電腦、平板及手機上有不同的展現方式。
跨瀏覽器的相容問題也被處理。
引用bootstrap的方式有兩種，第一種是將相關的js檔案下載下來，並在html的<head></head>中定義使用下載的css及js檔案。
<head>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
第二種是使用Content Delivery Network (CDN)，直接引用網路上的css及js檔案。網路上有很多CDN可以使用，如:google或微軟，如果使用maxcdn的CDN:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
從以上的範例可以看到bootstrap是基於jQuery之上，不過，我們並不需要去寫javascript，而是使用這些已經寫好的javascript。
基本語法
以下的範例，是一個很基本的使用範例，在一開始的<!DOCTYPE html>，就是宣告內容是以HTML5格式，另外，在meta的部份，最好也設定charset，避免中文顯示的問題。除此之外，多了view port的設定，這主要是為行動載具，在這個設定裡，設定寬度為設備的最大寬度，並且先設定螢幕放大縮小的比率為1。
如同上面的解釋，在<head></head>裡定義了bootstrap的引用方式 (利用CDN)。
在<body></body>中，設定了一個div，並將這個div的class設定為container，簡單的說就是設定<div></div>裡的內容是採用container的樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>吳濟聰</p>
<p>輔仁大學資訊管理學系助理教授</p>
</div>
</body>
</html>
在bootstrap裡，一個頁面要有一個(或多個)container，所有的元件最好都要放在container裡，如果不把元件放在container裡，可能會有版面的零亂的狀況發生。如果有多個container，每個container必須分開，container裡不要有另一個container。另外，container有兩種，一種是佔滿全頁的container-fluid，另一種就是有固定寬度的container。在RWD的概念下，所謂的固定寬度並不是在所有螢幕畫面大小或設備上的寬度都一樣，而是在某些範圍內所使用的寬度是固定的。畫面在768 pixel以下，是佔滿個螢幕，畫面在768 pixel以上，寬度固定為750pixel，畫面在992 pixel以上，寬度固定為970pixel，畫面在1200 pixel以上，寬度固定為1170pixel。
基本元件
Bootstrap改善了一些html的基本元件，也增加了不少的元件，以前這些效果都需要自己一個一個去找別人寫好的範例，現在，bootstrap把這些都整理在一起了。
基本元件的部份: 表格(table)、圖片(image)、表單(form)、按鈕(button)、輸入(input)
新增的元件:巡覽(navigation)、提示標誌(bage)、大螢幕效果(jumbotron)
新增的javascript效果:轉場(transition)、對話框(modal)、下拉選單(dropdown)、提示訊息(tooltip)、折疊效果(collapse)、輪播(carousel)
以前面在HTML裡使用過的table為例，只要在table後加上class="table"，就可以套用bootstrap的table了。bootstrap的table有不同的種類，如:table-striped, table-bordered, table-hover, table-condensed，而且這些種類是可以混搭的，如以下範例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<table class="table table-bordered table-striped">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
</body>
</html>
Grid
Bootstrap的格線系統(Grid)是用來解決不同螢幕尺寸間元件顯示的問題。基本上，在bootstrap中，是將螢幕化為12個等分，元件的寬度，就是用佔了幾等分來表示。另外，Bootstrap也預先設定了四種螢幕尺寸:xs (手機螢幕, 768 pixel以下)、sm (平板螢幕, 768 pixel以上)、md (桌上型電腦螢幕,992 pixel以上 )、lg (較大的桌上型電腦螢幕, 1200 pixel以上)，可以設定在不同螢幕尺寸元件所佔的等分。例如下面的排版就是在xs下，佔6等分 (1/2)，在sm下佔4等分 (1/3)。
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>