bootstrap,bootstrap兼容ie6789,教程

4004
    


来源:
Licence:
联系:
分类:
平台:
环境:
大小:
更新:
标签:
联系方式 :
免费下载 ×

下载APP,支持永久资源免费下载

限免产品服务请联系qq:1585269081

下载APP
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
下载 ×

下载APP,资源永久免费


如果出现不能下载的情况,请联系站长,联系方式在下方。

免费下载 ×

下载论文助手APP,资源永久免费

免费获取

如果你已经登录仍然出现不能下载的情况,请【点击刷新】本页面或者联系站长


Welcome, This is bsie project Home.

Introduce

bsie is a patch library for Bootstrap IE6 support, bootstrap is a good web UI library from twitter.com

At present, bsie support the most common feature of bootstrap on IE6, but not all ...

Following table is currently supported component & feature:

Component       Feature
-----------------------------------------------------------
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
breadcrumbs     all
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

File summary

bootstrap/css/bootstrap.css :

This is original bootstrap css.

bootstrap/css/bootstrap.min.css :

This is compressed original bootstrap css.

bootstrap/css/bootstrap-ie6.css :

This is bsie main css.

bootstrap/css/bootstrap-ie6.min.css :

This is compressed bsie main css.

bootstrap/css/ie.css :

This is bsie additional css patch, its most content can not be writen in .less file, it must follow bootstrap-ie6.css in <head> block.

js/bootstrap-ie.js :

This javascript file patch some problem which can not be done by pure CSS approach.

bootstrap/img/glyphicons-halflings.png-8.png :

This image file is transparent icons for IE6, it's a 8 bit png image, not very perfect, but I think it can be accepted.

bootstrap/less-ie6 :

There are all patched .less files, you can compile bootstrap-ie6.less with lessc to get your patch css file -- bootstrap-ie6.css

Demo

In bsie root directory, these file is demo:

test-XXX.html, for example test-buttons.html test-form.html

p-1.html...p-N.html, these file is a copy of bootstrap example pages

Manual

Step 1, In <head> block, add following stylesheet:

<!-- 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]-->

Step 2, In end of the document, add following 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]-->

Step 3, Optional accoding to your situation:

IE6  Notice: : call $.bootstrapIE6(el) for every new html snippet (for ajax html content)

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

IE6 currently not support nested tabs control, because IE6 don't support child css selector 

IE6-7 hack

IE6 hack

_zoom:1;

IE6-7 hack

*zoom:1;

IE6 bug fix tip

hasLayout (clear float):

.container 
  { 
    zoom:1; 
  }

other css property which will trigger hasLayout:

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 */

following css property will clear 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;

In one selector, following css will not set hasLayout=false:

.element {
    display:inline-block;
    display:inline;
  }

inline-block:

`.container 
  { 
    zoom:1; 
    display:inline;
  }

transparent color:

.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 background color:

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 must add this style: *width:explicit-width;

/* for example */
  *width:180px;

Support & Contact

If you have some patch for these library, Please send to: ddouble.cn@gmail.com

Thanks.


免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
温馨提示
请用电脑打开本网页,即可以免费获取你想要的了。
扫描加我微信 ×

演示

×
登录 ×


下载 ×
论文助手网
论文助手,最开放的学术期刊平台
							 
回复
来来来,吐槽点啥吧

作者联系方式

×

向作者索要->