使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等“使用Bootstrap 3开发响应式网站实践”系列，将使用Bootstrap 3.2制作一个自适应网站，无论是在电脑、平板，还是手机上，都呈现比较好的效果。在电脑浏览器上的最终效果如下：
在手机上的呈现效果如下：
本篇主要包括：
□ 前期准备□ 引入Bootstrap，jQuey文件等□ 搭建页面主体结构□ 导航区域
□ 前期准备
→使用Visual Studio 2012创建一个空的asp.net网站→把下载下来的Bootstrap 3中的CSS,fonts,js文件夹拷贝到网站根目录下→在网站根目录下创建images文件夹，用来存放所有的图片→使用NuGet安装最新版的jQuery→在网站根目录下创建index.html文件
□ 引入Bootstrap，jQuey文件等
→在css文件夹下创建site.css→在js文件夹下创建site.js→把Bootstrap、jQuery等引入index.html文件中
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/site.js"></script>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">这时响应式布局的一个标签，以上表示浏览器的宽度和屏幕宽度保持一致。比如，屏幕宽度为320px，那么浏览器的宽度自适应为320px。如果网站不是针对响应式开发的，就没有必要使用这个标签。其它属性包括：
○ width: 视觉宽度○ device-width: 屏幕宽度○ heigh: 视觉高度○ device-height: 屏幕高度○ initial-scale: 初始放大比例，设置为1.0时不放大○ minimum-scale: 最小的放大比例，设置为1.0时不放大○ maximum-scale: 最大的放大比例，设置为1.0时不放大○ user-scalable: 是否允许放大，设置为no时不允许放大
另外，需要在site.css设置如下：
@-ms-viewport{
width: device-width;
}
□ 搭建页面主体结构
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<link href="css/bootstrap.min.css" rel="stylesheet" />
PRe style="font-size: 11px; font-family: consolas,'Courier New',courier,monospace; width: 100%; margin: 0em; background-color: