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样式；