一、BootStrap簡介
BootStrap是由Twitter（著名的社交網站）推出的前端開源工具包，是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。、、
BootStrap中預定義了一套CSS樣式和與樣式對應的JQuery，應用是我們只需要提供固定的HTML結構，添加BootStrap中提供的Class名稱，就可以完成指定效果的實現。
二、BootStrap的優勢
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機，它爲開發人員創建接口提供了一個簡潔統一的解決方案。
- 組件：它包含了功能強大的內置組件，易於定製。
- 定製：它還提供了基於 Web 的定製。
- 開源：它是開源的。
三、BootStrap包中提供的內容
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
- 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
- 定製：您可以定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
三、BootStrap的環境安裝
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個鏈接時，您將看到如下所示的網頁：
![官網圖片]()
您會看到兩個按鈕： - Download Bootstrap：下載 Bootstrap。點擊該按鈕，您可以下載 Bootstrap CSS、JavaScript 和字體的預編譯的壓縮版本。不包含文檔和最初的源代碼文件。
- Download Source：下載源代碼。點擊該按鈕，您可以直接從 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代碼。
四、BootStrap環境安裝
以下代碼就是BootStrap的使用環境。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 文件，則該文件無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
小例子：使用bootStrap實現響應式
在不同大小的瀏覽器窗口下會有不同的樣式
- 大屏幕時，會顯示出所有的導航
![在這裏插入圖片描述]()
- 小屏幕時會顯示漢堡按鈕，點擊會出現豎着排版的導航
![在這裏插入圖片描述]()
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap響應式導航欄</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--自定義背景色-->
<!--<style>-->
<!--.navbar-default {-->
<!--background-color: #ff6e9b;-->
<!--}-->
<!--</style>-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">漢堡按鈕</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--這裏可以定義品牌圖標-->
<div class="navbar-header">
<a class="navbar-brand " id="nav-brand-itheima" href="#" >
網站首頁
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a></li>
<li><a href="##">名師介紹</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">關於我們</a></li>
</ul>
</div>
</nav>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>