查字典图书网
查字典图书网
先把index.html文件中<title>的内容加上。你可以随便给自己的作品起名字，比如Bootstrappin’ Portfolio。为准确起见，这里使用HTML实体'来表示单引号，结果如下所示： <title>Bootstrappin' Portfolio</title> 1.7.1 调整过时的浏览器消息 模板中的消息针对老浏览器用户。大概在第20行左右，消息内容如下： You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience. 这段消息里面包含一个指向http://browsehappy.com的链接，该网站是一个推荐浏览器升级的站点，也包括升级到让IE能拥有现代浏览器能力的插件——Google Chrome Frame。（不过，随着谷歌从2014年1月起停止维护，Google Chrome Frame的链接也许已经不存在了。） 在本书写作的时候，这条消息包含在一个只针对IE7之前浏览器（即IE6、IE5，等等）的条件注释中。这样一来，除非看源代码，否则不太可能有人看到这条消息。 世界一直在前进。很多组织都在升级浏览器，而很多设计者也不再支持IE7。不过，一般来说，大家的目标还是要确保IE7用户能够看到站点内容，只是不保证他们的体验。 这样做是比较实际的。因为要完全支持IE7，必须增加很多额外的工作量，包括CSS和JavaScript编码工作。代码增加，带宽占用也增加，成本也更高。 所以，Bootstrap 3也不再支持IE7。但在开发结束后，我们还是应该测试一下，保证IE7用户能够访问站点。当然，肯定不能保证完美的体验了。 为此，我们应该让IE7用户也看到这条消息。这就需要在原有条件注释中添加一个表示等于的e（equal），如下所示： <!--[if lte IE 7]> 也就是把原来的lt替换成lte。 还有几点要注意。 对于IE7及更早的IE版本，可以考虑提供基本的样式表，保证用户能够使用你的网站。 如果你的用户里有很大一部分都使用IE7，而且这些人也不可能升级到新版本，可以考虑支持IE7的Bootstrap 2.2.3。 要是你想知道这些消息显示在浏览器里是什么样子，或者想给它们添加一点样式，可以暂时把开始（<!--[if lte IE 7]>）和结束（<![endif]-->）的条件注释删掉或注释掉。 1.7.2 设置主结构元素 下面开始准备页面内容。目前，还只有一个段落。我们可以稍微添加一点东西，比如下列内容： 包含Logo和导航的页头区； 包含页面内容的内容区； 包含版权和社交媒体链接的页脚区。 添加这些内容，我们都会基于最新的HTML最佳实践来做，而且会考虑ARIA（Accessible Rich Internet Applications，可访问富因特网应用）的role属性（即banner、navigation、main和contentinfo这几个角色）。可能你也知道，HTML5后来又增加了<main role= "main"></main>元素，目的是专门为页面或分区中的主内容提供一个专用的元素。要了解更多相关信息，请参考这个链接：http://www.sitepoint.com/html5-main-element/。 找到模板文件中下面这个注释和段落： <!-- Add your site or application content here --> <p>Hello world! This is HTML5 Boilerplate.</p> 将它们替换成下面这样： <header role="banner"> <nav role="navigation"> </nav> </header> <main role="main"> <h1>Main Heading</h1> <p>Content specific to this page goes here.</p> </main> <footer role="contentinfo"> <p><small>Copyright © Company Name</small></p> </footer> 这就是我们页面的基本结构和内容了。接下来更进一步。