低版本IE支持Bootstrap

这个是结合了网上的资料和自己的实际经验，网上有些不知什么原因没有效果。

1.头部引入相关JS,注意一定要放在CSS文件引入后面,使得低版本IE调用对应文件,不要用file://或@import形式引用

<!-- HTML5 shim, Respond.js and css3-mediaqueries IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="../Public/js/html5shiv-printshiv.min.js"></script>
    <script src="../Public/js/respond.min.js"></script>
    <script src="../Public/js/css3-mediaqueries.js"></script>
<![endif]-->

html5shiv’s GitHub: https://github.com/aFarkas/html5shiv
respond’s GitHub: https://github.com/scottjehl/Respond
css3-mediaqueries’s Google code: https://code.google.com/p/css3-mediaqueries-js/

2.针对浏览器的内容做标识，使用meta标签调节浏览器的渲染方式
Bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中： 

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件 Google Chrome Frame （可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。关于此meta标签的具体说明可参见StackOverflow上的精彩回答，标签高人的英文解释可以参看：
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
目前国内的主流浏览器都是双内核，故而添加meta标签来告诉浏览器使用什么内核来渲染页面。

3.IE8不完全支持box-sizing:border-box与min-width, max-width, min-height或max-height的一起使用。所以，v3.0.1的Bootstrap中对container的类已经不再使用max-width了。

4.DOCTYPE标签前后不要有任何空行或空格

<!DOCTYPE html>
<html>

5.如果使用的是Bootstrap2.1.1，修改了navbar-inner{filter:none}可解决问题。如果使用的是3.0+版的没有这段代码了。详细介绍请看：
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8

6.关于placeholder，有现成的一些js，但是并不能很好适配Bootstrap，我自己结合网上数据写了一个js：

// To support placeholder in early IE
$(function() {
    if (!('placeholder' in document.createElement('input'))) {
        $('input[placeholder]').each(function() {
            $(this).before('<span id="' + $(this).attr('id') + '_ph" class="placeholder" style="padding: ' + $(this).css('padding') + '; font: ' + $(this).css('font') + '; font-size: ' + $(this).css('font-size') + '; margin-left: ' + (parseInt($(this).css('margin-left')) + 1) + 'px; margin-top: ' + (parseInt($(this).css('margin-top')) + 1) + 'px">' + $(this).attr('placeholder') + '</span>');
            var parentId = $(this).attr('id');
            $(this).bind('propertychange', function() {
                if ($(this).val().length > 0) {
                    $('#' + parentId + '_ph').hide();
                } else {
                    $('#' + parentId + '_ph').show();
                }
            })
            $('#' + parentId + '_ph').click(function() {
                $('#' + parentId).focus();
            });
            $(this).change('');
        });
    }
});

(function($) {
    $.extend({
        checkPlaceHolder : function(obj) {
            var $object = $(obj);
            var parentId = '#' + $object.attr('id') + '_ph';
            if ($object.val().length > 0) {
                $(parentId).hide();
            } else {
                $(parentId).show();
            }
        }
    });
})(jQuery);

附上两篇不错的文章也可以参考：
http://hustlzp.com/post/2014/01/ie8-compatibility
http://ju.outofmemory.cn/entry/1595

data.update.lastsys.time.agopunc.commaarticle.create.bypunc.commaarticle.file.inpunc.colonBootstrap
百度UMeditor在Chrome中bootstrap框架下上层图片拖动异常问题

百度UMeditor和bootstrap的主css产生了冲突，在网上查了下资料，原来是bootstrap的*{-webkit-box-sizing: border-box; box-sizing: border-box}定义导致，在页面添加以下css即可解决：

.edui-scale{-webkit-box-sizing: content-box; box-sizing: content-box;}
data.update.lastsys.time.agopunc.commaarticle.create.bypunc.commaarticle.file.inpunc.colonBootstrap
BootStrap dropdown阻止dropdown-menu点击后消失

在一些场景里，需要dropdown在单次点击menu时候保持menu显示，比如移动端的多级菜单/表单填写等。但坑爹的BS好像没有说明如何实现，popper.js里也没有说，怎么办呢，也不是没有办法，可以使用stopPropagation方法来阻止click事件的向下传播。

首先，给需要应用的dropdown-menu添加标记data-stopPropagation="true"

然后在dropdown初始化后，添加如下方法

$('[data-stopPropagation]').on('click', function (e) {
            e.stopPropagation();
});

Done!

data.update.lastsys.time.agopunc.commaarticle.create.bypunc.commaarticle.file.inpunc.colonBootstrap
TinyMCE在Bootstrap模态框中二次弹出的时候无法获取焦点的问题

实际上,官方给出了解决方案…
TinyMCE in a jQuery UI Dialog

// Prevent jQuery UI dialog from blocking focusin
$(document).on('focusin', function(e) {
  if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
    e.stopImmediatePropagation();
  }
});
data.update.lastsys.time.agopunc.commaarticle.create.bypunc.commaarticle.file.inpunc.colonBootstrappunc.caesuraTinyMCE
article.category