https://github.com/ddouble/bsie

Bootstrap IE6 Compatible Library
https://github.com/ddouble/bsie

Last synced: 13 days ago
JSON representation

Bootstrap IE6 Compatible Library

• Host: GitHub
• URL: https://github.com/ddouble/bsie
• Owner: ddouble
• Created: 2012-12-10T12:27:15.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2013-11-30T12:22:31.000Z (almost 11 years ago)
• Last Synced: 2024-02-14T23:33:09.161Z (9 months ago)
• Language: CSS
• Homepage: http://ddouble.github.com/bsie/
• Size: 1.66 MB
• Stars: 686
• Watchers: 79
• Forks: 193
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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](http://twitter.github.com/bootstrap)

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 `` 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 `` block, add following stylesheet:**

```

  

  

  

  

  

  

  

```

**Step 2, In end of the document, add following javascript:**

```

  

  

  

  

  

  

  

  

```

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

[email protected]

Thanks.