- Bootstrap來自 Twitter，是目前很受歡迎的前端框架。是一個HTML/CSS/JS框架。極大的簡化了響應式網頁的開發。
- 學習特點：概念簡單，易上手；但涉及到很多的英文單詞。
- 分爲5個部分：起步、全局CSS樣式、組件、插件、定製
- HTML：爲H5已有的標籤擴展了若干個自定義屬性，以data開頭
- CSS：CSS Reset（重置CSS的默認樣式）、近千個class
- JS：基於jQuery添加了十幾個插件函數
| 基本模板 |
基本模板加註釋：
<!DOCTYPE html>
<html lang="zh-CN">
<!--zh-CN簡體中文的兩個目的：
爲瀏覽器翻譯應用指明原始的語言；
爲屏幕閱讀軟件指定網頁的基礎發音。-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--X-UA-Compatible元標籤的含義：
IE瀏覽器專用，其他瀏覽器忽略
X：Cross 跨越
UA：UserAgent 用戶代理，即瀏覽器
Compatible：兼容性
edge：邊沿、最前端
IE7同時兼容IE6，以此類推，所以在新版本的IE種如何啓用老IE的內核，加這句話。-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--不允許用戶縮放代碼：user-scalable=no-->
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<!--如果瀏覽器是IE9以下，引用下面兩個js文件-->
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<!--有第三方開發的一個js自調函數，讓老版本（<9）的ie支持html5的標籤-->
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<!--有第三方開發的一個js自調函數，讓老版本（<9）的ie支持響應式網頁的必備技術，即CSS3MediaQuery-->
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--引用jQuery-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!--bootstrap的js-->
</body>
</html>| Bootlint工具 |
Bootlint 是 Bootstrap 官方所支持的 HTML 檢測工具。在使用了 Bootstrap 的頁面上（沒有對 Bootstrap 做修改和擴展的情況下），它能自動檢查某些常見的 HTML 錯誤。純粹的 Bootstrap 組件需要固定的 DOM 結構。Bootlint 就能檢測你的頁面上的這些“純粹”的 Bootstrap 組件是否符合 Bootstrap 的 HTML 結構規則。建議將 Bootlint 加入到你的開發工具中，這樣就能幫你在項目開發中避免一些簡單的錯誤影響你的開發進度。
使用方法
<script type="text/javascript">
(function () {
var s = document.createElement("script");
s.onload = function () {
bootlint.showLintReportForCurrentDocument([]);
};
s.src = "https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";
document.body.appendChild(s)
})();
</script>