boostrap个人学习笔记

最新推荐文章于 2022-12-22 14:51:18 发布

-SkyBlue-

最新推荐文章于 2022-12-22 14:51:18 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/weixin_44114415/article/details/99940712

版权

居中 .container
- 默认有左右的15px margin
行 .row
- 填充了父容器的15px margin 左右各-15px
列 .col-lg-12
- 大屏设备 lg 大屏设备以上生效包含本身
- 中屏设备 md 中屏设备以上生效包含本身
- 小屏设备 sm 小屏设备以上生效包含本身
- 超小屏设备 xs 超小屏设备以上生效包含本身
列偏移（利用margin）
- .col-lg-offset-1 向右偏移一个位置左边留空一个位置
列排序（利用定位）
- push 往后推 col-lg-push -6
- pull 往前拉 col-lg-pull-6
  - pull-left 左浮动
  - pull-right 右浮动
显示隐藏
- visible-lg 大屏显示其他隐藏
  visible-md
  visible-sm
  visible-xs
  3.2版本以后建议使用hidden
- hidden-lg 大屏隐藏其他显示
  hidden-md
  hidden-sm
  hidden-xs

boostrap样式重置

通过样式名拷贝源码的模块样式：准确定位到所有元素的选择器并且能保证优先级比源码高
- 如导航条组件通过样式名navbar-default 查找所有样式代码并复制到自己代码文件
针对功能进行覆盖：更改模块名称
- 将navbar-default改名为自定义—navbar

模态框

dom 按钮控制

给对应按钮添加 data-toggle="modal" data-target="idName"

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 点击
</button>

js控制模态框

结构

/*把html格式的字符串转出  js字符串拼接  数字拼接  http://www.css88.com/tool/html2js/*/
var modalHtml = ['<div class="modal fade" id="logoutModal">',
                '    <div class="modal-dialog modal-sm">',
                '        <div class="modal-content">',
                '            <div class="modal-header">',
                '                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>',
                '                <h4 class="modal-title">温馨提示</h4>',
                '            </div>',
                '            <div class="modal-body">',
                '                <p class="text-danger"><span class="glyphicon glyphicon-info-sign"></span>您确定要退出后台管理系统吗？</p>',
                '            </div>',
                '            <div class="modal-footer">',
                '                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>',
                '                <button type="button" class="btn btn-primary">确定</button>',
                '            </div>',
                '        </div>',
                '    </div>',
                '</div>'].join("");
$('body').append(modalHtml);

使用
- 显示模态框 myModal.modal("show")
- 隐藏模态看 myModal.modal("hide")

$("[data-logout]").on("click",function () {
    //找到组件
		var myModal = $("#logoutModal");
    //调用方法 --> myModal.modal("show")
		
    myModal.modal("show").find(".btn-primary").on("click",function () {
			//点击确认处理相关逻辑
		})
	})

媒体查询

根据页面宽度处理相应功能

@media screen and (min-width: 1200px){
           .box{
               display: block;
           }
       }

@media (min-width:768px) and (max-width:992px) {
	.wjs_info  .container{
		width: 750px;
	}	
}

boostrap分页插件 `Bootstrap Paginator`

Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。目前经过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

GitHub 官网地址：https://github.com/lyonlai/bootstrap-paginator

搭配使用的Bootstrap版本，2.X 的分页必须使用div元素，3.X分页的必须使用ul元素。请注意与所使用的bootstrap版本对应上。

实例

页面结构

<div class="page">
     <ul class="pagination"></ul>
</div>

js初始化

  $('.pagination').bootstrapPaginator({
                /*对应的bootstrap版本*/
                bootstrapMajorVersion:3,
                /*分页按钮的大小*/
                size:'small',
                /*当前选中页码*/
                currentPage:1,
                /*一共多少页*/
                totalPages:Math.ceil(8),
                /*页码按钮的数量 默认是5*/
                numberOfPages:3,
                /*点击页码渲染*/
                /*监听按钮的点击事件 获取点击的时候的页码*/
                onPageClicked:function (event, originalEvent, type,page) {
                    /*1. event jquery的事件对象*/
                    /*2. originalEvent 原生dom的事件对象*/
                    /*3. type 按钮的类型*/
                    /*4. page 按钮对应的页码*/
                    //console.log(page);
                    window.page = page;
                   //通过page 来发送ajax请求 实现点击按钮跳转渲染对应内容
                }
            });

