今日目標：
(1)Bootstrap第四部分：插件 —— 掌握
(2)Less語言 —— 重點
(3)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>
5.Bootstrap第四部分：插件 —— 工具提示(tooltip)
提示：不單要用data-*，還要調用js
6.Bootstrap第四部分：插件 —— 彈出框(popover)
提示：不單要用data-*，還要調用js
7.Bootstrap第四部分：插件 —— 輪播廣告(Carousel)
Carousel：旋轉木馬、輪播廣告
提示：Bootstrap提供的輪播廣告結構複雜，只需要記住最外層容器div.carousel，其餘內容全部靠Bootlint提示即可。
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";
13.通過修改Bootstrap的Less源文件實現定製
定製目標：
(1)Bootstrap瘦身，刪除不必要的樣式
註釋掉bootstrap.less中不需要的@import即可
(2)修改Boostrap默認的樣式值，實現粗粒度定製
修改variables.less中變量的值即可
(3)修改Boostrap組件的細節樣式，實現細粒度定製
修改特定的組件對應的.less文件，如dropdown.less