1、BootStrap 簡述：
BootStr 是集中了HTML、JavaScript、CSS的樣式庫，是一個工具包。使用bootStrap不僅可以構建非常優美的HTML頁面，而且佔用資源也非常小，使用gzip壓縮後，10kb左右，並且bootStrap在跨瀏覽器兼容也非常的好。
基本功能：
· 全局 CSS 樣式：提供了格柵系統、表格、表單、按鈕等集成樣式。
· 組件：提供了下拉菜單、輸入框、導航、列表組等組件。
· 插件：提供了模態框、滾動監聽、警告框、彈出框等插件。
Bootstrap 官網及下載地址
· Bootstrap 官網：http://getbootstrap.com
· Bootstrap 下載地址：http://getbootstrap.com/getting-started/#download
2、BootStrap的兩種使用方式：
1、一種是直接下載bootStrap的資源包，導入工程項目進行使用。
2、一種是用CDN加速服務，引用網絡資源，例如：https://www.bootcdn.cn/ 開源項目CDN加速服務
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
3、模板創建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--IE兼容模式---bootStrap不支持老版本的IE,將IE運行在最新的渲染模式中展示-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--viewport 適配各種不同設備的瀏覽-響應式佈局必須設置的-->
<meta name="viewport"
content="width=device-width,height=device-height,initial-scale=1,minimum-scale-1,maximum-scale=5,user-scalable=1">
<title>Title</title>
<!--引入bootStrap的CSS樣式文件-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!--html5shiv.min.js 針對IE8及其之前版本對H5新推出的各種語義化標籤的兼容-->
<!--respond.min.js 針對E8及其之前版本對CSS3對媒體查詢media的兼容-->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![end if]-->
</head>
<body>
<!--因爲bootStrap是依賴於JQuery實現的核心JS功能，想要使用bootstrap插件，必須之前引入jQuery庫-->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
box-sizing 引發的問題解決方式：
Bootstrap 默認使用的盒子模型是 border-box，可能會和一些第三方組件衝突。
爲了避免 Bootstrap 設置的全局盒模型所帶來的影響，可以重置單個頁面元素或覆蓋整個區域的盒模型。
· 覆蓋單個頁面元素
/* 通過 CSS 代碼覆蓋單個頁面元素的盒模型 */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
· 重置整個區域
/* 通過 CSS 代碼重置整個區域 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}