发布于 2017-04-25 19:38:57 | 126 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap入门,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要为大家详细解析了Bootstrap中transition、affix的使用方法,感兴趣的朋友可以参考一下

一、Transition(过滤)
作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件;
首先:创建一个Element;
然后:迭代查看此元素支持的transition动画名称
Transition实现的技巧,主要是重写了jquery的event对象,代码如下:


$(function () {
 $.support.transition = transitionEnd()

 if (!$.support.transition) return

 $.event.special.bsTransitionEnd = {
  bindType: $.support.transition.end,
  delegateType: $.support.transition.end,
  handle: function (e) {
  if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
  }
 }
 })

二、Affix(自动浮动定位)
1、Target:参数表示其定位参考节点(应该是产生滚动条的父容器对象),默认是window
2、Data-offset设置的top和bottom值,只会用于计算表达式,不会设置到css中
3、三种位置定位样式类:

3.1、Affix-top:到达页面顶部的时候会添加的样式
3.2、Affix:在页面中部的时候会添加的样式
3.3、Affix-bottom:在页面底部的时候会添加的样式

4、处理公式:

4.1、Top:traget的滚动条高度(scrollTop)< 元素设定离顶位置的距离(offsetTop)(首次判断)
    4.1.1、scrollTop设置为:元素本身定位的top(元素当前定位离文档原点的距离)(非首次)
4.2、getPinnedOffset:获取粘住元素top – target滚动条的top
4.3、bottom:如果粘住元素是首次bottom定位的时候,那么bottom就是 target滚动条高度 + target元素的高度 >= 整个文档滚动条高度 – 粘住元素距离底部的高度
   4.3.1、如果是非首次bottom定位
      1)、如果offsetTop(元素设定离顶位置的距离)不为空,target的top  + getpinnedOffset的值 > 粘住元素当前定位到top的值
      2)、如果offsetTop为空,target的top   + target元素的高度 > 文档高度 – 粘住元素距离底部的高度
4、能改变粘住元素的只有他的top,top值为:文档高度 — 粘住元素高度 — 粘住元素距离底部的高度

5、坑之所在:

1)、top和bottom一起使用的时候,会出现冲突,原因:

    Affix-bottom,也就是到达页面底部的时候,bootstrap是用offset来设置的top值,给元素加了position:relative值,这就导致在回到页面顶部后,再次向下滚动时候,没有任何效果
原因:行内样式设置的relative会覆盖class中设置的fixed样式

6、总结

1)、在top情况表现良好,在bottom情况下需要自己加入手动控制
2)、应用affix控件,至少要自己重写affix样式,用于控制粘住条的定位。



相关阅读 :
全面解析Bootstrap中transition、affix的使用方法
全面解析Bootstrap中tooltip、popover的使用方法
全面解析Bootstrap中form、navbar的使用方法
全面解析Bootstrap中nav、collapse的使用方法
全面解析Bootstrap中Carousel轮播的使用方法
全面解析Bootstrap弹窗的实现方法
全面解析Bootstrap表单样式的使用
针对BootStrap中tabs控件的美化和完善(推荐)
全面解析bootstrap格子布局
全面解析Bootstrap布局组件应用
全面解析Bootstrap手风琴效果
全面解析Bootstrap图片轮播效果
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务