为了在Bootstrap响应式导航条基础上完成我们的导航条，还得再增加两个新元素，以及相应的类和data属性。相关的用法可以参考Bootstrap的Components文档，在Navbar选项卡下：http: getbootstrap com components

关键词： 完成　响应式　导航条 

1 9　编译和链接默认的Bootstrap CSS我们可以直接把Bootstrap默认的bootstrap css文件拿来用，但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。1 9 1　编译Bootstrap CSS可能大家有熟

关键词： 　编译　Bootstrap　  CSS 

还记得吧，咱们并没有借用Bootstrap预编译的CSS文件，而且也没有自己写LESS并编译自己的CSS；稍后我们会。在此之前，我们得先把Bootstrap特有的元素设置好，那就是导航条。作为起点，我们可以就使用Bootstrap基本

关键词： 1  8　导航条 

下面开始准备页面内容。目前，还只有一个段落。我们可以稍微添加一点东西，比如下列内容：包含Logo和导航的页头区；包含页面内容的内容区；包含版权和社交媒体链接的页脚区。添加这些内容，我们都会基于最新的HT

关键词： 元素  结构 

1 7　设定站点标题先把index html文件中<title>的内容加上。你可以随便给自己的作品起名字，比如Bootstrappin&rsquo; Portfolio。为准确起见，这里使用HTML实体& 39来表示单引号，结果如下所示：<title>Bootstr

关键词： 浏览器  消息 

在新项目文件夹中，用编辑器打开index html。这个示例标记文件来自H5BP，体现了一些最佳实践和建议方案。我们就以这个文件为基础，把它整合到Bootstrap的工作流中。下面先了解一下这个文件。浏览一下整个文件，你

关键词： 模板 

现在，Project Template 1文件夹应该如下图所示：而fonts文件夹，包括新创建的 htaccess文件在内，应该如下图所示：我一直在用自己的FTP客户端来查看文件，并将其设置为显示隐藏的文件。如果你没有像我这样，有

关键词： 大盘点 

下面我们把Bootstrap中重要的LESS文件复制过来：把bootstrap less文件夹复制到Project Template 1文件夹中。

关键词： 文件 

在后面的项目中，我们会使用LESS创建自定义的Bootstrap CSS文件。下一章开始就会这么做，现在先不用考虑CSS。

关键词： 文件 

好，接下来要加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了一个放置JavaScript文件的文件夹（名为js），在这个文件夹里，可以看到4个文件——有2个位于名为vendor的子文件夹内，如下面的截图所示：B

关键词： 　JavaScript 

1 4　加入Bootstrap文件现在，我们可以考虑把Bootstrap的文件弄到Project Template 1文件夹里来了。我们会从Bootstrap提供的一大堆文件里选出需要的部分。为了加快进度，强烈建议大家分别在两个窗口中打开Boot

关键词： 字体 

不要忘了用自己项目的图标替换Boilerplate默认的图标文件，包括以下图标。apple-touch-icon-precomposed png：为确保所有移动设备（包括高像素密度屏幕设备）都有最佳效果，这个图标应该是144px见方的（样板文件

关键词： 图标  桌面  站点 

样板中的下列文件提供了项目的标准信息，根据需要你可以更新它们、直接使用它们，也可以放那儿不管，完全取决于你。humans txt：这个文件记载贡献者，H5BP、Bootstrap的，还有其他贡献者。LICENSE md：在H5BP许可

关键词： 样板  文件 

如果你还从未看过H5BP中的 htaccess文件，建议先看看H5BP的文档（http: h5bp com）。当然，这个文件本身也有详细注释，可以用编辑器打开从头到尾看一遍。这个文件中的内容不一定全都有用，这取决于你的主机设置

关键词： 样板  文件 

删除下列只与H5BP相关的文件夹和文件：因为稍后我们要使用LESS创建自己的CSS文件，所以先删除css文件夹。CHANGELOG md。CONTRIBUTING md。doc文件夹及其中内容。

关键词： 样板  文件 

1 3　准备项目模板文件夹接下来，我们为第一个项目创建一个文件夹以及一些基本的文件。为此，我们还要用到HTML5样板文件HTML5 Boilerplate（H5BP），然后把Bootstrap的有用文件复制过去。1 3 1　下载H5BP在浏览

关键词： 下载  H5BP 

下载Bootstrap的途径很多，但通过这些途径下载的文件并不完全一样。为了后面考虑，我们必须保证下载到LESS文件，因为这些文件可以为我们提供定制和创意的基础。在这里，我们直接溯本求源，打开GetBootstrap com。

关键词： 　下载  Bootstrap 

简洁的CSS（LESS）值得重点说一下。从单纯给标记添加类深入到自定义Bootstrap的LESS文件，大幅提高了我们的工作效率和控制力。在Bootstrap默认的样式表基础之上，开发人员可以发挥自己的创造力，定制出自己的核心

关键词： 威力 

Bootstrap v2 0发布之后，响应式设计随之成为主流，其界面元素也做到了跨设备响应（包括桌面、平板和手机）。现在，Bootstrap v3 0也发布了，其功能愈加完善，包括：移动优先的响应式网格；基于Web字体的图标，

关键词： 1  1  1　与时  俱进 

运用得当的情况下，我认为Bootstrap无论从质量还是效率角度说，都是Web开发社区的一大福利。随着越来越多的开发者使用这个框架，越来越多的人也加入了这个社区，从而逐步接受了前沿的最佳实践。Bootstrap从一开始

关键词： 数量  质量