欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:960
  2. 浏览总数:11,448,478
  3. 评论:3870
  4. 分类目录:102 个
  5. 注册用户数:5828
  6. 最后更新:2018年10月13日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

Bsie:兼容IE6的Bootstrap前端库

bsie是使得IE6可以支持Bootstrap的补丁,Bootstrap是 twitter.com 推出的非常棒web UI工具库。

目前,bsie使得IE6能支持bootstrap大部分特性,可惜,还有一些实在无法支持...

下面的这个表格就是当前已经被支持的bootstrap的组件和特性:

组件       特性
-----------------------------------------------------------
grid            fixed, fluid
navbar          top, fixed
nav             list, tabs, pills
dropdown        dropdown (two level)
buttons         button, group color, size, dropdown-button, 
                (disable state is not dynamic)
form            default, horizontal, inline, all controls, 
                validation state
tables          hover
pagination      all
labels          all
badges          all
code            all
modal           most
tooltip         all
popover         all
alert           all
typeahead       all
progressbar     most
media           all
wells           all
hero unit       all
icons           all

文件含义简介

bootstrap/css/bootstrap.css :bootstrap原始的css文件。
bootstrap/css/bootstrap.min.css:bootstrap原始的压缩后的css文件。
bootstrap/css/bootstrap-ie6.css :bsie的主要的css文件。
bootstrap/css/bootstrap-ie6.min.css :bsie压缩后的css文件。
bootstrap/css/ie.css :bsie额外添加的css补丁,这个文件中的大部分内容无法写入到 .less 文件中,并且必须紧跟在 bootstrap-ie6.css之后在<head> 中引入。
js/bootstrap-ie.js :这个javascript补丁文件用于解决一些纯CSS无法完成工作。
bootstrap/img/glyphicons-halflings.png-8.png :这个图片文件是针对IE6的透明格式图标,是png 8bit格式的,显示效果虽然并不是太好,但是也还可以接受。
bootstrap/less-ie6 :这个目录下是所有打过补丁的 .less 文件,你可以用lessc命令重新编译出 bootstrap-ie6.css文件

例子

在bsie目录下有以下几个例子:
test-XXX.html, 例如test-buttons.html test-form.html

p-1.html...p-N.html, 这几个文件都是直接从bootstrap案例中拷贝过来的。

使用手册

第1步, 在 中添加以下css文件:

 <!-- Bootstrap css file v2.2.1 -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

  <!--[if lte IE 6]>
  <!-- bsie css patch -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">

  <!-- bsie additional css patch -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
  <![endif]-->

第2步,在html文档结尾处加入以下的javascript文件:

 <!-- jQuery 1.7.2 or higher -->
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

  <!-- Optional, bootstrap javascript library -->
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

  <!--[if lte IE 6]>
  <!-- bsie js patch, it will only execute in IE6 -->
  <script type="text/javascript" src="js/bootstrap-ie.js"></script>
  <![endif]-->

第3步,根据你的情况,这一步是可选的:

IE6 注意: : 对每一个新加载的html片段都要调用 $.bootstrapIE6(el) 函数,其实主要就是指的通过ajax获取到的html内容

/**
 * make elements in container el to be compatible with IE6
 */
if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6(el);

目前在IE6下还不能支持tab控件的嵌套,主要是因为IE6不支持css的子选择器。

IE6-7 hack

IE6 hack

  _zoom:1;

IE6-7 hack

  *zoom:1;

IE6 bug fix tip

hasLayout (clear float):

  .container 
  { 
    zoom:1; 
  }

其它能够触发haslayout的css属性:

 position:   absolute
  float:      left | right
  display:    inline-block
  width:      except 'auto'
  height:     except 'auto'
  zoom:       except 'normal'
  overflow:   hidden | scroll | auto
  overflow-x/-y: hidden | scroll | auto
  position:   fixed
  min-width:  any value
  max-width:  except 'none'
  min-height: any value
  max-height:  except 'none'
  writing-mode: tb-rl   /* only for MS */

下面列出的css属性能够清除hasLayout:

  width:        auto;
  height:       auto;
  max-width:    none;   /* IE7 */
  max-height:   none;   /* IE7 */
  position:     static;
  float:        none;
  overflow:     visible;
  zoom:         normal;
  writing-mode: lr-t;

下面的css将不会hasLayout=false:

 .element {
    display:inline-block;
    display:inline;
  }
inline-block:
1
  `.container 
  { 
    zoom:1; 
    display:inline;
  }

透明颜色:

  .element
  {
    border-color:pink/* rarely used color */;
    filter:chroma(color:pink);
  }
  * notice: the filter will cause disappeared of absolute element which in relative container

body背景色:

  body { /* Faild: Sometime, it will not render whole page by gray color  */
    background-color: gray;
  }
  * html { /* Success! */
    background-color: gray;
  }

IE6-7 ul.dropdown-menu 必须增加以下样式: *width:explicit-width;

  /* for example */
  *width:180px;
bsie项目主页:http://ddouble.github.io/bsie/
Github地址:https://github.com/ddouble/bsie

本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【Bsie:兼容IE6的Bootstrap前端库】(https://www.iteblog.com/archives/1559.html)
喜欢 (2)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!
(7)个小伙伴在吐槽
  1. 一定要给博主一个好的评论。
    周周2016-01-05 10:03 回复
  2. 一直在观看博主的文章觉的很好。
    周周2016-01-05 10:02 回复
  3. 好好学习一把。
    周周2016-01-05 10:02 回复
  4. 赞一个吧。
    周周2016-01-05 10:01 回复
  5. 哎呦不错哦。
    周周2016-01-05 10:01 回复
  6. 学习了,赞一个。
    周周2016-01-05 10:01 回复
  7. 不错,写的很好。
    周周2016-01-05 09:59 回复