Bootstrap3基础教程 01 概述
移动设备优先是 Bootstrap 3 的最显著的变化。
基础的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--告诉IE浏览器用最新的引擎-->
<meta name="viewport" content="width=device-width, initial-scale=1"><!--响应式布局-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /><!--bootstrap样式-->
<title></title>
</head>
<body>
<div class="container">
<h1 class="page-header">主体</h1>
<p>Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>
</div>
<script src="Script/jquery-1.8.3.js"></script><!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边-->
<script src="bootstrap/js/bootstrap.min.js"></script><!--Bootstrap 的所有 JavaScript 插件-->
</body>
</html>viewport meta 标签堆移动设备友好~
*width=device-width 确保网站能够正确呈现在不同设备上。
*initial-scale=1 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放.
*maximum-scale=1.0 与 user-scalable=no 一起使用，禁用缩放功能后，用户只能滚动屏幕
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">响应式图像
<img src="..." class="img-responsive" alt="响应式图像">
css代码：
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}* .img-responsive 类的图片水平居中，请使用 .center-block 类
媒体查询 （基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。）
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | 不适用 | 不适用 |
| iOS | YES | 不适用 | 不适用 | 不适用 | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | 不适用 |