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>
2267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
