先把index.html文件中<title>的内容加上。你可以随便给自己的作品起名字,比如Bootstrappin’ Portfolio。为准确起见,这里使用HTML实体&#39来表示单引号,结果如下所示:

<title>Bootstrappin&#39; Portfolio</title>

模板中的消息针对老浏览器用户。大概在第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]-->)的条件注释删掉或注释掉。

下面开始准备页面内容。目前,还只有一个段落。我们可以稍微添加一点东西,比如下列内容:

  • 包含Logo和导航的页头区;

  • 包含页面内容的内容区;

  • 包含版权和社交媒体链接的页脚区。

添加这些内容,我们都会基于最新的HTML最佳实践来做,而且会考虑ARIA(Accessible Rich Internet Applications,可访问富因特网应用)的role属性(即bannernavigationmaincontentinfo这几个角色)。可能你也知道,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 &copy; Company Name</small></p>
</footer>

这就是我们页面的基本结构和内容了。接下来更进一步。

30:00