BootStrap_04之jQuery插件(导航、轮播)、以及Less

2016-11-19 18:59:04来源:cnblogs.com作者:Jupiter258人点击

第七城市

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

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台