什麼是Bootstrap ？
- Bootstrap是更快，更容易的Web開發的自由前端框架
- Bootstrap包括排版，表格，按鈕，表格，導航，模態，圖像轉盤和許多其他，以及可選的JavaScript插件HTML和CSS基於設計模板
- Bootstrap也讓您輕鬆地創建響應設計的能力
什麼是響應網頁設計？
自適應網頁設計是如何創建的網站會自動調整自己好看上的所有設備，從小到手機桌面大。
Bootstrap歷史
Bootstrap由Mark奧托和雅各桑頓在Twitter的開發，並在GitHub在2011年8月發布了作為一個開放源碼產品。
在2014年6月Bootstrap是在GitHub上的一號工程！
為什麼要使用Bootstrap ？
優勢Bootstrap ：
- 使用方便：任何人使用HTML和CSS的只是基本的知識，就可以開始使用Bootstrap
- 響應特性： Bootstrap的響應CSS調整到手機，平板電腦和台式機
- 移動第一種方法：在Bootstrap 3，移動為先的風格是核心框架的一部分
- 瀏覽器兼容性： Bootstrap與所有現代瀏覽器（Chrome瀏覽器，火狐，IE，Safari和Opera）兼容
從哪裡獲得Bootstrap ？
有兩種方法可以開始使用Bootstrap在自己的網站。
您可以：
- 下載Bootstrap從getbootstrap.com
- 包括Bootstrap從CDN
下載Bootstrap
如果你想下載和主機Bootstrap自己，去getbootstrap.com ，並按照指示。
Bootstrap CDN
如果你不想下載和主機Bootstrap自己，你可以從包括它CDN （內容分發網絡）。
MaxCDN提供CDN支持Bootstrap的CSS和JavaScript。 還包括jQuery的：
MaxCDN：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>使用的一個優點Bootstrap CDN ：
許多用戶已經從下載的引導MaxCDN訪問另一個網站時。 這樣一來，它就會從緩存中，當他們訪問您的網站，從而導致更快的加載時間加載。 此外，大多數CDN's將確保一旦用戶請求從一個文件，它會從最接近他們的服務器上，這也導致更快的加載時間提供服務。
創建第一個Web頁面Bootstrap
1.添加HTML5的doctype
Bootstrap使用HTML元素和需要HTML5文檔類型CSS屬性。
始終包含在頁面開頭的HTML5文檔類型，使用lang屬性和正確的字符集一起：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>2. Bootstrap 3是移動先行
Bootstrap 3被設計成響應於移動設備。 移動為先的風格是核心框架的一部分。
為了確保適當的渲染和觸控縮放，添加以下<meta>的標記內<head>元素：
<meta name="viewport" content="width=device-width, initial-scale=1"> 的width=device-width部分設置頁面的寬度跟隨設備的屏幕寬度（這將取決於在設備上）。
該initial-scale=1部分設置當頁面首先被瀏覽器加載的初始放大級。
3.集裝箱
Bootstrap還需要包含的元素來包裝網站內容。
有兩個容器類可供選擇：
- 該
.container類提供了一個響應固定寬度的容器 - 該
.container-fluid類提供了一個全寬的容器 ，跨越視口的整個寬度
注：容器不能嵌套（你不能把另一個容器內的容器）。
兩個基本Bootstrap頁
下面的示例演示了一個基本的代碼Bootstrap頁面（一個負責任的固定寬度容器）：
例
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First
Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> 試一試» 下面的示例演示了一個基本的代碼Bootstrap頁（全寬容器）：
例
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My
First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> 試一試»