- 基本概況
利用兩週的時間把bootstrap官網相關案例都做了一遍，對於bs有了一個初步的瞭解，bs是由動態語言less寫成的，基於JQuery開發的前端框架，有已經寫好的css樣式、靜態頁面組件以及js組件，用的時候只需要寫對html嵌套關係以及用對樣式即可。最新版本3.0，移動開發優先。 - 文件結構
css文件夾---bootstrap.css 、 bootstrap.min.css 、bootstrap-theme.css、 bootstrap-theme.min.css
基本樣式與主題樣式的壓縮版與非壓縮版
js文件夾---jquery.js、bootstrap.js 、bootstrap.min.js
jquery以及bs.js的非壓縮版與壓縮版，bs是基於jq開發的，所以應該先引入js再引入bs.js
fonts文件夾---主要包含eot、svg、ttf、woff四中格式的字體文件，與後面的字體圖標相對應。
bs可定製下載，需要什麼樣的功能和樣式可以在官網選擇相應的文件進行下載，這是個目錄結構是包含所有bs樣式和組件的一個結構。
因爲bs3是移動優先的，所以開發移動端網站的時候就需要在head中添加這樣一句代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scable=no">
這句話的含義就是網頁的可視寬度等於設備的寬度，初始縮放比例爲1.0，也就是第一次加載時候的頁面比例。 - 各部分簡單介紹
(1)css部分
bs爲預設了很多樣式，在製作靜態頁面的時候可以直接引用，另外還對一些html標籤做了初始化，bs對標籤顏色的初始化也有規律可循的，大體分爲默認（default）、主要（primary）、信息（info）、警告（waring）、危險（danger）、鏈接（link）；對於尺寸的初始化：大（lg）、小（sm）、超級小（xs）。使用的時候針對不同元素添加前綴即可。比如表示信息的大按鈕class="btn btn-lg btn-info";標籤的話就加label-，警告框就加alert-，每一種元素要先添加屬於該元素的基類樣式才行。
bs還爲各個元素的集合創建了組，比如表單集合爲form-group，按鈕集合btn-group，列表組：list-group等，這樣便於同一控制管理。（改變集合內子元素的大小顏色直接可以用在組元素上而不必一一設置，減少了工作量。）
bs應該着重掌握的部分就是柵格佈局，bs把內容區域自動分爲12列，通過行（row）與列（column）的組合創建頁面佈局，嵌套格式應爲container > row > column
柵格系統響應式佈局主要分爲四種：
超小屏幕（總是水平排列<=768px）--col-xs-， 最大列寬:自動
其餘三種開始堆疊在一起，超過一定數值就會水平排列
小屏幕（>=768px）--col-sm-, 最大列寬：60px
中等屏幕（>=992px）--col-mdm-, 最大列寬：78px
大屏幕（>=1200px）--col-lg-, 最大列寬：95px
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
兩列相加不大於12即可。
（2）組件
css部分主要擴展了很多公共樣式以及對於標籤進行了初始化，組件部分就是把相關樣式與標籤進行的整合，製作出很多可以直接服用的常見佈局。比如下拉菜單、按鈕組、導航條、標籤頁等靜態佈局結構。
（3）javascript組件
實現組件動態效果的插件，比如過渡效果依賴transition.js，下拉菜單效果依賴於dropdown.js.
主要實現方法有兩種：data-屬性以及js
I、方法一：data-
<ul class="nav nav-tabs">
<li><a href="#home1" data-toggle="tab">Home1</a></li>
<li><a href="#home2" data-toggle="tab">Home2</a></li>
<li><a href="#home3" data-toggle="tab">Home3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home1">具體內容1</div>
<div class="tab-pane" id="home2">具體內容2</div>
<div class="tab-pane" id="home3">具體內容3</div>
</div>
以tab標籤效果爲例，他的實現原理就是在標題a標籤上添加data-toggle=“tab”屬性，這裏與js方法相對應，就是把html結構與js建立一種關係，href=“#home1”指向下面的id=“home1”，第二個就指向home2，這樣在點擊標題的時候相應的內容區域就會顯示出來。
II、方法二：js
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
這句代碼意思就是當點擊標題的時候阻止默認跳轉，讓該鏈接處於激活狀態，進而讓該標題鏈接的內容區域賦予active樣式，使其顯示。
小結：bs大部分的動態效果都是依靠data-屬性完成的，js組件存在的目的就是提供函數支持，並不能全程控制，只能控制某一部分，還是要通過data-來完成。另外js組件還提供了一個監聽功能，主要分爲不定式和過去式，也就是當效果開始之前執行函數和結束之後執行函數。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab})--不定式
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab})--過去式
bs這種結構的缺點就是代碼臃腫，到處標記id屬性和data屬性，不利於程序循環。
4、兼容性
- Chrome (Mac、Windows、iOS和Android)
- Safari (只支持Mac和iOS版，Windows版已經基本死掉了)
- Firefox (Mac、Windows)
- Internet Explorer
- Opera (Mac、Windows)
其中ie最低只支持到ie8，還需要額外插件支持。（Respond.js），針對學校網站必須支持ie67的情況可以採用CSS3PIE（具體效果不清楚，還未測試）
5、學習過程中遇到的問題以及解決方法
1、affix-附加導航
關鍵類：affix、 affix-top、 affix-bottom
頁面滾動過程中，affix會根據我們的配置參數切換到目錄部分的類，整個過程會產生上面的三個類。
整個過程如下：
- 頁面加載完畢後，應用 affix 效果的內容會生成一個 .affix-top 類
- 當頁面向下滾動了 top 的值時，.affix-top 類切換成 affix 類
- 頁面滾動到離底部距離爲 bottom 值時，affix 類切換成 affix-bottom
.affix{position:fixed;top:30px;}
.affix-bottom{position:absolute;}
加上這兩個類就可以
2、需要手動初始化的插件 工具提示和彈出框
$("a[data-toggle='tooltip']").tooltip('toggle')//提示效果初始化，和工具提示一樣都得手動添加
$(".tishi").tooltip('toggle')//這句代碼的意思就是防止文檔初始加載完成就顯示提示框
3、摺疊效果
要把html嵌套關係寫準確，具體是panel-group > panel > panel-heading和panel-body，這樣纔是一個摺疊組。
