《Bootstrap开发精解：原理、技术、工具及最佳实践》一2.8　整合

本节书摘来自华章出版社《Bootstrap开发精解：原理、技术、工具及最佳实践》一书中的第2章，第2.8节，作者[美] 亚拉文·谢诺伊（Aravind Shenoy）乌尔里希·索松（Ulrich Sossou），更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.8　整合

到目前为止，我们讨论了Bootstrap和LESS的各个方面。我们并没有在这个示例中使用Bootstrap CSS CDN，因为我们打算修改bootstrap.less文件，我们将使用WinLess编译器将它编译为bootstrap.css。
接下来，我们每一步都会使用到前面学到的知识：
1）下载Bootstrap文件并将其解压到一个文件夹中。
2）创建一个名为bootstrap_example的HTML文件，将它与Bootstrap文件存放在同一个文件夹中。
这个bootstrap_example HTML文档的代码如下：

代码执行后的输出结果如图2-15所示。

3）Bootstrap文件夹中包含了以下子文件夹和文件（见图2-16）：
css
fonts
js
bootstrap_example.html

4）既然我们现在打算使用Bootstrap源代码，就必须先下载它的ZIP文件并把它保存起来。解压之后我们可以看到文件夹中的内容如图2-17所示。

5）现在，我们在css文件夹中再创建一个新的文件夹，名为bootstrap。css文件夹中的内容如图2-18所示。
6）从源代码中复制less文件夹中的内容，并把它粘贴到css文件夹中新建的bootstrap文件夹内。图2-19显示了css文件夹中的bootstrap子文件夹下的内容。

7）在bootstrap文件夹中，找到variable.less文件并用记事本或者Notepad++打开。在这个例子中，我们使用的是简单的记事本。打开variable.less文件之后，我们可以看到文件的内容如图2-20所示。

8）现在，我们可以看到@body-bg被赋予了默认值#fff作为颜色代码。如果要将body元素的背景色更改为绿色，就需要将其赋值为#00ff00。修改后保存文件并在bootstrap文件夹中找到bootstrap.less文件。接下来，我们要用到WinLess。
9）打开WinLess并将bootstrap文件夹的内容添加到其中。在文件夹面板中，可以看到它已经加载了所有的less文件，如图2-21所示。

10）现在，我们要先取消所有选中的文件，然后只选择bootstrap.less文件，如图2-22所示。

11）单击Compile（编译）按钮，WinLess将会把bootstrap.less文件编译为bootstrap.css。请从bootstrap文件夹中复制编译好的新的bootstrap.css文件，将其粘贴到css文件夹中，替换原有的bootstrap.css文件。
12）现在我们有了更新过的bootstrap.css文件，回到bootstrap_example.html并执行它，执行之后，代码的输出结果如图2-23所示。

我们可以看到

我们根据bootstrap.less文件的位置指定了路径./bootstrap/bootstrap.less。如果这个文件放在其他位置，务必要给出准确的路径。
14）现在，我们尝试进行一些定制，添加下面的代码到styles.less中：

15）下一步就是将styles.less文件编译为styles.css，为此我们要再次使用WinLess。我们必须取消选中所有的选项，只选择styles.less进行编译（见图2-24）。

16）编译之后，styles.css文件将会包含Bootstrap中所有的CSS声明。下一步就是把styles.css样式表添加到bootstrap_example.html文件中。
添加后的HTML代码如下：

代码的输出结果如图2-25所示。

因为我们把背景色修改为橙色（#ffa500），还创建了圆角边框，并分别定义了font-size-base和line-height-base，所以输出结果也发生了变化。
LESS变量添加到styles.less文件时应该放在Bootstrap的引用后面，这样它们才能够覆盖Bootstrap文件中定义的变量。简而言之，我们自己编写的所有自定义代码都应该添加到Bootstrap引用的后面。