在新项目文件夹中,用编辑器打开index.html。这个示例标记文件来自H5BP,体现了一些最佳实践和建议方案。我们就以这个文件为基础,把它整合到Bootstrap的工作流中。下面先了解一下这个文件。

浏览一下整个文件,你会发现几个有意思的地方。这些地方在H5BP的文档中都有详细说明,访问这个链接http://h5bp.com很容易找到。不过我们接下来也会简单介绍一些,我们按照次序来。

  • HTML5文档类型声明:

    <!DOCTYPE html>
    
  • 针对IE的条件注释,开发者通过嵌套的选择符可以加入对旧版本浏览器的修复代码:

    <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
    <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
    <!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
    <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
    
  • html标签也包含一个no-js类。如果浏览器的JavaScript可用,Modernizr脚本(本章前面介绍过)会把这个类删除,并将其替换成js类。如果这个类没有被删除,则表明JavaScript不可用,我们就需要使用嵌套的选择符为这种情况写一些CSS规则。

  • 接下来是几个meta标签。

    • 用于指定字符集的:

      <meta charset="utf-8">
      
    • 告诉IE使用最新版的渲染引擎,或者如果安装了的话,使用谷歌的Chrome Frame:

      <meta http-equiv="X-UA-Compatible" 
        content="IE=edge,chrome=1">
      
    • 预留给描述站点用的:

      <meta name="description" content="">
      
    • 针对移动浏览器的视口标签:

      <meta name="viewport" content="width=device-width">
      
  • 在该放站点图标和触摸屏图标的地方,是一行注释,告诉我们可以直接使用站点根目录下的图标文件,放在站点根目录下可以自动被用户浏览器及设备发现。

  • 接下来是两个样式表的链接,一个指向normalize.css,另一个指向main.css:

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    
  • 再下面就是加载Modernizr脚本的script标签。这个脚本会为IE8提供HTML5“垫片脚本”,以便它能识别HTML5的分区元素:

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    
  • 接下来是IE条件注释,包含推荐用户把旧版IE升级到新版本的消息:

    <!--[if lt IE 7]>
      <p class="chromeframe">You are using an
        <strong>outdated</strong> browser. ...
    <![endif]-->
    
  • 紧接着是一段文本。

  • 随后是托管在谷歌服务器上的jQuery链接,以及一个本地jQuery的后备链接:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
      jquery.min.js"></script>
    <script>window.jQuery || document.write('<script 
      src="js/vendor/jquery-1.10.2.min.js">
      <\/script>')</script>
    
  • 下面就是plugins.js和main.js的链接,分别用于保存JavaScript插件代码和我们编写的代码:

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
    
  • 谷歌的Analytics脚本:

    <script>
      var _gaq=[['_setAccount','UA-XXXXX-
        X'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),
         s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'
        .google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
    
    

如果你想更详细地了解有关上面这些内容的信息,还是去看看H5BP的文档吧,干脆直接把它的HTML文档链接给你:https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md。这个文档中的解释非常详细。

对本章的任务而言,我们需要对这个模板中的元素进行如下操作:

1. 设定我们站点的标题,针对旧版本浏览器用户更新现有的IE条件注释;

2. 基于LESS文件编译Bootstrap的CSS,添加基本的页面内容;

3. 整合Bootstrap的JavaScript插件,确保响应式的导航条(navbar)正常响应。

做完这几件事之后,我们就可以真正开始设计自己的网站了。

30:00