深入理解Bootstrap
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4 HTML标准模板

如下代码是使用Bootstrap框架的最基本HTML代码，可以在此基础上进行自己的扩展，只需要确保文件引用顺序一致即可。HTML标准模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap基础模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的，如果不用可移除 -->
    <!-- 注意:Respond.js不支持file:// 方式的访问 -->
    <!--[if lt IE 9]>
      <script src="https:// oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https:// oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- 如果要使用Bootstrap的JS插件，则必须引入jQuery -->
    <script src="https:// code.jquery.com/jquery.js"></script>
    <!-- Bootstrap的JS插件 -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

由上述模板代码可以看出，3.x和2.x版本相比，有一个很大的区别，就是多了以下一行代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这就是我们前面提到的，Bootstrap从3.0版本开始全面支持移动平台了，并将贯彻移动先行（Mobile First）的宗旨。上述代码的意思是，默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小。对于移动代码的处理，还有另外一种形式，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
   scale=1, user-scalable=no">

上述代码表示：强制让文档的宽度与设备的宽度保持1∶1，文档最大的宽度比例是1，且不允许用户单击屏幕放大浏览。尤其要注意的是，content里多个属性的设置一定要用分号和空格来隔开，如果不规范将不会起作用。

官方网站还提供了各种布局的基本模板供大家使用，大家可以到如下地址进行访问查看：http://getbootstrap.com/getting-started/

通过对这些模板的模仿和练习，你将会发现Bootstrap的强大。

上一章目录下一章