参数介绍

参数名	数据类型	默认值	描述
bootstrapMajorVersion	number	2	搭配使用的Bootstrap版本，2.X 的分页必须使用div元素，3.X分页的必须使用ul元素。请注意与所使用的bootstrap版本对应上。
size	string	“normal”	设置控件的显示大小，是个字符串. 允许的值: mini, small, normal,large。值：mini版的、小号的、正常的、大号的。
alignment	string	“left”	设置控件的对齐方式，是个字符串，允许的值用： left, center andright. 即：左对齐、居中对齐、右对齐。
itemContainerClass	function		该参数接收一个函数，返回一个字符串，该字符串是一个我们自定义的class类样式。当控件内的每个操纵按钮被渲染(render)时，都会调用该函数，同时把有关该按钮的信息作为参数传入。参数：type,page, current 。type为该控件的操作按钮的类型，如上图所示的五种类型：first、prev、page、next、last。 page为该按钮所属第几页。current 指示整个控件的当前页是第几页。
currentPage	number	1	设置当前页.
numberOfPages	number	5	设置控件显示的页码数.即：类型为"page"的操作按钮的数量。
totalPages	number	1	设置总页数.
pageUrl	function		实际上，控件内的每个操作按钮最终会被渲染成超链接，该参数的作用就是设置超链接的链接地址。该参数是个函数，参数为：type,page, current。这样我们就可以通过这个函数为每个操作按钮动态设置链接地址。如：“http://example.com/list/page/”+page
shouldShowPage	boolean/function	true	该参数用于设置某个操作按钮是否显示，可是个布尔值也可是个函数。当为true时，显示。当为false时，不显示。如果该参数是个函数，需要返回个布尔值，通过这个返回值判断是否显示。函数有3个参数: type, page, current。使用函数的好处是，可以对每个操作按钮进行显示控制。
itemTexts	function		控制每个操作按钮的显示文字。是个函数，有3个参数: type, page, current。通过这个参数我们就可以将操作按钮上的英文改为中文，如first–>首页，last–>尾页。
tooltipTitles	function		设置操作按钮的title属性。是个函数，有3个参数: type, page, current。
useBootstrapTooltip	boolean	false	设置是否使用Bootstrap内置的tooltip。 true是使用，false是不使用,默认是不使用。注意：如果使用，则需要引入bootstrap-tooltip.js插件。
bootstrapTooltipOptions	object		Default: { animation: true, html: true, placement: ‘top’, selector: false, title: “”, container: false } 该参数是个js对象。当参数useBootstrapTooltip为true时，会将该对象传给Bootstrap的bootstrap-tooltip.js插件。
onPageClicked	function		为操作按钮绑定click事件。回调函数的参数：event, originalEvent, type,page。
onPageChanged	function		为操作按钮绑定页码改变事件，回调函数的参数：event, oldPage, newPage。

公共命令

另外该插件还提供了几个公共的命令，可以通过如下方法调用，如： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲example').boots\dots$ (’#example’).bootstrapPaginator(“getPages”) 调用getPages命令。

