<html lang="en-US">
<head>
<meta charset="UTF-8">
<!-- 指定以最新的IE版本模式来显示网页 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 360浏览器相关设置:http://se.360.cn/v6/help/meta.html -->
<!-- 针对360浏览器的内核调用,强制调用极速模式 -->
<meta name="renderer" content="webkit">
<!-- 针对360浏览器强制调用IE标准模式 -->
<!--[if lt IE 10]>
<meta name="renderer" content="ie-stand" />
<![endif]-->
<!--[if !IE]>
<meta name="renderer" content="ie-stand" />
<!<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1"> 需要在手机下打开你的页面这句不能省,意思是让网页的宽度和手持设备的屏幕宽度一致,初始的缩放比例为1。
<title>bs</title>
<script src="bootstrap/jquery/jquery-1.11.1.min.js"> 因为bootstarp是基于JQ框架的所以引入bootstarp脚步前要先引入jq脚本,JQ的脚本不能太低
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 这是bootstarp的样式表。
<script src="js/shefl.js"></script> 自己项目的脚本
<!--[if lt IE 9]> bootstarp是用html5+css3构建的,ie8以下可能对这些支持不是很友好这时我们需要写点hack,涉及到布局要引入让ie8支持html5标签和css3媒体查询。如果是其他css3效果比如圆角和css3高级选择器就要自己另外写hack和添加j兼容脚本了,因为这里不必须的 我也就没用给出。
<script src="bootstrap/IE8lower/html5shiv.js"></script> ie8支持html5标签
<script src="bootstrap/IE8lower/respond.min.js"></script> ie8支持css3媒体查询
<![endif]-->
<body>
</body>
</html>
代码下载点击打开链接
注意引入的顺序 才可兼容IE8 只要把代码复制就可以直接在body里面写你自己的东西了。
最后提醒下了:要bootstarp兼容到ie8是很简单的事情,但是兼容到ie67就有点困难了,办法是有的只是很麻烦,上次做了个项目需要支持到ie67,只能自己硬着头皮一个一个写hack了,写了一个首页的hack我就彻底的疯掉了,最后还是建议客户升级浏览器。所以在做项目的时候如果是要兼容到ie8的话才来用bootstarp这个框架。
补充:Meta:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/>
<meta content="yes"name="apple-mobile-web-app-capable"/>
<meta content="black"name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no"name="format-detection"/>
<meta content="email=no"name="format-detection"/>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport" />
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;user-scalable: 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
第五个meta标签:用于忽略将页面中邮件地址
第六个就是最大的高度限定在568Px以内,这个可以忽略,因为我们都会用滑动来代替;当然了,可以用在页面布局不多的地方!