我们可以直接把Bootstrap默认的bootstrap.css文件拿来用,但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。

可能大家有熟悉LESS,也有不熟悉LESS的。没关系,不管你是否熟悉,我都会教你怎么做。不过,我还是建议你看看LESS的文档:http://lesscss.org,再找几个LESS的教程看完。稍后你就会知道,LESS非常强大,也很好玩,使用它能够大大提高效率。

现在,我们只编译,而不写LESS文件。

找到less/bootstrap.less,在编辑器中打开它。你会发现这个文件导入了less文件夹中所有的其他文件。编译后,这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。

如果你以前没有编译过LESS文件,需要下载和安装它的编译器。

1为方便起见,读者也可以在这个链接下载:http://pan.baidu.com/s/1c03tWQW。——译者注

下载了选择的LESS编译器之后,安装,打开。然后就可以按照下面的步骤来做了。

1. 在fonts、img、js和less文件夹平级的主文件夹里创建一个css文件夹。

{%}

2. 使用下列方法中的一种把主文件夹(css、fonts、img、js和less文件夹的父文件夹)添加到编译器:

  • 把文件夹拖到编译器窗口中;

  • 在编译器窗口中找到Add folder按钮,点击后选择主文件夹。

3. 然后在编译器窗口中可以看到加载的LESS文件,找到less/bootstrap.less文件。

4. 右键单击less/bootstrap.less文件,选择Select output file,找到刚刚创建的css文件夹,此时输出文件名应该自动会变成bootstrap.css,单击“保存”。

5. 选择输出路径和文件名,单击Compile。

6. css文件夹中会出现编译生成的bootstrap.css文件。

 如果编译出了问题,可以查看编译器的日志,以及输出路径是否正确。此外,如果编译时出错,也可能是编译器的更新没有跟上LESS开发的步伐。最近,我在使用另外一个免费编译器时就碰到了这样的问题。如果你发现编译器不能编译默认的Bootstrap LESS文件,很可能需要下载编译器的最新版本,或者编译器本身需要更新了。

7. 编译成功后,唯一要注意的是这个文件名是否与index.html中链接的文件名相同。

8. 在index.html中,删除指向css/normalize.css的样式表链接,因为这个样式表已经包含在Bootstrap中了(normalize.less在bootstrap.less中是第一个导入的)。

9. 接下来链接的样式表指向css/main.css,因为后面我们会自定义Bootstrap以生成自己的样式表,所以这个链接先不用动,将来我们再用它来链接自定义的样式表。

10. 在这里,我们先来个偷梁换柱,复制一份bootstrap.css,重命名为main.css(将来再用自定义的样式表重写这个文件),结果如下图所示:

{%}

11. 刷新浏览器,应该看到Bootstrap 3默认的导航样式,如下图所示,从排版和布局上有所增强,这说明CSS已经生效,祝贺你!

{%}

这样我们就配置好了使用Bootstrap的默认样式了。接下来,我们就继续把导航条变成响应式的。在此期间,我们还会顺便测试Bootstrap的JavaScript插件能够正常工作。

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

先按照下列步骤添加额外的标记。

1. 搜索到<div class="navbar-header">,在这个元素中,添加一个navbar-toggle按钮,用于展开和收起响应式导航条。下面就是这个按钮的全部标记(我把它放到navbar-header里面):

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-
    toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html">Project 
    name</a>
</div>

下面简单解释一下以上代码:

  • 按钮中的navbar-toggle类用于应用CSS样式;

  • 后面的数据属性data-toggledata-target是Bootstrap的JavaScript插件要用的,分别表示预期行为和预期目标(即collapse和类名为navbar-collapse的元素,这个元素后面会添加);

  • 类名为icon-barspan元素是CSS用来创建按钮中的三道杠按钮用的。

2. 接下来把导航项包装在一个收起的div中,即用带有适当Bootstrap类的divul class="nav navbar-nav">包装起来:

<div class="navbar-collapse collapse">
  <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-collapse -->

