Bootstrap 4对IE8的支持

  从Bootstrap4开始,就不在支持IE8了,如果你需要IE8支持,建议大家使用Bootstrap 3。当然,也可以添加一些第三方的JavaScript来恢复Bootstrap 4对Internet Explorer 8的支持。你需要下面这些东西:

1、使用html5文档声明

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 
</body>
</html>

2、加入meta标签

  前者定义媒体查询,后者确定显示此网页的IE版本。

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

3、引入bootstrap文件

  这步十分重要,这里要看你是引用其他网站(CDN)的bootstrap文件还是把Bootstrap文件放本地。放在本地,部署比较简单。

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Bootstrap 4 CDN:

国内推荐使用 BootCDN 上的库:

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

此外,你还可以使用以下的 CDN 服务:

4、引入respond.js 和 html5.js

  respond.jsGithub)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。
  html5shiv : html5.js(Google Code)(Github)是让不(完全)支持html5的浏览器“支持”html5标签。

<!--[if lte IE 9]>
<script src="bootstrap/js/respond.min.js"></script>
<script src="bootstrap/js/html5.js"></script>
<![endif]-->

5、添加1.X版本的Jquery库

  Jquery 2.0以上就不再支持IE 6/7/8 这三大虐心神器了。所以要想使用Bootstrap3中的一些插件效果,比如modal 弹出层对话框这类控件。我们就需要添加 2.0以下的,这里我用1.10.2的Jquery库。

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>

6、总结

代码总结如下:

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Jophy" />
    <title>ie8</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/style.css">
    <!--[if lte IE 9]>
    <script src="bootstrap/js/respond.min.js"></script>
    <script src="bootstrap/js/html5.js"></script>
    <![endif]-->
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

  可以把以上各个本地的库,换成CDN上的库。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • javascript功能插件大集合,写前端的亲们记得收藏 包管理器管理着 javascript 库,并提供读取和打...
    狗狗嗖阅读 812评论 0 1
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,169评论 2 19
  • 在行军打仗前先做好防患措施,对场地需求的勘察工作包含位置条件。 上战场就要有足够的精力与能力,在作战地...
    杨平的阅读 178评论 0 0
  • 幸福更多的是来自于精神层面的感知,而非物质层面的丰盈。这也解释了为什么很多有钱的人其实活的不开心的原因,但是不可否...
    容0219阅读 311评论 0 0