Bootstrap实战——1.9　编译和链接默认的Bootstrap CSS

我们可以直接把Bootstrap默认的bootstrap.css文件拿来用，但不如借此机会学习一下编译LESS文件。这样可以为我们将来的设计打下基础。 1.9.1　编译Bootstrap CSS 可能大家有熟悉LESS，也有不熟悉LESS的。没关系，不管你是否熟悉，我都会教你怎么做。不过，我还是建议你看看LESS的文档：http://lesscss.org，再找几个LESS的教程看完。稍后你就会知道，LESS非常强大，也很好玩，使用它能够大大提高效率。 现在，我们只编译，而不写LESS文件。 找到less/bootstrap.less，在编辑器中打开它。你会发现这个文件导入了less文件夹中所有的其他文件。编译后，这个文件会生成完整的bootstrap.css样式表。而这就是我们第一步要做的。 如果你以前没有编译过LESS文件，需要下载和安装它的编译器。  Windows用户，下载安装这个编译器： WinLess（免费桌面应用），地址为http://winless.org 。  Mac用户，可以选择下载： Crunch应用（免费），地址为http://crunchapp.net/。 CodeKit（收费），地址为http://incident57.com/codekit/。 下载了选择的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插件能够正常工作。 1.9.2　完成响应式导航条 为了在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-toggle和data-target是Bootstrap的JavaScript插件要用的，分别表示预期行为和预期目标（即collapse和类名为navbar-collapse的元素，这个元素后面会添加）； 类名为icon-bar的span元素是CSS用来创建按钮中的三道杠按钮用的。 (2) 接下来把导航项包装在一个收起的div中，即用带有适当Bootstrap类的div把 ul class="nav navbar-nav">包装起来： <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active">Home</li> <li>Link</li> <li>Link</li> </ul> </div><!--/.nav-collapse --> 在前面两步中，我们把代码分隔成两部分，而且都位于<div class="container">中。为确保你的代码写得没错，可参考本章完整的示例代码。 这里的标签名、类名和数据属性在将来的Bootstrap版本中可能会变。如果你发现自己的代码不行，一定要看看相应Bootstrap版本的文档。保险起见，可以使用本书提供的示例代码来试验。 好了，保存文件，刷新浏览器。在任何一个现代浏览器（IE9或Firefox、Chrome、Safari等的最新版本）中，拖动窗口缩小到小于980像素。 如果一切顺利，应该看到收起来的导航条，如下面的屏幕截图所示，但可以看到站点名或Logo以及切换按钮。 这是个好兆头！再单击切换按钮，应该看到滑动打开的链接，如下图所示： 成功啦，干得不错！ 1.9.3　排除故障 如果一切顺利，那说明你已经成功地把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。为此，需要考虑一下老版本的浏览器。 1.9.4　支持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（试用免费）。 这样，我们站点的模板就做完了。继续之前，我们先来小结一下。