由於申請了一個域名，一個雲主機，開始弄個人網站。
發現Bootstrap非常方便，和重要，故開始學習與分享關於Bootstrap的技術。
推個廣告
個人網站：http://www.neverc.cn
signalR做的一個討論圈非常方便公司交流，哈哈！http://group
本節目錄：
Bootstrap是目前最流行的前端開發框架，由Twitter的兩位前 員工Mark Otto和Jacob Thornton在2010年8月份創建。它是一套 基於Less的前端開發庫（最新版也包含了Sass源碼），提供了很多常見並常用的各種CSS和JavaScript合集，以便開發人員隨時上手。
Bootstrap提供了如下重要的特性：
- 一套完整的基礎CSS插件。
- 豐富的預定義樣式表。
- 一組基於jQuery的JS插件集。
- 一個非常靈活的響應式（Responsive）柵格系統，並且崇尚移動先行（Mobile First）的思想。
從V3.1.0開始，Bootstrap的License授權改成了MIT協議。 MIT是目前最為寬松的協議，大家可以放心地在各種商業環境中使用它。
cdn：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
Bootstrap框架的文件和源碼可以在其官方網站 （www.getbootstrap.com）下載。點擊鏈接可以看到3個下載鏈接
下載Bootstrap，下載的內容是編譯后可以直接使用。包括未經壓縮的文件和經過壓縮處理的文件。
下載源碼，是用於編譯CSS的Less源碼，以及各個插件的JS源碼。
下載Sass項目，是用於編譯CSS的Sass源碼，以及各個插件的JS源碼。
文件結構
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3.X版和2.X系列版本有一個很大區別，就是2.x系列版本用於展示icon小圖標的.png圖 片不見了，取而代之的是fonts目錄的4種類型的字體文件。我們稱這種方式為@font-face版本的icon實現，該字體來自glyphicons.com網站，並得到免費授權。通過這種技術顯示圖標的好處是，圖標可以被任意縮放、改變顏色。
對文件的css、js文件夾名稱 進行隨意重命名，但是不能對fonts文件夾進行重命名，因為CSS 文件里的源碼使用了相對路徑（../fonts/）
注意bs的所有js插件都是基於jQuery的，要確保在使用這些功能的時候引用相應的jQuery文件。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述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]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
由上述模板代碼可以看出，3.x和2.x版本相比，有一個很大的 區別，就是多了以下一行代碼：
<meta name="viewport" content="width=device-width, initial-scale=1">
這就是我們前面提到的，Bootstrap從3.0版本開始全面支持移動平台了，並將貫徹移動先行（Mobile First）的宗旨。
上述代碼 的意思是，默認情況下，UI布局的寬度和移動設備的寬度一致，縮放大小為原始大小。
Bootstrap的CSS組件的核心就是選擇器的定義以及在各自優先級上的處理。
如何確定CSS的優先級？
這里我們要先引入一個機制，分別 用4個數字（a，b，c，d）表示優先級組合.
第一個數字（a）表示style屬性，優先級最高。由於一般都 是class樣式，所以該值一般都是0。
第二個數字（b）是該CSS選擇器上的id數量的總和，一般都 是1個。
第三個數字（c）是用在該CSS選擇器上的其他屬性CSS選擇 器以及偽類的總和。這里包括class（.btn）和屬性CSS選擇器（比 如li[id=red]）。
第四個數字（d）計算元素（就像table、p、div等）和偽元 素（就像first-child等）。
選擇器
這里簡單介紹2個常用的：
子選擇器：
| element element | div p | 選擇 <div> 元素內部的所有 <p> 元素。 | 1 |
| element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素。 |
兄弟選擇器：
| element+element | div+p | 選擇緊接在 <div> 元素之后的所有 <p> 元素。 |
| element1~element2 | p~ul | 選擇前面有 <p> 元素的每個 <ul> 元素。 |
擴展：
div,p表示多個選擇器同時被選擇
偽類用於向某些選擇器添加特殊的效果。如a:hover a:link
媒體查詢
媒體查詢是進行響應式設計的核心要素，其功能非常強大。
Bootstrap主要用到min-width、max-width，以及and語法， 用於在不同的分辨率下設置不同的CSS樣式。
@media (max-width: 767px) {
/*在小於768像素的屏幕里,這里的樣式才生效*/
}
@media (min-width: 768px) and (max-width: 991px) {
/*在768和991像素之間的屏幕里,這里的樣式才生效*/
}
@media (min-width: 992px) and (max-width: 1199px) {
/*在992和1199像素之間的屏幕里,這里的樣式才生效*/
}
@media (min-width: 1200px) {
/*在大於1200像素的屏幕里,這里的樣式才生效*/
}
||與&& 2個運算符
||表示，如果第一個元素可以轉換為true，則返回第一個元 素的值，否則查詢第二個元素的值
&&則相反，如果第一個元素可以轉換為false，才返回第一 個元素的值，否則返回第二個元素的值
空對象null，undefined為false
數字零為false
空字符串為false
自執行函數
(function () { /* code */ } ()); // 推薦使用這個
(function () { /* code */ })(); // 這個也是可以用的
+function () { /* code */ }(); //前面的+號主要是防止不符合規定的代碼
;function () { /* code */ }(); //+號也可以換成;
原型
在Alert函數上定義一個名為close的原型方法。
Alert.prototype.close = function (e) { /*...*/ }
什么是原型，原型的好處，可以看我的博客js篇。
這里演示如何調用原型方法
var alert = new Alert(); alert.close();
jQuery
綁定事件
$('td').on("click", function (e) {//todo}); //在td上綁定click
$('td).off('click'); // 在td上禁用click事件
而在bs中
$(document).on('click.bs.carousel.data-api','td',function (e){};
$(document).off('.carousel.data-api');
上述的on在使用時，中間多了一個參數，而且選擇器變成了 document。它的好處是只在document上綁定一個單擊事件，利 用冒泡的機制，在單擊的時候檢查是否是td元素，如果是才處 理。而前面我們把td作為選擇器的時候，一個頁面有多少td元素 就會綁定多少個click事件，這樣性能會大大降低。這種3個參數的 模式稱為享元模式。
$(selector).data()
收集指定元素上的所有以data-開頭的自定義屬性，並合並成為一個對象字面量。
<div id="abc" data-role="aaa" data-toggle="toggle"></div>
如果要獲取data-role里aaa這個值
$("'#abc").data("role");
Less是一種CSS預處理技術，它是一種動態樣式語言，屬於 CSS預處理語言中的一種。
HTML5輔助設計
在bs中，出現了不是以data-開頭的 自定義屬性，我們稱之為輔助屬性。
這些屬性是HTML5新提出的概念，用於支持殘障人士、老年人、文化水平不高或暫時患病的 人使用屏幕閱讀器進行頁面訪問。
aria-hidden="true"表示對屏幕閱讀器隱藏該div 元素
role="navigation"表示該區域用於導航