在前面两步中,我们把代码分隔成两部分,而且都位于<div class="container">中。为确保你的代码写得没错,可参考本章完整的示例代码。

 这里的标签名、类名和数据属性在将来的Bootstrap版本中可能会变。如果你发现自己的代码不行,一定要看看相应Bootstrap版本的文档。保险起见,可以使用本书提供的示例代码来试验。

好了,保存文件,刷新浏览器。在任何一个现代浏览器(IE9或Firefox、Chrome、Safari等的最新版本)中,拖动窗口缩小到小于980像素。

如果一切顺利,应该看到收起来的导航条,如下面的屏幕截图所示,但可以看到站点名或Logo以及切换按钮。

{%}

这是个好兆头!再单击切换按钮,应该看到滑动打开的链接,如下图所示:

{%}

成功啦,干得不错!

如果一切顺利,那说明你已经成功地把LESS编译成了CSS,而且也成功地包含了Bootstrap的JavaScript插件。

如果不顺利,可以再检查一遍以下事项。

  • 你的标记结构嵌套关系是否正确?有没有未闭合、不完整或错配的标签 、类,等等?

  • 是否成功地把LESS编译成了CSS?编译得到的CSS是否放到了正确的文件夹里,命名是否正确?

  • 位于index.html中的CSS链接是否正确?

  • 是否包含了Bootstrap的JavaScript插件?

另外,下面这些事项也可能有用。

1. 把前面的步骤从头到尾再过一遍,同时注意上述各项;

2. 验证HTML保证格式正确;

3. 比较本书示例代码和你自己的代码;

4. 参考Bootstrap文档,看是否有标签结构和属性的变化;

5. 把你的代码放到http://jsfiddle.net/http://www.codepen.com/上,到http://stackoverflow.com/上寻找高手帮助。

把那么多文件揉合到一起,让它们协作运行,出点问题很正常。而学会找到问题和解决问题同样是我们的生存之道!

好吧,假设到现在为止所有问题都解决了,接下来就让我们再探讨一个不那么显而易见的问题。我们想让自己的作品支持IE8。为此,需要考虑一下老版本的浏览器。

要支持IE8,需要一段JavaScript代码让浏览器能够响应媒体查询。这段代码就是Scott Jehl的respond.js“腻子脚本”。

Bootstrap自身的文档推荐这样做以兼容IE8。相关的信息可以参考这里:http://getbootstrap.com/getting-started/#browsers

为了针对IE8应用这段脚本,需要针对IE8的条件注释:

<!--[if lt IE 9]>
...
<![endif]-->

另外 ,根据Andy Clarke的建议,为了不让并不需要这个脚本的Windows移动设备加载该脚本,还应该排除IE移动版浏览器,具体参见他的在线代码库320andup,地址是:https://github.com/malarkey/320andup/

Clarke建议的条件注释如下:

<!--[if (lt IE 9) & (!IEMobile)]>
...
<![endif]-->

有了条件注释,下面就是在站点模板文件中添加腻子脚本了,步骤如下。

1. 打开https://github.com/scottjehl/Respond(也可以在Github上搜索respond.js找到下载地址)。如果你有时间,可以看看这个页面中的文档,了解一些这个脚本的工作原理。

{%}

2. 找到文件,下载ZIP:

{%}

3. 解压缩,找到名为respond.min.js的压缩版。

4. 把它复制到项目文件夹中的js/vendor目录下,与jQuery和Modernizr放到一块。

{%}

5. 然后,把下面几行加载respond.js文件的代码添加到index.html中,包括针对IE的条件注释,就在加载Modernizr的代码下面:

<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
  <script src="js/vendor/respond.min.js"></script>
<![endif]-->

6. 好了,这样IE8就可以支持媒体查询响应视口大小变化了。

 如果你想测试添加腻子脚本的结果,但又没有IE8浏览器,可以使用一个在线服务,叫Browsershots,地址是:http://browsershots.org,这是免费的。还有一个收费的,叫BrowserStack,地址是:http://www.browserstack.com(试用免费)。

这样,我们站点的模板就做完了。继续之前,我们先来小结一下。

30:00