还记得吧,咱们并没有借用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">Home</li> <li>Link</li> <li>Link</li> </ul> </div> </nav> </header> 保存结果,在浏览器中打开并刷新index.html。如下图所示,并没有太多特别的: 内容有了。现在,我们特别需要自己的样式表。先来编译并链接Bootstrap默认的样式表。