1.获取bootstrap文件
英文官网:http://getboostrap.com
中文官网:http://www.bootcss.xom
2.开发工具
开发工具选择WebStorm
3.创建基础文件
在WebStorm创建一个空的项目。
将下载的bootstrap文件解压,将文件夹下的css、fronts、js文件夹拷贝到项目下。
在项目下创建index.xml:
1)IE8开启标准渲染模式
meta标签控制IE渲染标准模式和兼容模式
<meta http-equiv="X-UA-Compatible" content="IE-edge">
X-UA-Compatible的值有两种:
a.版本号 content=“IE-edge”
“IE-8” 代表强制以IE8标准模式渲染页面,忽略文档类型声明。
"IE-edge" 始终以最新的文档模式来渲染页面,忽略文档类型声明。
b.Emulate+IE版本号
如果声明了文档类型,则以IE版本号标准模式渲染页面,否则将文档设置为IE5。
2)配置视窗
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
width:控制设备的宽度,用于在不同分辨率的设备浏览。
initial-scala=1:确保网页加载时,以1:1的比例呈现,不会有任何的缩放。
user-scalable=no:在移动浏览器上,禁用其缩放。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
3)引入jQuery文件(body)
jQuery的js文件要放在bootstrap的js之前
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
4)引入boostrap css和js文件
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/bootstrap.min.js"></script>
4.国内CDN加速
百度:http://cdn.code.baidu.com
360: http://libs.useso.com
项目结构:
完整代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><!--IE8开启标准渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--配置视窗--><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>bootstrap项目实战</title><link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>