<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script>window.jQuery || document.write('<script src="https://www.jb51.net/js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
□ 下面就是plugins.js 和main.js的链接，别分保存JavaScript插件代码和我们编写的代码：
复制代码 代码如下:
<script src="https://www.jb51.net/js/plugins.js"></script><script src="https://www.jb51.net/js/main.js"></script>
□ 谷歌的Analytics 脚本：
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='https://www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script>
对此次的任务而言，我们需要对这个模板中的元素进行如下操作：
(1) 设定我们站点的标题，针对旧版本浏览器用户更新现有的IE条件注释；
(2) 基于LESS文件编译Bootstrap的CSS，添加基本的页面内容；
(3) 整合Bootstrap的JavaScript插件，确保响应式的导航条（navbar）正常响应。
做完这几件事后，我们就可以开始设计自己的网站了。
5.设定站点标题
复制代码 代码如下:
<title>初识 Bootstrap</title>
5.1 调整过时的浏览器消息
模板中的消息针对老浏览器用户。
<!--[if lt IE 8]>
<p>You are using an <strong>outdated</strong> browser. Please <a href="">
upgrade your browser</a> to improve your experience.</p>
<![endif]-->
其中包含的链接 ，该网站是一个推荐浏览器升级的站点。
5.2 设置主结构元素
下面开始准备页面内容，目前还只有一个段落。我们可以稍微添加一些内容：
□包含Logo的导航的页头区；
□包含页面内容的内容区；
□包含版权和社交媒体链接的页脚区。
添加这些内容，都会基于最新的HTML最佳实践来做，而且会考虑ARIA（Accessible Rich Internet Applications，可访问富因特网应用）的role属性（即banner、navigation、main和contentinfo 这几个角色）。HTML5后来又增加了 <main cole="main></main> 元素，目的是专门为页面或分区中的主内容提供一个专用的元素。要了解更多信息，可以参照链接：https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
找到下面的代码：
<!-- 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 © Luka Ye</small></p> </footer>
这就是我们页面的基本结构和内容。
6.导航条
我们先把Bootstrap特有的元素设置好，那就是导航条。
作为起点，我们可以暂时就使用 Bootstrap基本的导航条。为此，从Bootstrap文档中拿来它的导航条代码，然后做出如下调整：
□添加了 navbar-static-top 类，因为我们希望导航条能够定位到窗口顶部，但能够随页面滚动而滚动。
□把项目名称连接到 index.html；
□把原来的父div标签改成了语义化的HTML5 nav 标签。
调整后，其header元素如下：