让你快速搭建一个bootstrap页面

<!DOCTYPE HTML>
<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的样式表。

    <link rel="stylesheet" href="shelf.css"> 自己项目的CSS

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

    </head>
    <body>


    </body>

    </html>

代码下载点击打开链接

注意引入的顺序 才可兼容IE8 只要把代码复制就可以直接在body里面写你自己的东西了。

最后提醒下了:要bootstarp兼容到ie8是很简单的事情,但是兼容到ie67就有点困难了,办法是有的只是很麻烦,上次做了个项目需要支持到ie67,只能自己硬着头皮一个一个写hack了,写了一个首页的hack我就彻底的疯掉了,最后还是建议客户升级浏览器。所以在做项目的时候如果是要兼容到ie8的话才来用bootstarp这个框架。

posted @ 2014-10-20 14:11  rose_sun  阅读(1227)  评论(0编辑  收藏  举报