命令名	参数	返回值	描述
show	page		show命令用于直接跳转到特定的page，与直接点击操作按钮的效果是一样的。使用方法，如：$(’#example’).bootstrapPaginator(“show”,3) 直接跳转到第3页， $(’#example’).bootstrapPaginator(“show”,100)直接跳转到100页。
showFirst			showFirst 命令用于直接跳转到首页，与点击first按钮相同。使用方法：$(’#example’).bootstrapPaginator(“showFirst”)
showPrevious			showPrevious 命令用于直接跳转到上一页。使用方法：$(’#example’).bootstrapPaginator(“showPrevious”)
showNext			showNext命令用于直接跳转到下一页。
showLast			showLast 命令用于直接跳转到上一页。
getPages		object	getPages命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra = $(’#example’).bootstrapPaginator(“getPages”)
setOptions	object		setOptions 命令用于重新设置参数，使用方法：$(’#example’).bootstrapPaginator(“setOptions”,newoptions)

事件`Events`

Bootstrap Paginator 提供了俩个事件：page-clicked和page-changed。这俩个事件作为参数使用，分别对应onPageClicked和onPageChanged。

事件名	回调函数	描述
page-clicked	function(event, originalEvent, type, page)	同上文。另外，参数event, originalEvent是俩个jquery事件对象，可参考jquery相关文档
page-changed	function(event, oldPage, newPage)	同上文

Bootstrap表单自动校验插件 `BootstrapValidator`

一.首先引入BootstrapValidator插件

BootstrapValidator插件需要jQuery和Bootstrap 3
引入js和css文件
- bootstrap.css
- bootstrapValidator.min.css
- jquery-1.10.2.min.js
- bootstrap.js
- bootstrapValidator.min.js

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>

<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
<!-- 使用压缩过的版本-->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
<!-- 使用包含所有验证器的未压缩版本 -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>

二.添加验证规则

1.使用HTML添加简单验证

如果想对某一个字段添加验证规则，需要
包裹，input标签必须有name值，此值为验证匹配的字段。其实就是要符合bootstrap表单结构

<form id="login" class="form-horizontal" autocomplete="off">
   <div class="form-group">
       <label for="inputUserName3" class="col-sm-3 control-label">用户名</label>
       <div class="col-sm-9">
           <input name="username" type="text" class="form-control" id="inputUserName3" placeholder="请输入用户名">
       </div>
   </div>
   <div class="form-group">
       <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
       <div class="col-sm-9">
           <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
       </div>
   </div>
   <div class="form-group">
       <div class="col-sm-offset-3 col-sm-10">
           <button type="reset" class="btn btn-default mr_50">重置</button>
           <button type="submit" class="btn btn-primary">登录</button>
       </div>
   </div></form>

2.js校验

$(function () {
    /*初始化校验插件*/
    /*1.是form表单结构 并且有一个提交按钮*/
    /*2.折插件就是jquery插件 样式和bootstrap风格一致*/
    /*默认不去校验的表单元素（包含隐藏）为[] 代表都校验, ["hidden"] 代表隐藏input 不校验*/
		excluded:[],
    /*#login为form表单id*/
    $('#login').bootstrapValidator({
        /*配置校验的不同状态下显示的图标*/
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        /*需要校验的表单元素 通过名称 name*/
        /* 校验中 VALIDATING */
        fields: {
            /*username为对应表单元素的name="username"*/
            username: {
                /*校验规则 多个校验规则*/
                validators: {
                    notEmpty: {
                        message: '请输入用户名'
                    },
                    /*配置一个校验规则*/
                    callback:{
                        message:'用户名不存在'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '请输入密码'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '密码必须是6-18个字符'
                    },
                    callback:{
                        message:'密码错误'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        /*校验成功的时候出发*/
        /*阻止表单的默认提交  使用ajax提交*/
        e.preventDefault();
        /*后台校验用户名和密码 获取form元素*/
        var $form = $(e.target);
        $.ajax({
            type:'post',
            url:'/employee/employeeLogin',
            data:$form.serialize(),  /**/
            dataType:'json',
            success:function (data) {
                /*业务成功*/
                if(data.success == true){
                    /*跳转后台的首页*/
                    location.href = '/admin33/';
                }
                /*业务失败*/
                else {
                    if(data.error == 1000){
                        /*用户名错误*/
                        /*设置用户名这个表单元素的校验状态为失败*/
                        /*NOT_VALIDATED 还没校验, VALIDATING 校验中, INVALID 失败 or VALID 成功*/
                        /*自定义提示信息 ！！！！！！*/
                        /*1.获取校验组件 name="username"*/
                        /*2.调研更改状态的函数*/
                        /*3.校验的表单，改成什么状态，使用上面定义的哪个校验规则*/
                        $form.data('bootstrapValidator').updateStatus('username','INVALID','callback');
                    }else if(data.error == 1001){
                        /*密码错误*/
                        $form.data('bootstrapValidator').updateStatus('password','INVALID','callback');
                    }
                }
            }
        });
    });
});

自定义提示信息

//updateStatus 三个参数 对应表单名，状态，自定义学习
$form.data('bootstrapValidator').updateStatus('password','INVALID','callback');

js修改校验状态
- 四大状态 NOT_VALIDATED 还没校验, VALIDATING 校验中, INVALID 失败 or VALID 成功

$("#aa").on("click",function () {                       /*对应表单名  ， 状态*/
     $('#form').data('bootstrapValidator').updateStatus('categoryId','VALID')
})

模板引擎`art-template`

模版引擎内不可使用外部变量
使用

引用文件

<script src="assets/artTemplate/template-native.js"></script>

先写模板

<script type="text/template" id="pointTemplate">
 <% for (var i = 0; i<list.length ;i++) { %>
	<li  data-slide-to="<%=i%>" class="<%= i==0 ? 'active' : ''%>"><%=list.text %></li>
 <% } %>
</script>

<script type="text/template" id="historyID">
			<% if(data){ %>
				<% for (var i = 0 ; i<data.length ; i++){%>
					<li><%= data[i] %></li>
				<% } %>
			<%} else {%>	
				<li><%= "暂未有记录" %></li>
			<% } %>	
			
		</script>

html中留坑

<ol class="carousel-indicators">

</ol>

js使用

获取数据  要以对象的形式传递 {list:data}
var pointHtml = template('pointTemplate',{list:data});
执行渲染
$(".carousel-indicators").html(pointHtml)

`templat无法访问外部变量的解决方案`

辅助方法：在模板内部可以使用的函数

template.helper('getJquery',function () {
        return jQuery;
    });

这样就可以在template渲染中使用jauery

<script type="text/template" id="box">
    <% var $ = getJquery(); %>
    <% $.each(rows,function(i,item){ %>
        <tr>
            <th scope="row"><%=i+1+(page-1)*size%></th>
            <td><%=item.categoryName%></td>
            <td><%=item.brandName%></td>
            <td><img width="40" height="40" src="<%=item.brandLogo%>" alt=""></td>
        </tr>
    <% }); %>
</script>

less

安装

  npm install -g less

cmd使用
- ```
lessc lessname.less clssName.css
```
语法
- 变量
  - 必须@前缀，：是等于的以上，必须分号结束；
  - 不能以数组开头，不能包含特殊字符，区分大小写
    - ```
    /*字符编码防止编译后乱码*/
    @charset "UTF-8";
    
    @mainColor:#e92323;
    
    div{
      background: @mainColor;
    }
    a:hover{
      color: @mainColor;
    }
```
- 变量用于字符拼接使用方法{}
  - ```
  @className:box;
  .a@{className}b{
    color: @mainColor;
  }
```
- 混入
  - 组合样式的例子
    - ```
    .w50{
      width: 50%;
    }
    .f_left{
      float: left;
    }
    .f_right{
      float: right;
    }
    /*类混入*/
    .w50-f_left{
      .w50();
      .f_left();
    }
```
- 函数混入
  - 定义函数函数名不能与其他类名相同
```
  .w50(){
    width: 50%;
  }
```
  - ```
  /*
  1.定义了参数（没有默认值），调用的时候必须传参
  2.怎么定义默认值 和定义变量值是一样的
  3.定义了参数（有默认值），可传可不传
  */
   /*定义了形参 :号后为默认值*/
  .f(@direction:left){
    float: @direction;
  }
  .borderRadius(@width:100px){
    border-radius: @width;
    -webkit-border-radius:@width;
    -moz-border-radius:@width;
    -o-border-radius:@width;
    -ms-border-radius:@width;
  }
  .w50-f_left{
      /*调用*/
    .w50();
       /*调用并传参*/
    .f(right);
    .borderRadius(20px);
  }
```
- 嵌套
  - ```
  @charset "UTF-8";
  .wjs_app{
    display: block;
    img{
      display: none;
    }
    /*需要连接的情况：&*/
    &:hover{
      img{
        display: block;
        position: absolute;
        left: 50%;
        margin-left:-60px;
        border: 1px solid #ccc;
        border-top: none;
        top:40px;
        z-index: 100000;
      }
    }
     /*wjs_app 子代选择器*/
    > div{
      display: block;
    }
  }
```
- 解析后
```
  @charset "UTF-8";
  .wjs_app {
    display: block;
    /*需要连接的情况：&*/
  }
  .wjs_app img {
    display: none;
  }
  .wjs_app:hover img {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    border: 1px solid #ccc;
    border-top: none;
    top: 40px;
    z-index: 100000;
  }
  .wjs_app > div {
    display: block;
  }
```
- @import 导入其他less文件
  - ```
  @charset "UTF-8";
  
  @import "variables";
  
  @import "mixins";
  
  @import "topBar";
  
  @import "banner";
```
- 运算及函数
  - escape(@string); // 通过 URL-encoding 编码字符串
    
    e(@string); // 对字符串转义
    
    %(@string, values…); // 格式化字符串
    
    unit(@dimension, [@unit: “”]); // 移除或替换属性值的单位
    
    color(@string); // 将字符串解析为颜色值
    
    data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
    
    ceil(@number); // 向上取整
    
    floor(@number); // 向下取整
    
    percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
    
    round(number, [places: 0]); // 四舍五入取整
    
    sqrt(number); // * 计算数字的平方根
    
    abs(number); // * 数字的绝对值
    
    sin(number); // * sin函数
    
    asin(number); // * arcsin函数
    
    cos(number); // * cos函数
    
    acos(number); // * arccos函数
    
    tan(number); // * tan函数
    
    atan(number); // * arctan函数
    
    pi(); // * 返回PI
    
    pow(@base, @exponent); // * 返回@base的@exponent次方
    
    mod(number, number); // * 第一个参数对第二个参数取余
    
    convert(number, units); // * 在数字之间转换
    
    unit(number, units); // * 不转换的情况下替换数字的单位
    
    color(string); // 将字符串或者转义后的值转换成颜色
    
    rgb(@r, @g, @b); // 转换为颜色值
    
    rgba(@r, @g, @b, @a); // 转换为颜色值
    
    argb(@color); // 创建 #AARRGGBB 格式的颜色值
    
    hsl(@hue, @saturation, @lightness); // 创建颜色值
    
    hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
    
    hsv(@hue, @saturation, @value); // 创建颜色值
    
    hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
    
    hue(@color); // 从颜色值中提取 hue 值（色相）
    
    saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
    
    lightness(@color); // 从颜色值中提取 ‘lightness’ 值（亮度）
    
    hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
    
    hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
    
    hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
    
    red(@color); // 从颜色值中提取 ‘red’ 值（红色）
    
    green(@color); // 从颜色值中提取 ‘green’ 值（绿色）
    
    blue(@color); // 从颜色值中提取 ‘blue’ 值（蓝色）
    
    alpha(@color); // 从颜色值中提取 ‘alpha’ 值（透明度）
    
    luma(@color); // 从颜色值中提取 ‘luma’ 值（亮度的百分比表示法）
    
    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
    
    mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
    
    greyscale(@color); // 完全移除饱和度，输出灰色
    
    contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
    
    multiply(@color1, @color2);
    
    screen(@color1, @color2);
    
    overlay(@color1, @color2);
    
    softlight(@color1, @color2);
    
    hardlight(@color1, @color2);
    
    difference(@color1, @color2);
    
    exclusion(@color1, @color2);
    
    average(@color1, @color2);
    
    negation(@color1, @color2);
    
    iscolor(@colorOrAnything); // 判断一个值是否是颜色
    
    isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
    
    isstring(@stringOrAnything); // 判断一个值是否是字符串
    
    iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
    
    isurl(@urlOrAnything); // 判断一个值是否是url
    
    ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
    
    ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
    
    isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
    
    isunit(@numberOrAnything, “rem”); // * 判断一个值是否是指定单位的数值
    - 例子
    - ```
    /*运算*/
    @num:5;
    ul{
      width: 100%*@num;
      li{
        width: 100%/@num;
        color: red+yellow+blue;
        background: gray*0.3;
        /*内置函数*/
        border-color: darken(red,20%);
      }
    }
```

less无法在浏览器解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="../less/test.less">
    <script src="../lib/less/less.min.js"></script>
    <script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>

rem

rem是相对单位
em大小是基于父元素的字体大小*/
rem的大小是基于？？？/
浏览器默认的字体大小是16px*/
r 意思 root 根元素，html标签 */
rem的大小是基于html元素的字体大小/
rem换算公式
- 当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度

less rem 适配

var.less

@charset "UTF-8";
//声明变量
//rem适配方案不好维护  设备会更新  设计稿尺寸  预设基准值
//适配主流设备十几种
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸(宽度)
@psdWidth:750px;
//预设基准值（HTML：font-size：）
@baseFontSize:100px;
//设备的种类
@len:length(@adapterDeviceList);

mixins.less

// 定义方法
//遍历使用的是for循环
//less没有循环语法
//使用函数的迭代 死循环
//根据数组的长度去停止当前循环
//给函数的执行附加条件
//需要序号来判断  通过序号遍历 @index 1 开始
//遍历成功
//            (@index)->形参  ( @index > 0)-> 循环终止条件
.adapterMixin(@index) when ( @index > 0){
		//          extract方法  查询数组指定序号对应的内容
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
		        //换算公式 当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  //自调用 i--
  .adapterMixin( @index - 1);
}

daapter.less

// 调用方法
.adapterMixin(@len);

index.less

@charset "UTF-8";
//输出文件
//变量
@import "var.less";
//混入
@import "mixins.less";
//适配
@import "adapter.less";
//重置样式
@import "reset.less";

zepto

Zepto 模块

module	default	description
zepto	✔	核心模块；包含许多方法
event	✔	通过`on()`& `off()`处理事件
ajax	✔	XMLHttpRequest 和 JSONP 实用功能
form	✔	序列化 & 提交web表单
ie	✔	增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect		提供 `$.os`和 `$.browser`消息
fx		The `animate()`方法
fx_methods		以动画形式的 `show`, `hide`, `toggle`, 和 `fade*()`方法.
assets		实验性支持从DOM中移除image元素后清理iOS的内存。
data		一个全面的 `data()`方法, 能够在内存中存储任意对象。
deferred		提供 `$.Deferred`promises API. 依赖"callbacks" 模块. 当包含这个模块时候, `$.ajax()` 支持promise接口链式的回调。
callbacks		为"deferred"模块提供 `$.Callbacks`。
selector		实验性的支持 jQuery CSS 表达式实用功能，比如 `$('div:first')`和`el.is(':visible')`。
touch		在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
gesture		在触摸设备上触发 pinch 手势事件。
stack		提供 `andSelf`& `end()`链式调用方法
ios3		String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不

touch对应事件

['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown','doubleTap', 'tap', 'singleTap', 'longTap']

-SkyBlue-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostrap个人学习笔记

居中 .container默认有左右的15px margin行 .row填充了父容器的15px margin 左右各-15px列 .col-lg-12大屏设备 lg 大屏设备以上生效包含本身中屏设备 md 中屏设备以上生效包含本身小屏设备 sm 小屏设备以上生效包含本身超小屏设备 xs 超小屏设备以上生效包含...
复制链接

扫一扫