BootStrap_04之jQuery插件（導航、輪播）、以及Less

1、列偏移與列排序：
①列偏移：控制列出現的位置，某列偏移後，後序列會隨之偏移——只能右偏移；
col-lg/md/sm/xs-offset-*;
②列排序：控制某一列的位置，該列可以左（pull）右（push）調整，其排序後，其它列不受影響；
col-lg/md/sm/xs-push-*：右移；
col-lg/md/sm/xs-pull-*：左移；
2、BootStrap插件——jQuery插件：
①定義jQuery對象插件：
jQuery.fn.函數名=function(){}
②調用jQuery對象插件：
$('選擇器').函數名();
③JS調用方式：$('a').dropdown();
④data-*調用方式：<a data-toggle="dropdown"></a>
3、BootStrap插件——jQuery插件——下拉菜單：
<div class="dropdown">
<a data-toggle="dropdown"></a>
<ul class="dropdown-menu">
...
</ul>
</div>
4、BootStrap插件——jQuery插件——導航：
<ul class="nav nav-tabs">
<li class="active"><a href="#">XXX</a></li>
<li><a data-toggle="tab" href="#">XXX</a></li>
</ul>
5、BootStrap插件——jQuery插件——警告框：
<div class="alert">
<span class="close" data-dimiss="alert">&times;</span>
</div>
6、BootStrap插件——jQuery插件——摺疊：
<a data-toggle="collapse" href="#box">展開收起</a>
<div id="box" class="collapse"></div>
7、BootStrap插件——jQuery插件——工具提示：
對HTML元素的title屬性的呈現效果加以改觀；
<ANY title="工具提示內容" data-toggle="tooltip">
<script>
$('[data-toggle="tooltip"]').tooltip();
</script>
* 此插件必須同時聲明data-*和js調用；

8、BootStrap插件——jQuery插件——彈出框：

<ANY title="彈出框的標題" data-content="彈出框的內容" data-toggle="popover">
<script>
$('[data-toggle="popover"]').popover();
</script>
9、BootStrap插件——jQuery插件——模態框：
①辨析：Module——模塊；Model——模型；Modal——模態對話框；
②Modal：模態對話框——在父視窗中彈出子視窗，只要不關閉，則父視窗無法獲取焦點；
③方式一：
<a data-toggle="modal" href="#mid">打開模態框</a>
方式二：
<button data-toggle="modal" data-target="#mid">打開模態框</button>
④模態框必須的HTML結構：
<!--半透明遮罩層-->
<div id="mid" class="modal">
<!--尺寸位置-->
<div class="modal-dialog">
<!--背景/邊框/倒角/陰影-->
<div class="modal-content">
<div class="modal-header">
<span data-dismiss="modal" class="close">&times;</span>
</div>
<div class="modal-body"></div>
<div class="modal-body"></div>
</div>
</div>
</div>
10、BootStrap插件——jQuery插件——輪播廣告：
①根元素：div.carousel；
②結構：
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img>
</div>
</div>
</div>
11、動態樣式語言/樣式預處理語言——Less：
①Less支持所有的CSS語法；
②Less支持單行/多行註釋，只有多行註釋會被編譯到css文件中，推薦多使用單行註釋；
③Less支持變數（variable）的概念：
定義變數：@變數名：變數值；
使用變數：選擇器{屬性：@變數名；}
* 變數值可以是任意合法的CSS屬性值；
④變數和常量可以進行算術運算：加、減、乘、除、取餘，以及比較運算：大於、小於、大於等於、小於等於、不等於；
⑤Less支持樣式混入（mixin）概念：
選擇器1{樣式；}
選擇器2{選擇器1：樣式；}
⑥支持帶參混入：
選擇器1（@參1，@參2）{樣式；}
選擇器2{選擇器1（值1，值2）；}
⑦Less支持選擇器嵌套：
選擇器1{
樣式1；
選擇器2{
樣式2；
}
}
編譯後的結果：
選擇器1{樣式1；}
選擇器1 選擇器2{樣式2；}
⑧Less內置的樣式操作函數：
image-width()——返回圖片的寬；
image-height()——返回圖片的高；
ceil()——上取整；
floor()——下取整；
lighten()——顏色變亮；
darken()——顏色變暗；
⑨Less支持文件導入：
CSS文件導入會增加文件請求次數，不推薦使用；
Less文件導入是將包含的less文件與當前文件進行拼接；
格式：
@import "xx.less";
@import "xx";//可以省略.less尾碼名
12、BootStrap定製：
①減肥瘦身：刪除不需要的相關組件樣式——刪除bootstrap.less不必要的@import即可；
②全局定製：定製大體樣式——修改variables.less中變數的值；
③細節定製：修改某個組件細節樣式——修改組件對應的.less樣式；