<header role="banner"> <nav role="navigation"> <div> <div> <a href="https://www.jb51.net/index.html">初识 Bootstrap</a> </div> <ul> <li><a href="https://www.jb51.net/index.html">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </nav> </header>
保存结果，其导航条的显示效果如下：
内容有了。现在，我们特别需要自己的样式表。先来变异并链接Bootstrap默认的样式表。
7.编译和链接默认的Bootstrap CSS
7.1 编译Bootstrap CSS
找到less/bootstrap.less 并打开它，这个文件导入了less文件夹中所有其他文件。编译后，这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。
PS:LESS的文档地址为
如果一切没有编译过LESS文件，需要下载和安装它的编译器。
□ Window 用户，下载和安装这个编译器：
■ WinLess（免费桌面应用），地址为 。
□ Mac 用户可以选择下载：
■ Crunch 应用（免费），地址为
■ CodeKit（收费），地址为
下载了选择的LESS编译器之后，安装，打开。然后就可以按照下面的步骤来做了。
(1) 在根目录创建css文件夹。
(2) 使用下列的一种把主文件（css、fonts、img、js和 less文件夹的父文件夹）添加到编译器：
■ 把文件夹拖到编译器窗口中；
■ 在编译器窗口中找到 Add folder 按钮，点击选择主文件夹。
(3) 然后再编译器窗口中可以看到加载的LESS文件，找到less/bootstrap.lesss文件
(4) 右键单击less/bootstrap.less 文件，选择 Select output file，找到刚创建的css文件夹，此时输出文件名应该自动会变成bootstrap.css，单击“保存”。
(5) 选择输出路径和文件名，点击Compile。
(6) css文件夹中会出现编译生成的 bootstrap.css文件。
(7) 编译成功后，唯一要注意的是这个文件名是否与index.html中链接的文件名相同。
(8) 在 index.html 中，删除指向 css/normalize.css 的样式表链接，因为这个样式表已经包含在 Bootstrap中了。
(9) 复制一份bootstrap.css，重命名为main.css。
(10) 浏览器打开index.html文件，可以看到起默认的导航样式如下，从排版和布局上有所增强，这说明CSS已经生效。
7.2 完成响应式导航条
为了在 Bootstrap 响应式导航条基础上完成我们的导航条，还得再增加两个新元素，以及相应的类和data属性。相关的用法可以参考 Bootstrap的Components 文档，在Navbar选项卡下：#navbar
先按照下列步骤添加额外的标记。
(1) 搜索到 <div>，在一个元素中添加一个navbar-toggle按钮，用于展开和收起响应式导航条。下面就是这个按钮的全部标记：
<div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href="https://www.jb51.net/index.html">初识 Bootstrap</a> </div>
简单解释下以上代码：
■ 按钮中的navbar-toggle 类用于应用CSS样式；
■ 后面的数据属性 data-toggle 和 data-target 是Bootstrap 的JavaScript 插件要用的，分部表示预期行为和预期目标（即 collapse 和类名为 navbar-collapse 的元素，这个元素后面会添加）
■ 类名为 icon-bar 的span 元素是CSS用来创建按钮中的三道杠按钮用的。
(2) 接下来把导航项包装在一个收起的div中，即用带有适当 Bootstrap类的div把<ul>包装起来：