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

转载于:https://www.cnblogs.com/Jupiter258/p/6081011.html

BootStrap_04之jQuery插件(导航、轮播)、以及Less相关推荐

  1. html新闻轮播插件,jQuery新闻类轮播图插件sliderBox

    sliderBox.js是一款jQuery新闻类轮播图插件.该jQuery新闻类轮播图插件可以创建兼容ie8.带缩略图导航.以及多种过渡效果的轮播图. 使用方法 在页面中引入jQuery.slider ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    友情链接:http://www.htmleaf.com/Demo/201504031619.html  http://www.htmleaf.com/Demo/201504191708.html 0 ...

  3. jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件

    最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

  4. html5carousel图片轮播,jQuery响应式轮播图插件VM Carousel

    插件描述:VM Carousel是一款jQuery响应式轮播图插件.该jquery轮播图插件支持自动播放模式,支持动态改变图片尺寸,支持居中模式,以及无限循环等. 使用方法 在页面中引入jquery. ...

  5. html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件

    最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

  6. jQuery补充,基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head>&l ...

  7. html5图片轮播在线制作教程,15个超强的jQuery/HTML5图片轮播插件

    最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

  8. html5carousel图片轮播,jquery 3d Carousel轮播图插件

    jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...

  9. jQuery焦点图轮播特效插件bxslider,使用说明 及免费下载四川智汇蓝图整理带bxslider免费下载地址

    这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...

  10. 带后台管理的超酷jquery+ajax幻灯相册php源码,仿门户网图片频道的jQuery幻灯相册轮播代码...

    推荐 jquery画廊特效 支持缩略图预览和全屏展示及图片描述 这是款基于jquery的画廊相册特效,功能较全面,可支持缩略小图预览,幻灯图片全屏展示,可显示多种规格的图片,包括全屏显示高清大图,以及 ...

最新文章

  1. 求自定类型元素序列的中位数
  2. 深入学习QWidget-1
  3. 图解JavaScript算法排序
  4. 回归分析---线性回归原理和Python实现
  5. 使用Maven程序集创建漏洞评估工件
  6. 深度优先搜索 - 最短路径
  7. Android m3u8网络视频播放
  8. trilateration三边测距算法及C语言实现(适用stm32)
  9. python矩阵连乘_python动态演示动态规划解决矩阵连乘
  10. JDK中的BitMap实现之BitSet源码分析
  11. 重要不紧急紧急不重要
  12. 微型计算机分类可以分为哪些,微型计算机的分类通常以微处理器的什么来划分...
  13. 【python】程序结构
  14. 0.96OLED图标取模,包括信号图标,蓝牙图标,闹钟,电池
  15. 启发式搜索: A*算法
  16. 【Mac软件推荐】10个你不能没有的Mac菜单栏应用程序
  17. 产品学习:变电站智能机器人巡检系统设计
  18. shell学习-基础篇
  19. SAP中通过物料号导出采购收货及发票校验记录清单
  20. Swiper4.0:H5手机端滑屏判断当前页Index并且触发动画(slideChangeTransitionEnd与swiper.activeIndex)

热门文章

  1. C# XML文件读取
  2. Spring源码之创建代理
  3. Hibernate的双向1-1关联(七)
  4. [渝粤教育] 浙江大学 半导体材料 参考 资料
  5. 【渝粤教育】电大中专电商运营实操 (2)作业 题库
  6. Pandas系列(四)数据统计函数
  7. 【NOIP2014模拟8.25】设备塔
  8. python学习笔记9:面向对象编程,类
  9. Aria2 - OS X 下载百度云资源神器
  10. 软硬负载之间的对比及优缺点