1.4　HTML标准模板

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

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

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

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

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

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

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

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

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