四天搞定bootstrap---第四天
1.Bootstrap外掛概述
Bootstrap一共提供了十幾個外掛函式，可以單個引入，也可以一次性全部引入(bootstrap.js)
使用方法有兩種：
(1)使用JS方式呼叫
$('div').modal( );
(2)使用data-*方式呼叫 —— 推薦寫法
<div data-toggle="modal">
2.Bootstrap第四部分：外掛 —— 下拉外掛
1)JS方式呼叫：
$('.dropdown a').dropdown( );
2)data-*方式呼叫：
<a data-toggle="dropdown">
3.Bootstrap第四部分：外掛 —— 警告框
2)data-*方式呼叫：
<div class="alert alert-四種顏色">
<span class="close" data-dismiss="alert">×</span>
文字內容
</div>
3.Bootstrap第四部分：外掛 ——摺疊效果
2)data-*方式呼叫：
<a data-toggle="collapse" href="target">觸發元素</a>
<div id="target" class="collapse"></div>
| Model： 資料模型 Modal： 模態對話方塊 Module： 模組 |
4.Bootstrap第四部分：外掛 —— 模態框
modal：模態對話方塊，在父視窗中打開了一個子視窗，只要子視窗不關閉，則父視窗無法獲得輸入焦點——該子視窗就稱為“模態子視窗”。瀏覽器中預設： window.alert()/confirm()/prompt() 都是模態子視窗，但無法定製。
一般專案中，使用DIV模擬出模態子視窗的效果：
<a data-toggle="modal" href="#modal-login">彈出模態對話方塊</a>
<div id="modal-login" class="modal"> <!--半透明的遮罩層-->
<div class="modal-dialog"> <!--尺寸和定位-->
<div class="modal-content"> <!--背景/邊框/倒角/陰影-->
<div class="modal-header">
<span class="close" data-dismiss="modal">×</span>
頭部
</div>
<div class="modal-body">主體</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
午間練習：修改intel專案首頁，點選“登入”後彈出模態對話方塊：
5.Bootstrap第四部分：外掛 —— 工具提示(tooltip)
提示：不單要用data-*，還要呼叫js
6.Bootstrap第四部分：外掛 —— 彈出框(popover)
提示：不單要用data-*，還要呼叫js
7.Bootstrap第四部分：外掛 —— 輪播廣告(Carousel)
Carousel：旋轉木馬、輪播廣告
提示：Bootstrap提供的輪播廣告結構複雜，只需要記住最外層容器div.carousel，其餘內容全部靠Bootlint提示即可。
練習：
為輪播廣告新增“上一張/下一張”輪播控制元件；
為輪播廣告新增“1/2/3/4”序號指示器；
8.自學：Bootstrap第四部分：外掛 —— 附加導航(Affix)
9.自學：Bootstrap第四部分：外掛 —— 滾動監聽(ScrollSpy)
10.樣式語言的分類
(1)靜態樣式語言
即CSS，可以直接被瀏覽器解釋執行。作為一門語言，CSS有缺陷的，如缺少：型別、變數、運算、函式、物件和繼承等等語言必需的基本概念，導致了CSS樣式程式碼可維護性差。
(2)動態樣式語言
在CSS基礎上添加了動態語言必需的因素，如型別、變數、運算、函式、物件和繼承等，極大了提高了樣式程式碼的可維護性。常見的動態樣式語言：
1)Sass / SCSS
2)Stylus
3)Less
注意：瀏覽器只能解析CSS，所以所有的動態樣式語言的程式碼都必須轉換為CSS才能執行——此過程稱為動態樣式程式碼的“編譯(Compile)”
11.動態樣式語言——Less概述
官網：http://lesscss.org/
中文網：http://less.bootcss.com/
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函式等功能，讓 CSS 更易維護、方便製作主題、擴充。
Less檔案有兩種使用方法：
(1)在客戶端使用Less —— 僅作了解
建立x.less;
建立x.html，引入x.less，引入less.js（Less編譯器）
客戶端請求x.html，下載.less和.js兩個檔案，在瀏覽器中執行less.js把x.less檔案編譯為css程式碼。
(2)在伺服器端使用Less —— 推薦方法
建立x.less；
程式設計師在自己的電腦上安裝less編譯器；
程式設計師執行less編譯器，把x.less 編譯為 x.css；
建立x.html，引入x.css；
客戶端請求html，下載css，直接執行即可
很容易出錯的地方：—— 如何在伺服器端搭建Less編譯環境
(1)下載並安裝一款獨立於瀏覽器的JS直譯器——Node.js
成功的標誌：
node -v 能夠顯示出版本號
(2)下載並安裝Less編譯器程式：lessc.js
成功的標誌： 能夠找到
C:\npm\node_modules\less\bin\lessc —— JS檔案
(3)執行JS直譯器，執行lessc.js，編譯.less檔案得到.css檔案
node C:\npm\node_modules\less\bin\lessc e:\5.less > e:\5.css
成功的標誌： 在e盤多出一個5.css檔案
此步也可以用WebStorm中的FileWatcher功能來實現
(3.1)配置WebStorm中的FileWatcher，指定lessc位置
(3.2)只要使用者新建/修改.less檔案，WS會自動呼叫lessc程式把.less編譯為.css
12.Less語法學習
(1)Less支援CSS所有的語法
(2)Less支援多行/單行註釋，但CSS只支援多行註釋，所以Less中的單行註釋不會被編譯到CSS檔案
(3)Less有變數(Variable)的概念
宣告變數： @變數名: 值;
使用變數： 選擇器 { 樣式: @變數名; }
變數值可以是任意合法的樣式值。
(4)Less可以執行樣式/變數的計算
加、減、乘、除、取餘
(5)Less支援樣式的混入(Mixin)
選擇器1 { 樣式; }
選擇器2 {
選擇器1;
樣式;
}
(6)Less在樣式混入時可以指定引數
選擇器1(@變數, @變數...) { 樣式; }
選擇器2 {
選擇器1(值, 值...);
樣式;
}
(7)Less支援樣式巢狀
選擇器1 {
樣式1;
選擇器2 {
樣式2;
}
}
會被編譯為：
選擇器1 { 樣式1; }
選擇器1 選擇器2 { 樣式2; }
(8)Less為樣式提供了幾十個可用的函式
ceil( )
floor( )
percentage( 5/10 ) // 50%
round( )
lighten(@c, 20%) 顏色變淡指定的百分比
darken(@c, 30%) 顏色變暗指定的百分比
....
(9)Less支援檔案包含指令
CSS提供了@import指令，可用於包含其它的CSS檔案，但由於會增加請求次數，不推薦使用；
Less也提供了@import指令，可用於包含其它的Less檔案，推薦使用！—— Less的檔案包含是在伺服器端執行的檔案拼合，客戶端的一次請求就可以獲得所有樣式！
@import "xx.less";
練習：觀察Bootstrap真正的Less原始碼檔案的結構
13.通過修改Bootstrap的Less原始檔實現定製
定製目標：
(1)Bootstrap瘦身，刪除不必要的樣式
註釋掉bootstrap.less中不需要的@import即可
(2)修改Boostrap預設的樣式值，實現粗粒度定製
修改variables.less中變數的值即可
(3)修改Boostrap元件的細節樣式，實現細粒度定製
修改特定的元件對應的.less檔案，如dropdown.less