《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.8 整合-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

《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文档的代码如下:
image

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

image

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

image

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

image

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

image

image

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

image

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

image

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

image

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

image

我们可以看到

元素的背景色变成了绿色,因为我们在链接到bootstrap.less文件的variable.less文件中对这个值进行了全局性的修改,bootstrap.less文件随后已经被WinLess编译为bootstrap.css。我们可以使用LESS变量和mixin来自定义Bootstrap,还可以导入Bootstrap文件添加自定义。
13)现在我们在css文件夹中创建自己的less文件,取名为styles.less。我们将在styles.less文件中添加下面这行代码,用于包含Bootstrap文件。
image

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

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

image

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

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

image

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: