jason-layout v5.0.0

jason

前端切图库 —— 分为定宽和响应式，需要手动选择其css

flex

优先使用flex版本做栅格 如果想使用 float 的栅格，在src/scss/variables.scss 中改变

// 是否开启弹性盒子布局
$flex: true;

定宽库 和 响应式库的区别

基本没有区别 =。= 只是定宽库要将 代表 屏幕的标示去掉 比如 row-10 mt-20

reset 说明

挪用了jason-reset 给 链接 和 按钮 增加了 默认的过度效果

a, button {
  transition: all .2s ease;
}

栅格布局系统

参考 bootstrap 。基本与bootstrap的栅格系统一致 新增了行中列间距的概念 注意：在需要栅格布局的时候，需严格按照 .container/.container-fluid > .row > .col 的栅格模式去布局

例子

<div class="container">
  <div class="row row-lg-50 row-md-30 row-sm-15 row-xs-10">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

布局工具类

例子

<div class="container">
  <div class="row row-lg-50 row-md-30 row-sm-15 row-xs-10">
    <div class="col-xs-6">
      <div class="mt-lg-50 mt-md-30 mt-sm-15 mt-xs-10">abc</div>
    </div>
    <div class="col-xs-6">
      <div class="mt-lg-50 mt-md-30 mt-sm-15 mt-xs-10">abc</div>
    </div>
  </div>
</div>

• m代表margin
• p代表padding
• fs代表font-size
• lh代表line-height
• t , b , l , f , tb , lr 代表方向
• 数值 均为 px 单位
• 注意 如果 没有 方向（p-xs-20）则代表四个方向（padding: 20px）
• 注意 lh 特殊，值的语义不为 px 代表的是 1.0 - 2.0 = 10 - 20;
• lh-sm-18(line-height: 1.8) lh-xs-15(line-height: 1.5);

工具类

浮动相关

// 左浮动
.float-left {
  float: left;
}

// 右浮动
.float-right {
  float: right;
}

// 清除浮动影响
// 防止margin溢出
.clearfix {
  @include clearfix;
}

宽度和高度最大化

// 宽度撑满父容器
.width-full{
  width: 100%;
}

// 高度撑满父容器
.height-full{
  height: 100%;
}

文字属性相关

// 居左
.text-left{
  text-align: left;
}

// 居中
.text-center{
  text-align: center;
}

// 居右
.text-right{
  text-align: right;
}

// 加粗
.text-bold{
  font-weight:bold;
}

// 一行显示溢出隐藏
.text-nowrap{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 大写
.text-uppercase{
  text-transform: uppercase;
}

响应式图片

.img-responsive{
  display: block;
  max-width: 100%;
  margin-left:auto;
  margin-right:auto;
}

横向列表

// 横向列表 float 实现方式
ul.list-float,
ol.list-float {
  @extend .clearfix;
  li {float: left}
}

// 横向列表 inline-block 实现方式
ul.list-inline-block,
ol.list-inline-block {
  li {display: inline-block}
}

// 横向列表 flex 实现方式（如果开启了弹性布局）
ul.list-flex,
ol.list-flex {
  display: flex;
}

响应式背景

.bg-cover {
  background-size:cover;
  background-position:center;
}

强制隐藏元素

.hide{
  display: none !important;
}

小组件

特效按钮

详细 看 doc -> demo -> demo.btn.html

<a class="btn btn-anime btn-anime-short btn-slide-top" data-text="slide-top">
  <span>slide-top</span>
</a>

汉堡包按钮

详细 看 doc -> demo -> demo.hamburger.html

<div class="hamburger hamburger-1">
  <div></div>
</div>

window.jason 对象

API

window.jason.nonIe(Array)

IE升级提示 ，把不支持的版本号填到数组中，目前只支持 6 - 10

window.jason.nonIe([6,7,8,9,10]);

window.jason.win

封装着游览器的各项信息 属性 和 方法（只有update） 如下

// 游览器可用区域，包括滚动条的宽度
innerWidth
// 游览器可用区域，包括滚动条的宽度
innerHeight
// 不包括滚动条的页面视口宽度
contentWidth
// 不包括滚动条的页面视口高度
contentHeight
// 滚动条/页面 的总高度
scrollHeight
// 当前视口顶部距离页面顶部的距离
scrollPositionTop
// 当前视口底部距离页面顶部的距离
scrollPositionBottom
// 判断是否是 电脑 用户
isPc
// 判断是否是 移动设备
isMobile
// 判断是否是手机用户
isPhone
// 判断是否是ipad用户
isPad
// 判断是否是微信用户
isWeChat
// Css 前缀
cssPrefix
// 刷新数据 
update