还记得吧,咱们并没有借用Bootstrap预编译的CSS文件,而且也没有自己写LESS并编译自己的CSS;稍后我们会。在此之前,我们得先把Bootstrap特有的元素设置好,那就是导航条。

作为起点,我们可以就使用Bootstrap基本的导航条(后面再添加更多细节)。为此,我从Bootstrap文档中拿来它的导航条代码,然后做了如下调整:

  • 添加了navbar-static-top类,因为我们希望导航条能够定位到窗口顶部,但能够随页面滚动而滚动;

  • 把项目名称链接到index.html;

  • 把原来的父div标签改成了语义化的HTML5 nav标签。

经过这一番调整后,得到如下header元素:

<header role="banner">
  <nav role="navigation" class="navbar navbar-static-top navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">Project name</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </nav>
</header>

保存结果,在浏览器中打开并刷新index.html。如下图所示,并没有太多特别的:

{%}

内容有了。现在,我们特别需要自己的样式表。先来编译并链接Bootstrap默认的样式表。

30:00