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