查字典图书网
查字典图书网
在新项目文件夹中，用编辑器打开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）正常响应。 做完这几件事之后，我们就可以真正开始设计自己的网站了。