HTML常用框架

注意：运算符与值之间必须以空格分开。@w:500px;div { h1{ width: @w - 100; }

}h1 { width: @w; border: 1px solid #000;}混合(Mixins)混合可以将⼀个定义好的class A轻松的引⼊到class B中，从⽽简单的实现class B 继承class A的所有属性。我们还可以带参数的调⽤，就像使⽤函数⼀样。**混合(Mixins)**注意：混合的使⽤就和js的⾃定义函数类似，⾸先 混合 必须前⾯是以 . +混合名称开始结构：.名称(变量){}可以有默认值，也可以没有默认值，没有的话，在调⽤的时候必须传参，有默认值的时候就可以不⽤传递参数；多个参数之间和js⼀样，⽤逗号（,） 隔开函数LESS中的函数 - 映射了JavaScript函数代码，如果你愿意的话，可以操纵属性值。LESS 函数⽐如：⿏标移上亮度增加20%。需要查找的时候，直接查⽂档就可以了⽐如:saturate(@color, 10%); // 饱和度增加 10%desaturate(@color, 10%); // 饱和度降低 10%lighten(@color, 10%); // 亮度增加 10%darken(@color, 10%); // 亮度降低 10%fadein(@color, 10%); // 透明度增加 10%fadeout(@color, 10%); // 透明度降低 10%fade(@color, 50%); // 设定透明度为 50%spin(@color, 10); // ⾊相值增加 10匹配模式类似js中的if else判断，只有匹配成功才能起作⽤**匹配模式**注意：匹配模式中,定义的模式名称都是⼀样的，只是参数不⼀样，调⽤的时候只需选择对应的参数就可以了。使⽤⽅法⽅式⼀：客户端直接调⽤注意：必须在服务器环境中才能⽣效，动态编译注⼊虚拟DOM或者内存中，类似ajax。 开发中常⽤的服务器组合：WAPM⽅式⼆：预编译（提前编译）在代码编辑器中，按照LESS的语法规则写好LESS⽂件；使⽤编译⼯具把.less⽂件编译成.css⽂件；把编译后的css⽂件引⼊到页⾯即可。**编译⼯具 --- Koala **点击添加⽂件,然后直接转换就可以使⽤**Koala**如何在⼀个LESS⽂件中导⼊另⼀个LESS⽂件@import ""; // 注意：less⽂件扩展名可选补充// 不会被编译器编译的注释/**/ 是可以被编译器编译的 注释~’’ 表⽰的是禁⽌被编译& 表⽰选择所有的⽗级元素授之于渔LESS官⽹：/LESS中⽂⽹ ： / /敬请期待 ...敬请期待 ...接下来会更新Bootstrap框架,因为Bootstrap框架的底层就是⽤LESS编译的,⽽且内容也⽐较多.考虑到Bootstrap在前端⽐较⽕爆和热门,所以单独抽出来整理

2023年6月20日发(作者：)

HTML常⽤框架框架⼀ :: 是⼀个css动画样式库,可以减少我们的开发时间.它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡⼊淡出（fadeIn/fadeOut）等多达70多种动画特效，⼏乎包含了所有常⽤的动画特效。重点: 主要是兼容各种浏览器,Animate的底层是靠css实现的,当然只兼容⽀持CSS3animate属性的浏览器: IE10+、Firefox、Chrome、Opera、Safari。**官⽹演⽰：// **的具体使⽤引⼊⽂件给要做动画的HTML标签添加上相对应的类，⽐如：

注意: 类 animated 的作⽤是控制动画的持续时间，是所有动画的前提条件， 在其后⾯的类则为动画的效果类。框架⼆ :: 核⼼作⽤：让我们的页⾯滚动更有质感，更酷炫通过，可以在页⾯逐渐向下滚动的过程中逐渐释放这些动画效果。也就是说：当我们向下滚动页⾯时，可以省去很多判断条件，让CSS动画逐渐展⽰出来。特点轻量级类库， 不依赖jQuery，超简单的安装和使⽤，与配合，只需要短短⼏⾏代码就可以实现很多特效。容易定制，我们可以改变动画去设置喜欢的风格、延迟、长度、偏移和迭代等等。兼容性问题因为，要和配合使⽤，所有其也只兼容⽀持CSS3 animate属性的浏览器：IE10+、Firefox、Chrome、Opera、Safari。使⽤⽅法引⼊⽂件在相对的HTML标签中通过类名进⾏绑定然后在JavaScript⽂件中只需要⼀⾏初始化代码就搞定咯new WOW().init();案例演⽰地址 : /p/常⽤的属性data-wow-delay: 动画开始前延迟data-wow-duration: 动画持续时间data-wow-iteration: 动画重复次数data-wow-offset: 距离浏览器底部到隐藏框顶部的距离（偏移量）使⽤⽅法可以加⼊ data-wow-duration (动画持续时间)和 data-wow-delay （动画延迟时间）等属性。data-wow-offset 图解**data-wow-offset**WOW的默认配置参数,如果需要⾃定义配置,可⼿动修改 var wow = new WOW({ boxClass: 'wow', // 动画元素的CSS类（默认类名wow） animateClass:'animated', // 动画CSS类 （默认类名animated） offset: 0, // 距离可视区域多少开始执⾏动画（默认为0） mobile: true, // 是否在移动设备上执⾏动画 （默认是true） }); ();但是实例的动画只能加载⼀次，如果要重新执⾏动画必须要进⾏刷新。为了更好的解决这个问题,所以引出以下这个框架框架三 :: scrollReveal介绍scrollReveal是⼀个兼容PC端和移动设备的滚动动画库。不同的是 的动画只播放⼀次，⽽ 的动画可以播放⼀次或⽆限次；特点scrollReveal同时兼容PC端和移动端；0依赖（不依赖于jQuery，也不依赖于）;定制性⾼，使⽤简单⽅便快捷。浏览器兼容虽然不依赖于,但是它也是⽤CSS3的动画创建的,所以需要对H5和C3⽀持⽐较好的浏览器,⽐如: IE10+、Firefox、Chrome、Opera、Safari。使⽤⽅法引⼊⽂件// = function () { = ScrollReveal(); ('.box');}常⽤参数 - 可以⾃⼰⼿动修改参数 var config = { reset: false, // 滚动⿏标时，动画开关 origin: 'bottom', // 动画开始的⽅向 duration: 500, // 动画持续时间 delay: 0, // 延迟 rotate: {x:0, y:0, z:0}, // 过度到0的初始⾓度 opacity: 0, // 初始透明度 scale: 0.9, //缩放 // 缓动'ease', 'ease-in-out'，'linear' easing: 'cubic-bezier(0.6, 0.2, 0.2, 1)',

// 回调函数 beforeReveal: function(domEl){}, beforeReset: function(domEl){}, afterReveal: function(domEl){}, afterReset: function(domEl){} }; = ScrollReveal(); ('.sr', config);**案例1演⽰链接: /p/824c79577376 ****案例2演⽰链接:/p/c54b32a54c9f **ScrollReveal 和 WOW的区别和联系他们都不依赖jQuery;wow依赖于 ，ScrollReveal不依赖任何其他插件或者库；wow的释放动画，只能够实现⼀次，⽽ScrollReveal可以⽆限次使⽤；ScrollReveal 参数相对⽐较多，⽐较复杂些；实际⼯作中，⽤wow⽐较多。框架四 :: Zepto介绍随着移动端的愈加⽕爆，⽬前很多HTML5的框架都在⽀持移动⽅向，⽐如：，，React Native等等。Zepto 是⼀个轻量级的针对现代⾼级浏览器的 JavaScript 库， 它与jquery 有着类似的api。如果你会⽤ jquery，那么你也会⽤ zepto。Zepto的设计⽬的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的⽬的是有⼀个5-10k的通⽤库、下载并快速执⾏、有⼀个熟悉通⽤的API，所以你能把你主要的精⼒放到应⽤开发上。jQuery和的区别jQuery更多是在PC端被应⽤，因此，考虑了很多低级浏览器的的兼容性问题；⽽则是直接抛弃了低级浏览器的适配问题，显得很轻盈；在移动端被运⽤的更加⼴泛；jQuery的底层是通过DOM来实现效果的， 是靠css3 来实现的可以说是阉割版本的jQuery。** 授之于鱼 **英⽂版：/中⽂版：/p/zeptojs/Zepto设计模块zepto为了保持⾜够的轻量和效率，只保留了默认的最基本的功能，其他的功能，如果有需要，只要再次引⼊就可以了；zepto模块** zepto 模块 **注意 : jQuery的底层是通过DOM来实现效果的， zepto 是靠css3 来实现的**案例链接地址:/p/e57b12abaf07 **tap 和 click 的区别tap 只作⽤在移动端，PC端是⽆效的click 在pc端和移动端都是ok的但是我们在移动端要⽤tap，因为 tap ⽐ click 快200-300mszepto和jquery⾸先，zepto默认只具有基本的模块，其他功能模块需要单独引⽤，引⽤的模块，必须放在zepto的后⾯， 和 他们之间必须是在的后⾯；其他的包之间顺序⽆所谓；jQuery默认是⼀个⽂件中，包含所有的功模块；zepto的底层是通过css3实现的,jQuery是操作的DOM,所以有些css3的效果，是jquery做不到的；zepto⽐jQuery多了更多的移动端的事件的⽀持，⽐如说tap， swipe等等zepto的兼容性⽐jQuery差，因为zepto更多的是注重移动端和效率，jQuery注重的是兼容性；注意:zepto上⾯的动画，不要加太多， 因为动画很耗性能，加多了会很卡，特别是⼀些webview开发；框架五 :: 介绍swiper是⼀款免费以及轻量级的移动设备触控滑块的js框架，主要是为iOS设计，同时，在Android、WP系统和其他PC浏览器上也有着良好的体验。特点轻量级，简洁⾼效，可定制性⾮常⾼；横跨各种设备，兼容IOS、Android、WP、PC端设备；提供多种版本⽀持（可⾃由选择jQuery/zepto版或原⽣js）;**注意:swiper从3.0开始不再全⾯⽀持PC端。因此，如需要在PC上兼容更多浏览器，可以选择swiper 2.x(⽀持IE7) **使⽤⽅法引⼊⽅法HTML结构