让你快速搭建一个bootstrap页面

最新推荐文章于 2019-09-19 20:27:47 发布

吴杼恩

最新推荐文章于 2019-09-19 20:27:47 发布

阅读量1.5k

点赞数

分类专栏： bootstrap 文章标签： bootstrap html5 IE 移动端怎么搭建响应式页面

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/40299999

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">


<meta name="renderer" content="webkit">



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

</head>
<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以内，这个可以忽略，因为我们都会用滑动来代替；当然了，可以用在页面布局不多的地方！